只为屏幕阅读器隐藏文本

Question

I simply can't get the answer to this question. The WCAG says it can be done by aria-hidden tag, but I've read it's not working at many screen readers.

Can't get how display:none can help to hide some text only for screen readers(=visible to other devices than SR). This is also not clear how would screen reader act for display:none if it not supports css.

Is there any technique or best practice or whatever I can use to hide some text only for screen readers?

Answer 1

Sorry, the best practice is to use aria-hidden attribute. Users with screen readers ignoring ARIA attributes should change their software.

Answer 2

aria-hidden should be used to hide any non-focusable content on a page from screen readers. All major screen readers current versions support this well.

In oder to satisfy WCAG 2 AA , a feature only needs to be supported on the common or at least one widely distributed free assistive technology. NVDA and Firefox on Windows, VoiceOver on OS X and iOS and Talkback with Firefox on Android all support this feature.

Answer 3

You can also use role="presentation" , depending of the tag, browser and screen reader it can be a better option (or worse). Take a look at this good tutorial,

HTML5 Accessibility: aria-hidden and role=”presentation”