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”
