net - UK (2020-05)

VOICES
Opinion

PR

OF

IL

E

Merlyn Meredith outlines five top tips for ensuring

web content is accessible for all

Those with mobility or vision

difficulties face frequent challenges

when navigating websites, so when

building sites with that in mind, try using a

computer without a mouse for ten minutes.

You’ll probably notice things don’t work as

you expect. You might use your keyboard’s

tab key and arrow keys to move through a

website and find content flows in an odd

order, or links fail to highlight. With this in

mind, here are five top tips for ensuring

web content is accessible for all:

PERFORM AN

ACCESSIBILITY AUDIT

Conducting an audit covering keyboard

navigation and screen reading can take

you most of the way to full accessibility.

Performing an audit can be done using

your own software, manual checks or free

auditing tools. The Audit tab in Chrome

DevTools is a simple way to determine if

your content and code address accessibility.

Running a quick accessibility audit

will highlight automatically detectable

issues on the page and tell you how to fix

them. Audits will commonly find missing

elements, errors in HTML and elements

that haven’t been described well.

MAKE SURE EVERYTHING

GETS FOCUS

A manual check is a great way to catch

keyboard navigation issues. You may even

find that there are important links on

the page that you can reach, or “focus”

on. Tab through links on your site (or

press Shift + tab to go in reverse order)

and look for an ‘active’ outline around

links. Try form elements and press enter

to trigger elements. Sites commonly use

pop-up elements to convey promotional or

privacy information. Make sure you can tab

through these elements, fill out any forms

in the pop-up and dismiss it if necessary.

CHECK YOUR CONTRAST

Contrast is important for people with

low vision or colour vision deficiencies.

Common colour vision deficiencies include

difficulty distinguishing between shades

of red, yellow and green.

Improving contrast is good for all users,

improving legibility and reducing cognitive

load. There are plenty of free extensions

and resources to check the contrast ratio of

text with a background. Don’t forget about

form elements and borders, too.

USE STRUCTURE AND

LANDMARKS

Good use of HTML5 elements and

Accessible Rich Internet Application (ARIA)

landmarks give screen readers context.

It’s one of the easiest ways to seriously

improve a site for screen readers.

ARIA landmarks define ‘roles’ for pieces

of content. It’s a little structure that

goes a long way, with roles like ‘banner’,

‘navigation’ or ‘main’ providing context

when navigating.

ADD A LINK TO SKIP TO

MAIN CONTENT

Using keyboard navigation to cycle through

links in the header and navigation before

you get to content can be frustrating. Now

imagine that each time you go to a new

page you have to do that again.

A ‘Skip to main content’ link provides

a shortcut to page content, improving

navigation and readability. Better still, the

generally accepted pattern is to hide this

element and only reveal it when necessary.

You may not have noticed, but after you

land on a Google search results page you

can hit tab to bring up a ‘Skip to main

content’ link.

Auditing your site is simple and with a

few small updates from your development

partner, you can dramatically improve the

accessibility of your content.

Meredith is design executive officer at Tryzens, a

company delivering technology solutions and services

to retailers and brands on a global scale.

w: tryzens.com

MAKING YOUR WEB

CONTENT ACCESSIBLE

ACCESSIBILITY