Menu accessibility issues

[mohammad-suliman]

Problem description:

The menu has several accessibility issues:

• The menu content seems to be available for a screen reader in all the cases
• Not sure if this is due to the content being hidden visually but not from screen reader
• or because that the menu opens automatically once it receives focus, although this is a bit unlikely
• The button for opening the menu has no label and it doesn't seem to be in the tab order
• Within the menu, there is an image without alt text, which has been covered in a previous issue
• The screen reader reports some strange text which comes before the empty link which opens the menu from a DOM perspective. The text is the number "0"

Solution:

• Make sure to hide the menu content when it's visually hidden maybe by using aria-hidden
• Provide a label for the button which opens the menu maybe by using aria-label
• Make sure to include the link for opening the menu in the tab order by maybe using tabindex=0
• Handle images as covered by previous issue
• Hide unnecessary content from a screen reader which seems to be also visually hidden (the "0" in our case) by maybe using aria-hidden. See the link above
• Make sure that the menu can be navigated using the keyboard:
  • Opening the menu should be possible using the keyboard by including the open button in the tab order as mentioned above. Also the button should respond properly to keyboard clicks
  • The menu also should be closable using the keyboard, preferably also with the Escape key
• make sure also to apply the same considerations to the mobile view of the site