Peter Surowski, the Curriculum Director for WP Code Camp, will be speaking at WordCamp Buffalo on Saturday, May 6, 2023. His talk, titled, “Fixing Stubborn Accessibility Problems With JavaScript,” will show how to use a little bit of code to fix some problems that most plugins built for WordPress won’t fix.
If you’re reading this post at WordCamp Buffalo, follow these instructions along with Peter to fix the accessibility problems on this page.
1. Open Google Chrome’s dev tools and run a Lighthouse test on this page for accessibility.
2. Not bad, but not perfect. Did you see the problem in Lighthouse that said, “Links do not have a discernible name?” Notice that the three social media images below are listed in that box. These are problems because screen readers don’t know what to do with them.
3. Turn on your screen reader. Hit tab until you see a blue box around one of the social media icons. Notice that it says only, “Link.” How is a visually impaired person supposed to tell what those links do? We need to add aria labels to the HTML tags. But most page builders in WordPress won’t let you do that. So let’s use JavaScript.
4. Open the inspector, click on the “Console” tab, and paste the following code in the space at the bottom and hit enter:
let adaSelected1 = document.querySelectorAll('#testlink1');
adaSelected1.forEach(function(el) {
el.ariaLabel = "Instagram logo";
});
let adaSelected2 = document.querySelectorAll('#testlink2');
adaSelected2.forEach(function(el) {
el.ariaLabel = "Facebook logo";
});
let adaSelected3 = document.querySelectorAll('#testlink3');
adaSelected3.forEach(function(el) {
el.ariaLabel = "Instagram logo";
});
Now look at the HTML. Do you see how now the tags have aria labels? The code added this? But unfortunately, it’s not permanent. The console is only good for testing code, but that doesn’t add it to your website. So, here’s how you add it permanently.
5. You can’t follow along with this part, but you’ll log into your own website. Go to the page you’re working on. Create a code block at the bottom of the page and paste your code into the block. Hit publish, and now your site will load the code, and it will make the same changes that it did when it was in your console!
6. Let’s go back to Lighthouse and fix one more problem. Do you see how it says that one or more elements have tabindex properties greater than 0? This makes it difficult for people who use screen readers to navigate the page. So let’s set them all to 0. Paste the following code at the bottom of your code block:
const elsWithTabIndex = document.querySelectorAll('[tabindex]');
elsWithTabIndex.forEach(function(el) {
el.tabIndex = 0;
});
7. Save an publish. Notice that the same element now has tabindex = 0? You solved it!
8. Here are a few details you’ll need to know about the code above. In the code that deals with the aria labels, you need to change some names in those snippets. Let’s take the first one for example. You will need to find the ID or class name of the element you need to change in your inspector by looking at the HTML code. It will not be “#testlink1.” If you find an ID, simply replace “testlink1” with whatever you find. If you find a class name, replace the “#” with a dot, and then replace “testlink1” with the class name you found. Also, if you have more than three items that need an aria label, you’ll need to copy one of the code blocks and paste it at the bottom as many times as needed.
9. And that’s it! You’ve successfully used code snippets to solve some common accessibility problems that are tough or impossible to fix through the WordPress interface. Give yourself a high five!