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

Avoid the sole use of device-dependent event handlers

    Details

    • Previous Issue Keys:
      A11YTEST-262
    • Test Plan:
      1. Log in as a registered or guest user.
      2. In Home, go to Profile.
      3. Go to Privacy tab.
      4. Using a screen reader, ensure you can access the i button and read the tooltip.

      Description

      [New] - 3/18/2018

      [Issue]

      "i" which open a tooltip is not accessible by keyboard. It is accessible only by mouse users.This is due to mouse event handler. This "i" receives keyboard focus but it cannot be activated by the keyboard.Additionally, it lacks proper link text and the proper role of the tooltip, and as a result, screen reader users not able to identify the content.

      [User Impact]This tooltip is accessible by mouse users only, other assistive technologies users not able to use it at all.

      [Code]

      <a id="id1b" class="sakai-wicket-iconwithtooltip" href="#id1a" rel="#id1a" title="" style="">
        <img src="/library/image/silk/information.png">
      </a>

      [Expected behavior]

      Developers must ensure that "i" has proper role, name and it is accessible by all types of users.here, developers need to make sure when they use mouse event handler corresponding keyboard event handler must present.Developers need to use the role of the tooltip. And it needs to reference through "aria-describedby" before or at the time tooltip is displayed.

      [Reference links]

      https://www.w3.org/TR/wai-aria-1.1/#tooltip
      http://whatsock.com/tsg/Coding%20Arena/Tooltips/Tooltip%20(Internal%20Content)/demo.htm#

        Gliffy Diagrams

          Attachments

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Git Source Code