Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-31547

Ensure screen reader specific content is rendered off-screen rather than hidden or not displayed

    XMLWordPrintable

    Details

      Description

      The Sakai Project or Component this issue was associated with is: Announcements
      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/e72d72d4-f582-4dce-8261-6b923060787c/tool/24bf98be-5fe0-4b16-aca7-0f464c7ba312#A0b648a8b01ffe1b7e431525edf50c7b-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.

        Gliffy Diagrams

          Zeplin

            Attachments

              Activity

                People

                Assignee:
                mclare Matt Clare
                Reporter:
                mclare Matt Clare
                Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved:

                    Git Integration