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

Ensure Sites dialog fields indicate attached menus

    Details

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

      Description

      [New] - 3/13/2018

      [Issue]

      All menus inside "Sites" dialog have two functionalities.When screen reader users navigate to it using a keyboard, on the first TAB "star" receive focus and announces "Remove from favorites"; on the second TAB screen reader announce link name such as "Gradebook test again link", also if users activate the link it opens a new page and; on the third TAB down arrow (separator) receive keyboard focus and screen reader announce, through which users can open a menu.Menus are attached to the list items in the top 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.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]

      Developers should:

      • "favorites" icon needs to have the unique alternative name since there are multiple icons and all have the same name. An accessible title such as "remove Gradebook test again from favorites".
      • 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.
      • 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)

      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/

      [Compliant code]

      HTML:

      <a title="Remove mercury site from favorites"class="site-favorite-btn" data-site-id="mercury" href="javascript:void(0);" >
        <i class="site-favorite-icon site-favorite"></i>
      </a>
      .......
      <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"     aria-label="mercury site - open attached menu"    aria-haspopup="true">    </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>
      

      ...

        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