3 positive habits for creating an accessible intranet or website

It is often assumed that an accessibility assessment (sometimes called an audit) is the first thing you should do when you want to make your website more accessible. If you want to know if your website conforms to a standard like the Web Content Accessibility Guidelines (WCAG), then an assessment is the way to do it, but if you want to move a little bit faster and start making changes that will make a real difference, there are 3 things you should get into the habit of doing.

Use an automated tool

It is important to understand that an automated tool cannot check for 100% of possible accessibility issues. For example, an automated tool can check if an image has a text description but not if the text description is appropriate or helpful to a human. Estimates very, but it is generally accepted that automated tools identify around 25% to 30% of possible accessibility issues. With that limitation firmly in mind, using an automated tool to check your website for accessibility is a useful thing to do. There are many to choose from including browser extensions like Wave, Tenon, Axe, or ARC Toolkit, Audit in Chrome dev tools, or external tools like Webhint.io. Whether you’re working on a pattern, component or page, get into the habit of checking it with one of these tools – and fixing the issues it identifies. As mentioned before, you won’t catch everything, but you will be about 30% closer to where you want to be.

Use the W3C Easy Checks

The W3C has put together a set of Easy Checks to help you get started with accessibility testing. The Easy Checks are based on WCAG, but unlike WCAG there are just 10 things to check (there are 78 in WCAG 2.1).

1. Page title
2. Image text alternatives
3. Headings
4. Colour contrast
5. Resizable text
6. Keyboard access (including visible focus)
7. Forms, labels, and errors
8. Moving, flashing, or blinking content
9. Multimedia alternatives
10. Basic structure

With the same warning that comes with automated tools, these Easy Checks do not cover all aspects of accessibility. What they do cover is some of the things that are most helpful to people who find seeing, hearing, moving, or cognitive processing difficult. If you get into the habit of using these 10 Easy Checks in complement with automated testing, you’ll take another big step towards a more accessible website.

Use assistive technologies

Every platform and device now has a range of different assistive technologies that can be enabled or installed. This includes screen readers, magnification or zoom capability, and (although it is not strictly speaking an assistive technology) the keyboard.

Keyboard

Abandon your mouse or trackpad and make sure all functionality can be navigated to and operated with a keyboard. Make sure that:

• All interactive elements can be navigated to using the Tab key (or arrow keys where appropriate)
• All interactive elements can be activated with either the Enter or Space keys
• All custom controls can be operated using the keyboard
• The interactive element that has focus is clearly indicated, and that it is always possible to see which element currently has focus

Screen readers

Turn on the screen reader for the platform you’re using and make sure all content can be navigated to, understood and interacted with using a screen reader. Make sure that:

• The screen reader tells the user what kind of content they’re dealing with (link, button, heading, checkbox, list etc).
• When there is an implied visual structure (table, list, heading hierarchy etc.) the screen reader announces it correctly
• When navigating a data table the screen reader announces the row and/or column header as focus moves between cells in the table
• It’s possible to move between landmarks (like the header, main content area, navigation and footer)
• The purpose of every link is clear when using the dialogue of all links on the page
• All interactive elements can be navigated to using standard keyboard commands or screen reader keyboard commands
• All interactive elements can be activated using either the Enter or Space keys
• All custom controls are announced correctly and can be operated using the keyboard

Magnification and zoom

Make sure all content can be navigated to, understood and interacted with at maximum zoom. Make sure that:

• All content can be viewed without any overlaps
• Multi-column layouts reflow to a single column
• It is not necessary to scroll both vertically and horizontally to view the same bit of content
• Page features are consistently located across the website

If you get into the habit of enabling these assistive technologies, or setting aside your mouse in favour of your keyboard, you’ll find you quickly start to understand how different modes of interaction work. With that understanding you can take another, albeit cautious, step towards better accessibility. The caution is based on the fact that you are most likely not a full-time assistive technology or keyboard user, so your experiences will not match those of people who are, but like most things – the more often you do it, the better you get!