Hide text ONLY for screen readers

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?



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.


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


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”


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.