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

Ensure fields indicate attached menus - give the sites nav chevron a label

    Details

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

      Description

      [New] - 3/13/2018

      [Issue]

      Standalone menus have two functionalities. When screen reader users navigate to it using a keyboard, on the first TAB screen reader announce link name such as "Level Access Test Site link", also if users activate the link it opens a new page and on the second TAB down arrow (separator) receive keyboard focus and screen reader announce nothing, through which users can open a menu.Standalones menus are attached to the list items in the main banner but this is not rendered to assistive technologies.This is not the standard behavior of menu and also, it does not follow the standard keyboard paradigm for a menu.

      [User Impact]

      Here, screen reader users never get to know that there are menu items and how they can access it. Since this does not follow standard keyboard paradigm, screen reader users get confused when they follow menu keyboard paradigm and they are not able to access menuitem.The name of the element may not be sufficient for users who can not see to determine that an attached menu is available.

      [Code]

      HTML:

      <li class="Mrphs-sitesNav__menuitem dropdown-is-visible">    <a class="link-container" href="http://qa03-sakai.marist.edu:8080/portal/site/mercury" title="mercury site">        <span>mercury site</span>    </a>    <a class="Mrphs-sitesNav__dropdown is-clicked" href="#" data-site-id="mercury" role="separator"></a>    <ul class="Mrphs-sitesNav__submenu is-visible" role="menu">       <li class="Mrphs-sitesNav__submenuitem"><a class="Mrphs-sitesNav__submenuitem-link" role="menuitem" href="http://qa03-sakai.marist.edu:8080/portal/site/mercury/page/mercury-100" title="Overview" tabindex="-1">  <span class="Mrphs-sitesNav__submenuitem-icon"><span class="toolMenuIcon icon-sakai--sakai-iframe-site"></span></span>  <span class="Mrphs-sitesNav__submenuitem-title">Overview</span></a></li>

      ...

      [Expected behavior]

      Scenario 1: Developers should:

      • use the aria-haspopup attribute (OR include a textual description that indicates that a menu is attached),
      • provide the toggle link a textual content or a aria-label,
      • remove the separator role.
      • need to inform users that how they can navigate to sub-item using keyboard. This is require since it does not follow standard keyboard paradigm of menu.

      NATIVE MENU SYNTAX

      • Heading with Level Start
      • Native Button with Expandable State (via aria-expanded)
      • Heading with Level End-Expandable Named Region Start (via role="region" plus aria-labelledby or aria-label)
      • List of Native Links
      • Expandable Named Region End

      Scenario 2:

      • Alternatively, need to use proper role of menu, menuitem, menubar for proper execution of menu. (Here, developers might be remove dual functionality where a link opens a new page).

      SIMPLE ARIA MENU SYNTAX

      Button Role with Attached Menu (via aria-haspopup="true" or aria-haspopup="menu")
      Dynamically Rendered Menu Start (via role="menu" or role="menubar")
      List of Menu Items (via role="menuitem", role="menuitemcheckbox", or role="menuitemradio")
      Dynamically Rendered Menu End

      [Reference links]

      Developers can refer following links for menu:
      https://www.levelaccess.com/challenges-mega-menus-standard-menus-make-accessible/
      http://whatsock.com/training/matrices/#menu
      https://www.w3.org/TR/wai-aria-1.1/#menu
      https://www.w3.org/WAI/tutorials/menus/

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code