Skip to main content

Part 2: Accessibility audit fixes

Published on March 22, 2019 in Audit category

Screenshot of the Chrome's color picker

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.

Image alt tags

Missing 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.

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.

Headings

I moved the h3 to 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 h2 titles.

Headings outline

Landmarks

With only nav and main landmarks showing, now there is also header, footer with contentinfo role, and multiple article landmarks for easier navigation and semantics.

Also, the role from the <main role="main"> has been removed.

W3 has some best-practices regarding the mapping between HTML5 landmarks and ARIA roles.

Although there is a main landmark, missing skip link has also been added (see the code as a GitHub gist).

Implemented skip link

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 and sr-only-focusable CSS helper classes which can aid in similar situations - showing elements to (s)creen (r)eaders only.

Horizontal splitters

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.

Two main errors are the low contrast green color on links and buttons, and not so distinctive blue focus on blue buttons.

Let’s fix the green color first. Currently, it’s at low 1.94 contrast ratio (AA requires 4.50) with #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 green color

New text color is #037d6e with background color of #ecf5f4 which brings the ratio to 4.55.

Button focus

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.

Blue focus ring on blue "Newsletter" button

Intermediate

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.

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-controls, aria-expanded, 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.

Site map

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.”.

As the site doesn’t have such structure, I created the /sitemap.xml using jekyll-sitemap and a /sitemap which lists all the pages on the site in a nice hierarchy.

Other

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.

Small footer icons

The fix is to increase the padding so that the clickable area is at least 44x44.

Footer icons with additional padding

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.

Old menu button with a hamburger icon

New menu button with more descriptive text

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.

Articles outline before and after

Follow-up audit

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.

Sven Kapuđija profile image
Sven Kapuđija
Author