Uploaded image for project: 'Nuxeo Web UI'
  1. Nuxeo Web UI
  2. WEBUI-911

In list view, make sort buttons announced by the screen reader

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Resolved
    • Priority: Critical
    • Resolution: Duplicate
    • Affects Version/s: 3.0.15
    • Fix Version/s: None
    • Component/s: A11y

      Description

      in web ui:
      go to the default search
      search for a keyword and get some results (e.g. worspace)
      switch to list view if necessary
      => sort buttons are not announced by the screen reader because missing a label
      expected: buttons should be announced by the screen reader

      ______________
      The button is missing an accessible name/label. As a result its functionality or purpose is not conveyed to screen reader users.

      Element Name: Unselected Sort buttons

      Location:
      In main region of the page, after
      Clicking “Search” icon in left nav. Enter a search term like “Test”. Select Search and observe that a page that comes up, i.e. Search results with “Table view”.

      Recommendation to fix
      RULE :
      The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

      HOW TO FIX:
      Fix this issue by using any of the following techniques:
      1. Use the innertext of the <button> or role="button" element

      <button>Apply now!</button>

      <button class="apply-btn"><span class="sr-text">Apply now!</span></button>

      2. Use a non-empty aria-label attribute on the <button> or role="button" element.

      <button class="apply-btn" aria-label="Apply now!"></button>

      <span role="button" class="apply-btn" aria-label="Apply Now!"></span>

      REFERENCE:
      Deque University: https://dequeuniversity.com/class/custom-widgets2/concepts/name
      W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-label

      BACKGROUND:
      Buttons must have discernible text that describes the button's function or action for screen reader and other assistive technology users.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                bchauvin Bertrand Chauvin
                Participants:
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: