Create a New Page - Blank Page: Button is missing both a role and a name

XMLWordPrintable

    • Severity 3 - Minor

      Issue Summary

      The button is missing both a role and an accessible name/label.
      Element:
      1) "invite people to edit" button.

      Location:
      This is present next to "Draft".

      Issue id: 725313

      Expected Results

      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 ONE of the step 1 AND using an aria-label attribute on the element.
      1.a. Use a native HTML <button> element.

      <button>Apply now!</button>

      1.b. Add role="button" to the custom button container.

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

      2. Add an aria-label attribute on the element.

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

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

      REFERENCE: 
      W3C HTML5 Recommendation: https://www.w3.org/TR/html5/sec-forms.html#the-button-element
      Deque University: https://dequeuniversity.com/class/custom-widgets2/examples/button
      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: 
      Every user interface control must have a role to convey what type of control it is for screen reader and other assistive technology users. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) using ARIA as well as expected keyboard interactions.
      Buttons must have discernible text that describes the button's function or action for screen reader and other assistive technology users.

      Actual Results

      Issue 725313: https://axeauditor.dequecloud.com/api/v1/file/abd726d0-4ebc-11ec-af91-3351b50d9dd6 

      Create new page - blank page: https://axeauditor.dequecloud.com/api/v1/testrun-unit-screenshot/8bf0f41c-50c5-11ec-a77b-a747481f46ce 

      Workaround

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

            Assignee:
            Kostiantyn Smolenskyi (Inactive)
            Reporter:
            ssuryavanshi (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: