In the previous post, I performed the accessibility audit of the homepage where a number of issues were identified. The end-goal is to make the site Level AA accessible.
In this part, we will try to fix all the issues that were noticed during the audit. So let’s get started!
Low hanging fruit
Let’s start with the easy one(s) first and gradually go towards more complicated ones.
alt tags constituted a large percentage of overall errors and are quite simple to fix - everything that needs to be done is to add the textual description to all the images. Easy one!
I just went through the Tenon.io report and added all the missing tags. Axess Lab has ultimate guide for alt texts.
Links without a text
There is also an issue with links without a text eg. logo in the header or RSS feed/Twitter icons in the footer. The fix is to add an
alt attribute to an image, or if that’s not possible (as with navigation button) use the
aria-label attribute to announce it to the screen readers.
I moved the
h2 so they better fit with overall site structure - eg. in Articles page there is
h1 “Articles” header with neatly following articles, all now with
main landmarks showing, now there is also
contentinfo role, and multiple
article landmarks for easier navigation and semantics.
Also, the role from the
<main role="main"> has been removed.
Although there is a
main landmark, missing skip link has also been added (see the code as a GitHub gist).
There is also discussion around adding
tabindex=-1 to the element skip link points to (in this case
main) so that it’s properly focused when tabbing through. However, it also introduces some other issues with skip links so I decided to skip it.
Note: Bootstrap has a
sr-only-focusable CSS helper classes which can aid in similar situations - showing elements to (s)creen (r)eaders only.
Minor issue, but horizontal splitters are announced which is not needed I believe. Appended
aria-hidden="true" and they aren’t shown anymore to screen readers.
Contrast related errors
Two main errors are the low contrast green color on links and buttons, and not so distinctive blue focus on blue buttons.
Links and buttons
Let’s fix the green color first. Currently, it’s at low
1.94 contrast ratio (AA requires
#00C9A7 as text color and
#E5F9F6 as a background color. Using Chrome’s color picker it’s quite easy to get to that level without compromising on the aesthetics.
New text color is
#037d6e with background color of
#ecf5f4 which brings the ratio to
Default blue focus outline on blue buttons isn’t that visible, but as it’s occurring only on a single button “Newsletter” in navigation which naturally follows the link order I believe it’s not such an issue.
Following issues required me to dig a bit deeper because first - I wasn’t sure if those are actually an issue or not, and second - if they are fixing them requires a bit more implementation that just changing the color hex value.
Menu announced as a list
When using screen reader the menu is announced as a list with 4 items. I found that W3 recommends that navigation uses the list as the underlying structure so screen reader can announce list size among other things.
Also, as the site template is based on the Bootstrap, they did a great job with accessibility in their recent versions and by default included ARIA roles in there (
aria-label), alongside the
sr-only (screen reader only) CSS class which is used to indicate the current page.
The conclusion is to leave it as-is.
WCAG 2.4.5 Multiple Ways states that “Multiple ways are available to find other web pages on the site - at least two of a list of related pages, table of contents, site map, site search, or list of all available web pages.”.
Actionable elements small size
When testing with Tenon.io it raised series of “Actionable element smaller than the minimum size.” warnings, essentially saying that the actionable elements (eg. buttons) are smaller than 44x44 CSS pixels which is a minimum.
Namely, the buttons are the toggle navigation button at the top, RSS feed and Twitter at the bottom, navigation items and falsely detected article previews.
The fix is to increase the padding so that the clickable area is at least 44x44.
While working with the menu (hamburger) button, I replaced the icon with actual text “Menu” as a lot of users don’t really recognize what “hamburger” is for. For more see Hamburger Menus and Hidden Navigation Hurt UX Metrics by Nielsen Norman Group.
Weird outline, reading all text on articles
Because the whole article preview was a link two things happened - weird focus outline was all around the article and screen reader read out loud the whole description of the article when focused.
Instead, I opted in for just the title and image being the links (actionable), removing the outline and announcing only the title (or the image
alt tag). The issue could be that for each and every article you focus first on the image and a then on a title, so that might be revised in the future.
In the next post, we will perform a follow-up audit and fix some other issues on other pages (not just on a homepage), although the majority of them were already solved while working on the homepage.