Header: Interactive elements have incorrect role

XMLWordPrintable

    • 10.03
    • Severity 3 - Minor

      Issue Summary

      The "Help", "Administration", and "User profile" interactive elements have incorrect role as link instead of a button.

      Steps to Reproduce

      1. Open the "Home" page.
      2. Navigate to the header section.
      3. Navigate onto the mentioned instances and inspect their code.
      4. Observe that the elements have an incorrect interactive role.

      Screenshot

      Actual Result

      The "Help", "Administration", and "User profile" interactive elements were incorrectly defined as a link instead of a button. As a result, screen reader users may confuse of mislead the functionality associated with the mentioned elements. 

      Expected Result

      Interactive element should have an appropriate and correct interactive role. In this scenario, it would be semantically correct to code the mentioned interactive elementts as buttons. This can be achieve by replacing the <a> element with <button> element. If it  is not feasible, specify role="button" attribute on the < href="..."> element.

      Code Snippet

      <button aria-label="Help" aria-haspopup="true" aria-expanded="false"...>Help</button> 

      Workaround

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

      Environment

      MacBook Pro (16-inch, 2021)
      macOs SEQUOIA 15.2
      Chrome - Version 132.0.6834.84 (Official Build) (64-bit)
      Firefox- Version 128.6.0esr (64-bit)
      Safari- Version - 18.2 (206220.1.16.11.8)
      JAWS- Version 2023
      NVDA- Version 2023.2
      Voiceover - Version Latest

              Assignee:
              Serhii Panchenko
              Reporter:
              Malleswara Rao Konthala
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated:
                Resolved: