Accessibility error in offcanvas element in Joomla site

Question

I have a problem with a validation error to http://www.tsiapos.gr/ (Joomla 3.9.10 - yootheme template0

https://wave.webaim.org/report#/https://tsiapos.gr/

which is related to empty link in "offcanvas"

<a href="#offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas=""></a>

I don't know where to find the code and how to fix it. Thank you.

Answer 1

That looks like your menu button which is only visible in responsive mode. If I increase my font size or run on mobile, then I see it.

There are two problems with the menu button. The first is that it doesn't have a label that a screen reader can announce. That's the error that WAVE is pointing out. You can fix that by adding an aria-label to your link.

<a href="#offcanvas" aria-label="menu"></a>

The second problem that WAVE didn't find is that the "state" of your menu (expanded or collapsed) also needs to be conveyed. You do that with aria-expanded. Set the value to "false" when the menu is closed and "true" when the menu is open.

<a href="#offcanvas" aria-label="menu" aria-expanded="false"></a>

And if you want to get picky, there's a third problem that you're using a link instead of a button. A link should be used for navigation, opening a new page, not for an "action". I'd recommend changing your menu to a <button>.

If you want to use an <a> then you should add role="button" and make sure the space key can be used to select the link. By default, links only allow the enter to select them but a button allows both space and enter.