Gantry Adding ARIA Labels

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.

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.

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.

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

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….


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.