[#28688] - Menu items with image, and title turned off, are empty links/inaccessible
- Closed
- 15 Apr 2020
- Medium
- Build: staging
- # 28688
What needs to be fixed
When you have a menu item with an image, and you choose to not display the title, the link is inaccessible for screen readers as it is "empty".
Why this should be fixed
Bare minimum accessibility standards.
How would you fix it
One of two ways:
- Quick and easy - add the title of the menu item to the link as an aria-label, or to the image as alt text. Probably should let the user know this will happen if the title is set not to display, so they don't put something rude in the title text or something :)
- A little more involved - add a field to menu items for the image alt text to allow users to explicitly define this.
Side Effects expected
We help site builders be a little more accessible by default. :)
I'm happy to contribute the first fix if that works better for the project - it's just two lines of code. The second one is a bit outside of my comfort zone as it stands.
joomla-cms-bot
- | Labels |
Added:
?
|
||
The way I've done it is with an html module override of default_component.php and default_url.php by modifying the block with the menu text params like so:
if ($item->params->get('menu_text', 1))
{
$linktype .= '<span class="image-title">' . $item->title . '</span>';
} else {
$attributes['aria-label'] = $item->title;
}
Just not sure that's the best solution for the CMS as a whole. It works for me and it's accessible.
I just checked and I didn't do anything special at all. The menu item name is already being used as the alt on the image
Hmm, wonder why it's not on my site. I'll double check.
You're right. I am doing an additional override to accept SVGs, which made it not happen. Oops. -facepalm-
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-04-15 09:11:22 |
| Closed_By | ⇒ | crystalenka |
I just double checked to make sure it wasn't a template override and its not. I also double checked that the screen reader announces it correctly and it does
happens to the best of us
I have done this on one of my sites. Checking now to see how I did it