This all started with running an accessibility test on a website I run and discovered I could do more to improve the site’s ADA. I used the following tool to start the process.

https://wave.webaim.org/report#/https://www.scdit.com/#null

This showed me my Drop-Down or Flyout menu in Gantry Hydrogen template didn’t allow for tabbing and also didn’t have a ARIA-Label. I thought it would be good to add them, but couldn’t find where to put them. I did a search and found this article.

https://github.com/gantry/gantry5/issues/1888

I could find the file “menu.html.twig“, but eventually found it here at this path “site root/media/gantry5/engines/nucleus/particles/“.

Here is another article discussing this topic in the Joomla core.

https://pbwebdev.com/blog/adding-wai-aria-landmarks-to-joomla

Here is an article for adding ARIA Label to a dropdown menu item.

https://www.w3.org/WAI/tutorials/menus/flyout/

In the end I was able to accomplish what I wanted by doing this:

  • Find and open the “menu.html.twig” file
  • Around line 44 add the following:
    {% set arialabel = ‘ aria-label=”‘ ~ item.link_title|default(item.title)|e ~ ‘”‘ %}
  • Around line 81 add the following to start of this line:
    <li {{ arialabel }} class=”g-menu-item g-menu-item-type-{{ item.type }}

I hope this helps someone else out there….