What alternative to tabindex=“0” exists that makes page content browsable in sequential order without missing elements?

安稳与你 提交于 2019-12-24 18:37:47

问题


I have a page that has several HTML elements, that are ignored and skipped when the user is navigating the page from top to bottom using tab key and a screen reader. This is something that I was able to fix by adding the attribute tabindex="0" to the divs that contain the text that needs to be read by the screen reader. some comments say that it is not the right approach to make this. Which is the recommended alternative?

I´m using Talkback on android to navigate the page and on windows both Jaws and Narrator, they all have the same behaviour, elements without tabindex are ignored, it jumps straight to elements skipping the titles and texto that surrounds the tag.


回答1:


Users with screenreaders use the tab key to go to activable elements. For standard elements (like text) they can use other navigation shortcuts which depends on their navigation mode (browse or focus mode), their screenreader, and their own preferences, for instance arrows ()




回答2:


After seeing you ask several questions around the same subject there is a common theme, you need to learn how an end user would use a screen reader vs users who have mobility issues as it will make it a lot easier for you to implement accessibility going forward.

I think people get confused by the fact that all active content should be accessible via the tab key for people with mobility issues to get around the page and think that it is the only way users use a screen reader (two different use cases).

The tab key is useful for those with mobility issues who do not need a screen reader to reach active items (the real reason for 'skip links'), but they will consume the content visually so you don't need to make the content focusable (they will likely scroll the page with space or up and down arrow keys).

For PC users who use a screen reader the tab key is actually a secondary way of navigating.

In general headings, forms, landmarks (e.g. <main> or <div role="main">) and links are the way a user discovers your page content and design on a screen reader (so they may press the 1,2,3 keys in NVDA to find the level 1, level 2 and level 3 headings respectively to find the content sections they are interested in and get a feel for page structure and content (which is why it is important not to skip heading levels).

They may also navigate through the links on a page (to get a feel for the menu structure and content the page links to) which is why links need to have meaningful content (i.e. not 'click here').

Content that is not focusable is still accessible as long as your HTML is semantically correct so stop worrying about trying to make it accessible via the tab key, it is accessible via other methods and screen readers have easy methods to start reading from the current cursor position.

This PDF from Deque shows a list of common keyboard commands for NVDA that is a great starting point to learn how to use a screen reader, within 30 minutes you will soon see what actually matters for a screen reader user and it will make the rest of your accessibility journey much easier!

Golden Rule - get your semantics correct and your website will be 95% accessible by default.



来源:https://stackoverflow.com/questions/59429116/what-alternative-to-tabindex-0-exists-that-makes-page-content-browsable-in-seq

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!