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

Accessibility: Skip Navigation links aren't visible to allow access to sighted keyboard only users

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: CLOSED
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 2.7.2, 2.8.1
    • Fix Version/s: 2.9.0
    • Component/s: Accessibility, Portal
    • Labels:
      None
    • Environment:
      Sighted Keyboard only users
    • 2.9 Status:
      Resolved

      Description

      The three skipNav links (Jump to content, Jump to tools list, and Jump to worksite list (located at the top of the portal body)) do not become visible when they receive keyboard focus.

      The skipNav links work great for screen-reader users. However they aren't very usable to another important class of keyboard only users – those who can see and don't use screen-readers. This means that they can't tell what the links are for and are left to wonder why tabbing into the window doesn't seem to do anything.

      As a compromise between keeping the visual design free of the skip navigation links, and making them accessible to keyboard only users, CSS can be configured to hide the skip navigation links until they receive focus. An example of this technique can be found on the ATAC's Web site: http://iuadapts.indiana.edu/ (visit the page and then press the tab key until the "Skip Main Navigation" link text appears). Once a keyboard only user starts tabbing through the page, the skip navigation link will receive focus and CSS can make it become visible. An example of how to code CSS to do this in Sakai CLE would be to replace the empty #skipNav rule in portal.css with:

      #skipNav a.skip:focus, #skipNav a.skip:active

      { height:auto; width: auto; outline: black dotted thin; position: static !important; margin-left: 10px; font-size: 1.5em; }

        Gliffy Diagrams

          Zeplin

            Attachments

              Issue Links

                Activity

                  People

                  Assignee:
                  brichwin Brian Richwine
                  Reporter:
                  brichwin Brian Richwine
                  Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                    Dates

                    Created:
                    Updated:
                    Resolved:

                      Git Integration