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

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

    XMLWordPrintable

    Details

    • 11 status:
      Resolved
    • Test Plan:
      Hide

      The scope's pretty big, but a plan would include verifying in the affected areas:
      No previously hidden text has been made visible to anyone's detriment (more text might be harmless in some places). A web browser is all that's needed.
      Previous instructions that were hidden with display:none can now be read by assistive devices. This can be confirmed (in order of preference) with:
      JAWS Screen Reader http://www.freedomscientific.com/Products/Blindness/JAWS
      Free alternatives like Chromvox or NVDA http://www.nvaccess.org
      Screenreader simulated text such as FANGS provides https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/

      Show
      The scope's pretty big, but a plan would include verifying in the affected areas: No previously hidden text has been made visible to anyone's detriment (more text might be harmless in some places). A web browser is all that's needed. Previous instructions that were hidden with display:none can now be read by assistive devices. This can be confirmed (in order of preference) with: JAWS Screen Reader http://www.freedomscientific.com/Products/Blindness/JAWS Free alternatives like Chromvox or NVDA http://www.nvaccess.org Screenreader simulated text such as FANGS provides https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/

      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.

      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.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  jonespm Matthew Jones
                  Reporter:
                  mclare Matt Clare
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  6 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code