A11Y | The button on the top row header is hidden to visual users but not screen reader users.

[hilcurtis]

ID
1847345116

Violation
Ensure content that is intended to be hidden from all users is not rendered by assistive technology

Module Name
03a Header Menu - Top Row

Description
[Issue]
The button on the top row header is hidden to visual users but not screen reader users.

[User Impact]
When the content that is meant to be hidden to all users is exposed to screen reader users, this may cause users to read incorrect information or even activate links that are off screen.

[Code Reference]
<button class="esri-header-inline-title-control" id="esri-header-inline-title-control" tabindex="-1" aria-expanded="false" aria-controls="esri-header-inline-title-content">[]</button>

Note
[Recommendation]
For all content that is visually hidden and meant to be hidden to all users, hide this content with CSS display: none.

[Compliant Code Example]

<div style="display:none;"> content not displayed by browsers and hides keyboard focus for any controls.
</div>

<div style="visibility:hidden;"> content not displayed by browsers but
whitespace is kept and hides keyboard focus for any controls.</div>

<div aria-hidden="true">content not rendered by assistive technologies
that support the ARIA specification but focus, is kept for keyboard, ensure to remove focus for any controls if this is used to hide from keyboard users too.</div>