The Challenge for Day 2 of the 30 Days of Accessibility Testing was:
Use a tool like WAVE to scan a web page for accessibility problems.
Issues found by WAVE
The tool found 4 types of errors on this page.
- Missing alternative text – Three images simply did not have any alternative text defined from them. Note that they didn’t even had an empty alt attribute. Empty alt is what we use when we want to tell a screen reader to ignore an image that does not convey any information.
- Spacer image missing alternative text – WAVE identified a specific image is only used as a visual spacer, and suggests fixing it with an empty alt.
- Document language missing – Each website needs to have a lang attribute defined in the html element. It is important for assistive technology (like screen reader) to know the language in order to analyze the information correctly. For example, a screen reader might pronounce a word in a different way if the site is in French or German.
- Empty headings – There are a couple of empty headings or in other words: a couple of <h5> elements that have no text as heading. This is a problem for people who use assistive technology to browse the headings on page.
It also found 13 places where the color contrast between the text and background was too low.
The report also lists several warnings. I’ll mention a few of them:
- Skipped heading level – If you check this page’s structure outline, you’ll see it has just a few heading at level 2, and a few headings at level 5. The different levels are supposed to reflect hierarchy of the headings. A heading with lower level than 2 should be heading level 3, and a level 4 is expected to be a heading nested under level 3, etc. Sometimes web developers use the heading that fits the visual size they want to see. But it’s not the way to do it. You can always change font size, and make a heading level 3 as small as the default for level 5. Don’t just choose the level by how it looks, choose what’s right to reflect the correct page structure.
- Redundant title text – We see that the page has standard links with text (e.g. “Education”). Browsers will display a tooltip when you hover above this link. I could be useful if it adds some instruction, but it’s redundant when it just repeats the link’s text.
Finally, I want to add one issue that the tool did not find. The title of the page is in Hebrew, although that is the English homepage for the website. Someone who depends on a screen reader, and does not have Hebrew speech engine installed, might not understand anything from that title. Maybe that person will think that switching to English didn’t work. I know it’s basic usability issue for any site, but as in many cases, it’s even worse usability experience for some users with disabilities.