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

Ensure custom controls are keyboard accessible

    XMLWordPrintable

    Details

    • 12 status:
      Resolved
    • Previous Issue Keys:
      A11YTEST-295

      Description

      [Partially Fixed] - 3/16/2018

      [Issue] "<<" element receive keyboard focus and announce its title which is "Expand/collapse tool navigation". However, it does not have visual keyboard focus.

      [User Impact]Without a clear visual indication, users operating the page visually with pure keyboard input may not be able to determine which element has focus.

      <button title="Expand/collapse tool navigation"class="Mrphs-toggleNav js-toggle-nav btn-link max " type="button" aria-pressed="false" >

      The left hand side navigation of the environment provides a series of links that can be used to navigate through pages of content. A control is provided at the top of the navigation that when activated allows the user to either expand or collapse the side navigation entirely. However, this control currently does not receive keyboard focus and therefore cannot be activated by a keyboard only user.

      <li class="Mrphs-toolsNav__menuitem Mrphs-collapseTools js-toggle-nav"><i class="fa fa-lg fa-angle-double-left"></i></li>

      [Expected Behaviour]All actionable elements should assign a visually prominent, non-color reliant visual indication of focus as part of an explicit ::focus rule. Ideally, this rule should use the

      { outline }

      property, as this property is hooked by assistive technologies and accessibility related configurations to provide enhanced visual indication of focus. Developers must ensure that all simulated controls implemented provide support for keyboard accessibility. As this control is created by placing event handlers on an

      <li> element, the element itself must be assigned <tabindex="0">

      in order to draw keyboard focus, as well as device-independent event handlers to allow keyboard only users to activate the control with the "Enter" key.

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                ottenhoff Sam Ottenhoff
                Reporter:
                jonespm Matthew Jones
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Git Source Code