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.

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 }}

DO NOT USE THE ABOVE METHOD:
This method got completely erased with a Gantry update. After playing around I discovered Gantry makes it really easy. See the steps below

  • In Gantry click on Menu at the top, and then click on the gear in the upper right of the menu item. You have to have your cursor over the menu item to see the gear.
  • Then in the “List Tag Attributes” section type in “aria-label” on the left side and then what it is you want the link to indicate it is for on the right side. You can have spaces in the tag.
  • It will end up looking like this:

I hope this helps someone else out there….

0 Comments

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.