E-mail List Archives
Thread: A question about screen reader only css.
Number of posts in this thread: 2 (In chronological order)
From: 김형섭
Date: Sun, Jan 03 2016 5:53AM
Subject: A question about screen reader only css.
No previous message | Next message →
Hello, I'm Hyongsop Kim in Korean and have a question about screen reader only css.
As you know, If I have to hide some text for the screen reader users, I have to use css property such as overflow hidden, position absolute and etc.
By the way, in case of using this css, there are some problems.
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.
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.
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.
Thank you.
ê¹ í ì / Hyongsop Kim
(주)ìë¹ì ì¤ / ë리
ìì¸ì ì¢
ë¡êµ¬ ê°íë 1-29
1-29 Gahoe-dong, Jongno-gu, Seoul, Korea
T. +82 70 4900 0895 F. +82 2 313 3645 M. +82 10 5359 5996
http://dialogueinthedark.co.kr
http://cafe.naver.com/dialogueinthedark
From: Joe Chidzik
Date: Tue, Jan 05 2016 3:28AM
Subject: Re: A question about screen reader only css.
← Previous message | No next message
> 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