Day 2 – Focusing on the Header

Header tags

Now that we have a good idea of the accessibility status of the overall site, we’ve decided to focus on making the header.php file in the theme accessible. This might be more than we can tackle in one day, but we’re ready to dive in! I’m live-writing this article, so we’ll see what happens!

First, I’m running a test on WAVE¬†of the homepage, and looking for errors in the header. The report came out looking like this (right). There are 12 errors on this page overall, but we’re not done editing the body of this page yet. The only error corresponding to the header is for our mobile menu link. Since it contains an icon but no text, it’s not accessible to screen-reading software. We’ll fix this by adding a copy of this file to the child theme, and adding text specifically for screen readers to follow.

In order to hide the text in this link from normal users, but to ensure that it remains in it’s correct order within the code so that it’s screen-reader accessible, we used this CSS to simply move it off of the visible screen:

.sr-only { position:absolute; left: -10000px; }

The way this ensures accessibility while keeping the display we want is by moving it out of the viewport. Meanwhile, the text in our div says “View the Menu”. This enables screen-readers to alert the user that there’s a like that allows a menu to display, without corrupting the page design.

We didn’t have to modify any more than that. The theme does a pretty good job including most accessibility features. One main accessibility feature of the header is always the skip link. This tells screen reading software where the main content of the page begins. This prevents users from having to listen to the header and menu being read over and over again.

Wave report of home page showing 12 errors

Time Lapse Video of Our Modifications to the Header