Accessability and Testing

Our final homework of the course was to investigate accessibility on a page we use using the Wave browser extension tool. I am using this session to improve the accessibility of my portfolio website. Here are some of the problems and solutions I found using Wave.

1. Missing alternative text / or too much!

First up was missing alternative text for images, which is both useful for providing a description for a screen-reader, but also in case the image doesn’t load. One adding one I then received ‘Suspicious alternative text’ as it was not providing enough detail.

At the other end, I have an alt attribute description that is too long. Wave recommends a maximum of 100 characters to communicate the images content and function and I have now altered this.

2. Incorrect use of headers on landing page

This is a big ooops as its probably one of the most basic things you learn when first writing HTML. Currently the page order is h1 → h2 → h1 → h4s. Headers should be in a logical order of importance for screen readers. If not a sub-header of the original heading it should assessed whether a header tag should be used.

I think this probably happened from breaking this page into two React components, hence a repeated h1, and then it will be something I meant to refactor correctly once I had got to grips with the styling of React Bootstrap… something that is still yet to happen.

The smallest change would be to change the About Me to a h3 tag. I feel this does improve the flow but I also question whether the first h1/h2 tags should actually be headers on the page, given they now contain overlapping information to the title.

3. Page description errors

These missing errors live in the public html file of the site. First up: missing title description. While the tag was there it had no content. It now explains the overall contents of the site, as being my software development / testing portfolio and blog.

The second was not declaring the language of the page in the html tag. It would not have crossed my mind to check this as the html starter file is automatically generated, but this has been resolved so that the langauge is set to English.

4. Contrast errors

Finally, there are several contrast errors on the page. Contrast is necessary for everyone to interact with the page well. It can be possible to alter either the text / background colour to provide enough context, and/or increase the font size: 14px Bold or 18px.

There are still issue remaining, and I plan to address them when I give the blog a makeover. What I have really enjoyed about this exercise is the opportunity to dive into the WCAG and WebAIM guides with a focus. It is such a vast topic to approach and therein quite daunting but I think focussed sessions like this are a very good way to add to my knowledge without being overwhelmed with the amount of information available.