Horizontal Navigation Bar Page : Unclear functionality of tabs

XMLWordPrintable

    • Severity 3 - Minor

      Issue Summary

       The "Horizontal Navigation Bar Page" Macro is behaving as tabs with manual activation. These tabs are missing appropriate roles and attributes.

      Steps to Reproduce

      1. Edit the page, and add "Horizontal Navigation Bar Page" macro and update the page.
      2.  Listen that the elements are not identified as tab. 

      Actual Result

      The "Horizontal Navigation Bar Page" Macro is not programmatically determined as a tab. Also, the number of tabs is not programmatically determined. On activating the elements, the related content gets dynamically updated below and visually an underline appears on selected element to convey the state. Although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users.

      Expected Result

      Apply the following changes:

      • Provide the role="tablist" for the <ul> tag containing the elements that behaves as a tab.
      • Provide role="presentation" for <li> elements containing tabs.
      • Specify 'id' attribute for the container of visible text that determines the name of the tablist. Reference the value of the 'id' attribute correctly via 'aria-labelledby' attribute of tablist
      • Set the role="tab" for the <a> tags used for displaying tabs In addition, specify the ARIA attributes for tabs, such as “aria-controls” and “aria-selected”. (The value of the aria-selected attribute needs to change on the basis of currently active tab.)
      • Set aria-selected=”true” for the active tab.
      • Specify an 'id' attribute for the <div> tags used to display the content of respective tab. Reference the value of the 'id' attribute correctly via 'aria-controls' attribute of each tab.
      • Ensure that tabpanel should contain at least one focusable element, if it is not possible then provide tabindex="0" to tabpanel element to make focusable 

      A working example of accessible tab functionality can be found at: https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html

      Screenshot

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

            Assignee:
            Maksym Fedoryshyh
            Reporter:
            Sameer Shaikh (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: