I would make sure to use this technique sparingly and with consideration of the user experience while navigating.įor example, it should be possible to achieve your li example easily enough by applying it to a span inside the li element. Naturally you can call the class hidden or visually-hidden or whatever else makes most sense to you. screen-reader-onlyĬlip: rect(1px 1px 1px 1px) /* IE6, IE7 */Īnd then you would add the class for text that you want to be, well, for screen readers only. I encourage you to read about it in full but for convenience and reference here is the CSS from the second example (thank you for the suggestion Victor). Likewise there is another useful guide worth reading from TheA11yproject WebAIM has a guide on this and recommends using absolute positioning. This won't necessarily make sense if they are on a mobile or tablet, or if they use a braille keyboard, or even depending on their key mapping and screen reader (VoiceOver on Mac, for example, will not move to the next line with the down arrow unless QuickNav is on). In the rare cases where you do need to add SR-only recommendations, be wary of using language like "use the arrow keys".If not: do you have some kind of custom interaction where you capture the down arrow keyup event in Javascript? This will not always work nicely with screen readers, be sure to test it and provide alternative. Also remember that most different screen readers already give instructions. Adding that everywhere might frustrate them. Are you just instructing users how to go to the line below? They probably do not need that: people who use a screen reader user day-to-day know the basics of how it works, and they will know how to navigate a list.Do you have custom interactive elements in these ? In that case, could they not be represented using a different ARIA role, rather than being announced as a list?.However, although I don't know the wider context, think twice over whether you need to add this info there. Unfortunately you would have to repeat the same text element at the end of every, this cannot be repeated automatically (using CSS ::after and content: has very uneven support between different screen reader vendors). For example My text my text Switch through the elements using arrow keys Your best bet is likely to use a visually hidden class in CSS, a "hack" that means the text isn't rendered visually, but still announced by screen readers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |