Blender Website Accessibility Audit

For this weeks assignment I have reviewed the Blender website with regards to the Web Content Accessibility Guidelines. I used the Chrome extension WAVE.

The results of the WAVE test are not exactly outstanding. At first glance there are 22 errors and a number of alerts and notes thrown in to boot.

Screenshot of Blender webite frontpage with WCAG errors overlaid

The errors all have to do with missing metadata: all of the image on the page are missing alt text, and there are a few links which do nothing.

Screenshot of Blender website listing detailed accessibility errors

The alerts are also of concern, since they point to a number of structural flaws in the page. The most notable alert is that the page doesn’t have an h1 tag. Given that the WCAG  suggest a strict heirarchy of information, the fact that the page does not have a ‘top-level’ of information is a cause for concern. The second alert notes that there are two elements which seem like headings (the “About” and “Get Involved” sections), but they are not tagged as headings. These elements are definitely headings of their respective sections, and should be tagged as such. The final alerts note a number of redundant links and text elements, where the same links or metadata are repeated twice or more. This creates unnecessary repetition for screen readers navigating the page.

Screenshot of Blender website with alerts overlaid

Finally, the additional notes on structure of the page point to further areas of potential difficulty for screen readers. WAVE points out three heading level 3s next to each other, although from the look of the page that structure makes sense since they are similarly-important sections. The system also points out that ordered lists should be used in cases where order of information in the list matters.

Screenshot of Blender website with structural notes

The real indictment of the website, however, happened when I actually tried to use a screen reader on the site, Windows 10’s built in Narrator. In comparison to the Microsoft Help page, the blender page is a lot more difficult to navigate. Without clearly defined ‘Landmarks’ it is difficult to navigate to the particular section that you would like, whereas on the Microsoft page clearly defined sections allow quicker and clearer navigation across the whole page. In addition, the lack of link descriptions becomes more apparent, when the narrator reads out “Link” with no more information. Finally, on the Microsoft help page is it relatively easy to navigate across the body of the page using the header tags (h1, h3, etc), but on the Blender site the only three header tags are arbitrarily in the middle of the page, so there is no way to use the headings scan function to quickly scan the content. Here is a screen capture of me trying to use various scan functions of the Windows 10 Narrator on the Blender website, occasionally switching to the Microsoft Help page for comparison.

2018-10-16 10-48-21

Overall, navigation on the Blender page with a screen reader is possible, in that you could search through every single item to find the one you want, or listen to the full url description for every link. However, the Microsoft Help page, although not perfect, makes it clear how important thoughtful structure and WCAG guidelines are. With clear sections, links that have helpful names, and without redundancies in title and link names, it is a lot less tedious to navigate the Microsoft page than the Blender page.