A few months ago, I gave 5 tips to improve your site’s accessibility and I thought it would be a good time to practice what I preach. To begin, I ran a quick audit through Google Chrome’s own accessibility audit tool in the dev tools. Our score was pretty good - a solid 89 out of 100 - but, for me, there were some issues we could address to help users on our site even more.
Contrast Issues
Accessibility takes many forms, including things as simple as the typeface and colour of your site’s font. How your copy appears on your site needs to be easy to read with a good contrast. Whilst it may look good from a design point of view, a user with eyesight problems may have issues reading it; as shown in the screenshot below.
To improve this, we’ve worked with our designers to make the text as legible as possible.
SITE IMPROVEMENT TIP: Make sure your copy has a good colour contrast and is easy for everyone to read. Don’t make it too light or an illegible font.
Semantic Markup
Semantic Markup is a term used to describe how HTML tags are put together in order to convey meaning through their structure and not just their appearance. For example, heading tags on a page should always be in order of H1, H2, H3 etc in order to show the progression of headings throughout the document. Semantic markup can also be used by search engines to extract particular information out of pages like price or a review score.
The Semantic Markup on our pages aren’t as good as they could be. Our project spotlight areas are using header tags in the wrong order (H4 -> H2 -> H4). To help users, it’s best if these are in descending order. I would change all of these to H3 tags and style them accordingly.
SITE IMPROVEMENT TIP: Ensure your Semantic Markup is in good shape
Inaccessible Dropdown Menu
It’s important to think of all of the types of users that use your website; especially those that may have issues with fine motor skills (using the smaller muscles in their hands). Our site’s drop down menu could be difficult for less dexterous users. Some users can only navigate websites with their keyboards, instead of a mouse, so it’s helpful for your drop down to have keyboard shortcuts to help navigate it.
SITE IMPROVEMENT TIP: Offer a drop down menu with keyboard shortcuts enabled
Missing Alt Tags
Alt tags are a simple yet important thing to remember when adding images. They help users with screen readers understand what the image would have displayed, meaning no information is lost. Our own site has quite a few images without alt tags. To help fix this, we’re going to go through each node (and template) and write helpful alt tags. Whilst this task can be tedious, it helps screen reader users immensely.
SITE IMPROVEMENT TIP: Consider making alt tag fields a required field, so your content can’t go live without this vital piece of information for your users.
Missing Aria Expanded
Aria Expanded is an attribute that explains to a screen reader user the context behind a drop-down element. Currently, our mobile menu doesn’t have this attribute. To solve this issue, we can go into the template and set this attribute to false. Then, we can use JavaScript to toggle them on. Some Aria tags are included in Drupal 8, such as ‘aria-labelledby’, however ‘aria-expanded’ isn’t - so make sure you double check.
SITE IMPROVEMENT TIP: Think about how users see your site on mobile as well as on desktop.
Missing Jump to Main Content Link
Websites should have a ‘Jump to main content’ link at the top of the page so keyboard users can skip navigation easily. Our site currently doesn’t have one. This can be added to the page template with a bit of styling to make sure it doesn’t appear until it’s focused.
SITE IMPROVEMENT TIP: Create a ‘Jump to main content’ link to your menu.
If you address these issues on your own site, you’re taking considerable steps to improving accessibility for your users. This list also highlights that, even though Google’s own tools may think you’re offering a good user experience, carrying out your own rigorous tests are important as well.
