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

Ensure color is not used as the sole method of indicating selection

    Details

    • 19 status:
      Verified
    • 12 status:
      Please Merge
    • Previous Issue Keys:
      A11YTEST-294
    • Test Plan:
      Hide

      For testing High Contrast mode:

      1. In Windows, Settings > Ease of Access > High Contrast.
      2. Choose a theme, e.g. High Contrast 1.
      3. In Firefox or IE, access a Sakai site.
      4. Check the tool menu and see if you can tell the difference between the currently active tool and the others in the list.
      5. Select another tool to make it active and check if you can tell the active vs. inactive tools.

      For checking screen reader role:

      1. Access a Sakai site.
      2. Right-click on the currently active tool in the tool menu and inspect it.  Make sure that aria-current="page" is in the <a href...> part of the link.
      3. Select another tool to make it active and check for the same aria-current role.
      Show
      For testing High Contrast mode: In Windows, Settings > Ease of Access > High Contrast. Choose a theme, e.g. High Contrast 1. In Firefox or IE, access a Sakai site. Check the tool menu and see if you can tell the difference between the currently active tool and the others in the list. Select another tool to make it active and check if you can tell the active vs. inactive tools. For checking screen reader role: Access a Sakai site. Right-click on the currently active tool in the tool menu and inspect it.  Make sure that  aria-current="page" is in the <a href...> part of the link. Select another tool to make it active and check for the same aria-current role.

      Description

      [New] - 3/18/2018

      [Issue]

      Left navigation links lack the status of the active or current link. Screen reader announces name with the role of the link only and there is no indication of which link is activated. Additionally, when high contrast mode on or when there is no color on the page or when CSS disabled, assistive technologies users not able to differentiate – See SAK-40729

      [User Impact]

      Screen reader users not able to identify that which link is activated. However, there is an alternative solution to this is available that page title is there but still screen reader users and low vision users do not have the same experience as visual users have it.

      [Expected behavior]

      Developers need to make sure that they provide state of the link which is activated currently so that screen reader users know about the state of the link. Additionally, developers /designers need to make sure that they provide a proper style guide for an activated page which can be differentiated in high contrast mode too.Developers can set "aria-current" properties which help screen readers users to identify active link.

      [Reference link]

      https://www.w3.org/TR/wai-aria-1.1/#aria-current

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  kedwar1 Kendra Edwards
                  Reporter:
                  jonespm Matthew Jones
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  6 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code