Ensure screen reader specific content is rendered off-screen rather than hidden or not displayed
GENERAL
TESTING
GENERAL
TESTING
Description
The Sakai Project or Component this issue was associated with is: LessonsThroughout the environment screen reader specific content is placed off-screen with the CSS class "skip". This is used in many different scenarios, such as <label> elements for input fields, informative text placed in <span> elements, and skip-links used to jump to the main content. All of these elements are positioned off-screen with this "skip" CSS class, however the class itself utilizes the CSS display:none property. This not only hides the content off-screen, but it also hides it from assistive technology. As such, screen reader users never interact with this content.Developers must ensure that screen reader specific content placed off-screen remains exposed to assistive technologies. In order to ensure that this content remains exposed, the CSS display:none property must not be utilized. http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/002524d7-0482-4895-909e-10bc2aee3ca7#Ad008c9fe238169437091508598a0642-HTML
There are two reasonable approaches. One is this. The other is to position content off screen.
Matt Clare August 2, 2016 at 12:44 PM
Great, thanks for the tip. I'll add to SAK-31549.
Thanks for the accounting on too.
Charles Hedrick August 2, 2016 at 12:36 PM
I believe this was fixed by LSNBLDR-693. It's hard to verify, because they didn't give any detail on the specific instances. But I reviewed all uses of "skip."
Charles Hedrick August 2, 2016 at 12:31 PM
We have a common practice. Someone used the wrong class. I normally use "offscreen", which is
The Sakai Project or Component this issue was associated with is: LessonsThroughout the environment screen reader specific content is placed off-screen with the CSS class "skip". This is used in many different scenarios, such as <label> elements for input fields, informative text placed in <span> elements, and skip-links used to jump to the main content. All of these elements are positioned off-screen with this "skip" CSS class, however the class itself utilizes the CSS display:none property. This not only hides the content off-screen, but it also hides it from assistive technology. As such, screen reader users never interact with this content.Developers must ensure that screen reader specific content placed off-screen remains exposed to assistive technologies.
In order to ensure that this content remains exposed, the CSS display:none property must not be utilized.
http://qa03-sakai.marist.edu:8080/portal/site/e72d72d4-f582-4dce-8261-6b923060787c/tool/002524d7-0482-4895-909e-10bc2aee3ca7#Ad008c9fe238169437091508598a0642-HTML
Here is additional guidence for invisible content http://webaim.org/techniques/css/invisiblecontent/Many examples of the "skip" class suggest that the should be placed off-screen as opposed to not read.
The label a11y:invisiblecontent has been added to track the larger scope of this issue.