WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A question about screen reader only css.

for

From: Joe Chidzik
Date: Jan 5, 2016 3:28AM

> 1. In mobile page, if I use this css, screen reader users can read hidden text
> with their finger swipe gesture.
> But if they use explore by touch, they can't read hidden text because this
> text is not positioned in real screen.

This is also true of sighted users who will also not be able to perceive any hidden text. If the information is important for all users, then it should be available to all users e.g. displayed visually, in which case it will appear in the focus order for swiping users.

> 2. if I have to give additional information in a tag, I have to use one more tag
> such as span in order to give hidden text property.
> For example, <a href=www.google.com target="_blank">google
> <span class="sr-only">opens in new tab</span</a> This span
> tag is useless tag.

Using this example, I would suggest it is also useful to give sighted users information about links that open in new windows or go to external sites. Wikipedia does this well through use of icons. These icons provide a visual cue as to the nature of the link, and also provide a method (via the alt attribute) for letting screenreader users know the same information.

> So is there another way to give additional information to screen reader users
> with hidden method without using this kind of css by using aria?
> I think aria-label, but aria-label is used just label and can't use it as additional
> information or long paragraph.
> Please help me about this issue.

I would consider if the information you are adding should be solely for screenreader users, of if there is value in making it accessible to all users. If the latter, then simply provide the information visually in which case (if done properly) it will be accessible to most users.

Joe