Problem
- The ARIA design pattern for disclosure applies but was not followed.
- Redundant descriptions for screenreaders.
Suggestions
- Follow the ARIA design pattern for disclosure (show/hide)
- Remove aria-haspopup="true" from the parent div
<div class="m-flyout m-flyout--right is-open m-flyout--md" aria-haspopup="true">
- Give the img an empty alt attribute (alt="") so screenreaders will ignore it. There is text inside the button. This makes the img decorative. It doesn't need a description. The same applies for the content in the dropdown.
<img src="https://gravatar.com/avatar/66f865ee03bc019d2f06af6ec0c434ce?s=200" alt="avatar">
- Delete the hidden text for screenreaders. It's redundant. The visible text (username) is sufficient. The same applies for the content in the dropdown.
<span class="u-screen-reader-only">Gebruiker icoon</span>
- Delete the alt-attibrutes from the links. A link is not an image. It cannot have an alt-attribute.
<a href="https://www.antwerpen.be/nl/voorkeuren/notificaties" title="Notificaties" alt="Klik hier om uw notificaties te bekijken.">Notificaties<span> (123)</span></a>
Articles and demo
