Accessible Navbars in WordPress
Our mission this year is to improve accessibility across the design and development of our new projects. Here’s how we have built on WordPress’ default behaviour to provide a better experience for screen readers.
As you may have read, we’re dedicated to improving the experience of the web for users who require a little extra support to get their jobs done. We wrote about this more in a previous post. Even if it means a little extra work for us, it can mean more people can have a great experience using the web. It can also increase conversion opportunities for our customers.
WordPress Navigation
One of our most popular platforms is WordPress. We use WordPress a huge amount, and have our own in-house theme and cli tool to speed up development. But on a recent project we noticed that, even though Wordperss comes out of the box with some excellent Accessibility features, there’s a feature that could be potentially negative to some visitors. I’m talking about navigation tooltips:
This tooltip appears when you hover over any navigation item. This is a great feature for accessibility. Every anchor tag should contain a title attribute so that screen readers can give feedback to the user about where this link is going. The markup for this is:
<a href="somelink" title="my great article">Read this article</a>Where this falls down is that WordPress by default pulls in the Navigation label for this. So the text inside the tag is duplicated with the title. Not only is this redundant, it’s annoying. Screen readers (if they read the “Title” attribute) will read out the same thing twice. Annoying to say the least.
Fixing navigation tooltips
So developer Chris wrote this code to filter the nav link attributes and remove the title attribute – but only if it’s the same text as the item content.
if (!function_exists('indigotree_remove_title_attr_from_nav_menu')) {
/**
* Remove title="" attribute from WordPress menus when
* the text is the same as the title="" value.
*
* @param array $atts
* @param WP_Post $item
* @param stdClass $args
* @param int $depth
* @return array
*/function indigotree_remove_title_attr_from_nav_menu($atts, $item, $args, $depth)
{
if ($item->title == $atts['title']) {
unset($atts['title']);
}
return $atts;
}
add_filter('nav_menu_link_attributes', 'indigotree_remove_title_attr_from_nav_menu', 10, 4);
}This is just a small thing, there are others we need to work on too, but we’re continuing to improve, which I think is the important thing.
You can use / edit this code as you like, we won’t stop you!
