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

Make collapse / expand metadata layout icon name and state announced by screen reader

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 3.0.15
    • Fix Version/s: 3.0.17
    • Component/s: A11y

      Description

      in web ui:
      browse a document
      => the icon that is used to collapse / expand the metadata layout does not convey its name or state to the screen reader, it is missing a label and a state property
      expected: name and state 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:i (information icon) control

      NVDA is not narrating Name of the information icon button present in the page
      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.

      ______________________________
      The expand/collapse state of a toggle-type element is missing or is used incorrectly.

      Element Name:i (information icon) control

      NVDA is not narrating state as Expanded Collapsed for the information icon button present in the page
      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 the aria-expanded attribute on the actionable toggle element (e.g. the <button> element) with a value of "true" (when the section is expanded) or "false" (when the section is collapsed).

      <h3><button aria-expanded="true">When will I receive my refund?</button></h3>
      <div class="faq-expanded">You should receive your refund within 5 business days....</div>

      REFERENCE:
      W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded

      BACKGROUND:
      The aria-expanded attribute is placed on the toggle element (not the content that is hidden/shown).

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week, 1 day
                  1w 1d