You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Move the icon to an inner DOM element so that it can be hidden from screen readers using aria-hidden="true".
Wrap the inner text in a <span> and apply CSS to make it visible to screen readers only.
Remove the aria-label once the above changes are made, since the inner text will act as a more robust accessible name (see the First Rule of ARIA Use).
aria-hidden="true"
.<span>
and apply CSS to make it visible to screen readers only.aria-label
once the above changes are made, since the inner text will act as a more robust accessible name (see the First Rule of ARIA Use).Currently the buttons render like so:
Where an unrecognizable (to screen readers) custom font character is injected via the
:before
pseudo-class.What we really want is this:
For reference, see this nice section about icon buttons in the MDN's documentation for the
<button>
element.The text was updated successfully, but these errors were encountered: