Correct Aria Tags?

Question

I have a button with an icon that opens a mobile nav. I have on the button:

:aria-expanded="active" //toggled with JS
aria-controls="menu"
aria-label="Open menu"

The menu which includes the nav has:

 id="menu"
 :aria-hidden="!active"

There is also an X icon button which is placed inside the menu. It is used to close the menu; the button just has this on it:

aria-label="Close menu"

Have I correctly understood how to add aria tags? Am I missing anything? Should the X button also have aria-expanded and aria-controls even though it is inside the menu itself?

Answer 1

There are some issues in your menu.

Incorrect value in aria-expanded**

The aria-expanded attribute doesn't have an "active" value, only three types:

• false;
• true;
• undefined (default type).

To inform the assistive technologies when the menu is opened the value should be true.

aria label value

The value in aria-label should be informative like:

• Main navigation;
• Principal menu;
• etc.

Don't use "Open menu", the screen reader must be handling with this events by default.

The state "open", "closed" is inform with the attribute aria-expanded when applied.

Icon X

When the icon X is inside the button hamburguer you don't need put aria-expanded and aria-controls.

Just remember to change the value of aria-label in icon Close.

<button aria-label="Close">X</button>