Follow the ARIA design pattern for disclosure (show/hide) for the UserMenu component

[Veyfeyken]

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

• ARIA design pattern for Disclosure (Show/Hide)
• Example of disclosure