Ensure screen reader specific content is rendered off-screen rather than hidden or not displayed
GENERAL
TESTING
GENERAL
TESTING
Description
Throughout 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.
This could be resolved with a unilateral change to the skip class, or by creating two classes so components of Sakai could consider their what their intent is.
As this is an important part of Sakai, I'm noting that it would be great to have a authentic user who is familiar with JAWS etc. to do some follow-up testing.
Sam Ottenhoff January 24, 2017 at 4:06 PM
can you just confirm that the Github change here so we can backport this into Sakai 11 and close/delete all of these sub-tickets?
Throughout 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.
This could be resolved with a unilateral change to the skip class, or by creating two classes so components of Sakai could consider their what their intent 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 across components of Sakai.