Accessibility Bandage

cartoon face eating cheetos.

We’re trying to solve some accessibility issues in sites that already exist. It’s not much fun but some of the solutions might be useful to others. The goal is also to do it pretty fast as many of these sites aren’t really our responsibility but we’re trying to help people out who are on WordPress.

Same Name, Different URL

In this case we had an issue where some tags for the posts were the same name as some other links on the page. They didn’t go to the same place. That’s a bad thing for accessibility. Handily, our post tags were wrapped in a div with the class tags (.tags).

The following bit of js, selects all the a elements within the element with tags class (.tags) and adds a the # character to the tag title. Simple and easy compared to writing a custom tags function in php. I also like the ability to use querySelectorAll in combination with forEach.

let tags = document.querySelectorAll('.tags a')
tags.forEach(function(tag){
  tag.innerHTML = '#' + tag.innerHTML; //get original name and just add a #
})

See the Pen
cobe tags accessibility fix
by Tom (@twwoodward)
on CodePen.

Pattern

What you can see too in the codepen above is that I’ll often copy/paste the HTML from the WordPress site and experiment with it in codepen. It often simplifies things while providing a quick working environment.