2017-03-24
To understand web accessibility better, I decided to audit my own blog. The blog is small (at time of writing four pages including the main page!), but I am interested to see what kinds of issues come up even before adding complicated features and substantial content to a site.
I decided on the following steps:
On the main page of my blog, the pa11y command line tool found: 6 Errors 1 Warnings 8 Notices
The notices were things like:
Notice: Check that the title element describes the document.
WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2
html > head > title
<title>Nasreen's blog</title>
None of them require changes - they are things that it is easy for a human reading the notices to check
but impossible for a computer program to know. The tool is designed to give feedback as a guide for improvements.
Including notices like this means that is can direct attention to possible issues beyond
the scope of definitive automated testing, which could be very helpful.
The warning was:
Warning: The heading structure is not logically nested. This h4 element should be an h2 to be properly nested.
WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141
#body > div > div > div > div > h4
<h4>Posts :</h4>
This should be changed - the posts subheading should be a h2 element. There is not much content on this page, if there was more content illogical document structure could make navigation very frustrating for screen readers to use.
There were two kinds of errors. One requires a lang attribute to be added to the html tag.
The others indicated empty links, like this:
Error: Anchor element found with a valid href attribute, but no link content has been supplied.
WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
#body > div > div > div > div > a
<a href="/mutable-default-parameters/"> </a>
It seems like these are caused by ::after pseudo-elements being automatically added by flask. This is something I want to learn more about, as there shouldn't be empty links.
The webaim tool gives information about contrast errors. It also gives other kinds of errors, which verified the feedback from the pa11y tool.
The contrast between the text and the background is very low; the body text color is too light to pass the contrast test (the larger text passed because less contrast is required for larger text to be clear). The tool also allowed me to find an appropriate color; it is currently #808080, #515151 is a similar shade which gives better contrast.
I navigated through my blog using tab, alt&tab (to go back), and enter (to select). This was straightforward because there are only a few pages.
I used an addon for fire called fangs
The output it gave for the main pages is:
Page has two headings and seven links Nasreens's blog dash Internet Explorer Heading level one A blog by Nasreen Heading level four Posts colon List of two items bullet Link Three weeks at RC dash some reflections bullet LInk Mutable Default Parameters in Python Lists end Link Link Link Link Link
This highlights the need to remove the empty links from the site.
Even though my site is very small, I still found improvements to make. This really highlights to me how easy it is to overlook web accessibility, either through lack of knowledge or planning. I think to overcome this, it's important to keep finding out more and sharing knowledge.
The tools I used were all informative and easy to use.
Improvements to make to my site: