Ensure screen reader specific content is rendered off-screen rather than hidden or not displayed
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.
Verified that there are no conspicuous revealed elements that should be hidden in the skip class, and that there is at least one example of a working skip class in each tool.
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.http://qa03-sakai.marist.edu:8080/portal/site/~admin/tool/~admin-1125/noti#a0ff54fdfea287b3e030bc48d7626194-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.