Ensure screen reader specific content is rendered off-screen rather than hidden or not displayed: Samigo use of skip class

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.

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.

Activity

Show:

Alexandre Ballesté Crevillén February 13, 2017 at 6:40 AM

I've tested in Sakai - 11.3-RC01 2017/02/10 in https://qa1-us.nightly.sakaiproject.org/portal
'sr-only' are shown instead 'skip' Worked fine in time warning dialogs.

Matt Clare January 24, 2017 at 2:03 PM

Works on https://trunk-mysql.nightly.sakaiproject.org in a 5 min timelimited quiz as of Tuesday January 24, 2017. Sorry that I needed helping spotting that.

Matt Clare January 24, 2017 at 1:53 PM

Can't 'cause I was wrong. I looked at the wrong line. Looks good now. Waiting for the time warning on my screenreader now.

Sam Ottenhoff January 24, 2017 at 1:48 PM

If you still see old skip class on master, can you show a screenshot?

Matt Clare January 24, 2017 at 1:25 PM

Code looks good. I was hoping to review in Master, but I can't figure out why I'm not seeing the change there.

Fixed

Details

Priority

Affects versions

Fix versions

Assignee

Reporter

Created August 2, 2016 at 3:05 PM
Updated April 17, 2018 at 8:32 AM
Resolved January 23, 2017 at 2:30 PM