Blog

Accessibility guidelines for digital design

This design guide outlines an approach that will ensure a base level of accessibility and should be followed for all website and app work.

Why focus on being accessible?

Improving colour contrast doesn’t just help someone who is legally blind, it also helps a foreman who is trying to use an app in bright sunlight; plain English helps someone who isn’t a native speaker, but it also ensures that your message is clear to everyone. If these accessibility principles are adhered to early then they become second-nature and they’re simply good design.

Accessibility is not a last-minute addition to try and cover for a fringe set of users, it is an inclusive approach that makes your digital design work better for everyone.

Use high contrast colours

Brand colours can often work well in print, but require tweaking for digital use. High contrast ensures that the website can be used by people with sight issues, as well as people who are in a low-vision environment (eg. in the sun on an old phone).

Use this tool to determine if contrast is high enough:

Different coloured 'A's on a dark background to show contract and Accessibility

Test for colour blindness

There are filters in Photoshop and other online tools to simulate how a colour blind person will see a design.

Also be aware of any core palette colours that look the same to colour blind people.

Make sure body copy is legible

Body copy should be at least 16px in size, with a recommended line-height of 1.5. The Regular font weight should also be used. No letter-spacing should be used by default.

This may be slightly adjusted, dependent on the typeface choice. If the adjustment from this norm is large then reconsider the font, it is likely poorly designed.

Also, ensure all characters (eg. macrons) for the required language are native to the typeface.

Ensure headings stand out

Headings are essential for someone scanning the page, so they should be designed to be easily recognised.

A consistent colour system is required for headings, as they also act as a form of navigation on longer pages.

Have large enough tap targets

Buttons and links should be big enough to tap easily with a thumb.
This is especially important for navigation menus at mobile sizes. Visual appearance is less important than easy navigation.

Apple recommends a minimum tap target of 44px x 44px. This can include whitespace around the target, as long as it can be tapped.

Use this guide.

icon of finger tapping button to show button size accessibility

Obvious interactive links and buttons

Make sure that buttons and links can be clearly recognised.

Don’t only use colour to signify links; also use underline, icons or font-weight.

Make sure that hover states and focus states are clear and logical.

Use logical interaction patterns

Re-inventing the wall and breaking from convention needs to be heavily tested. By default don’t do things that aren’t expected. This includes auto-submitting forms, opening pop-ups on focus or hover, and generally changing the screen at unexpected times.

Don’t rely on hover states

Content that is only available on hover will not be available for mobile and other touch users who cannot hover.

It is also easily missed by users who can hover, increasing the chance that they also won’t see the content.

Be careful with sliders

User interaction with sliders drops off rapidly after the first slide. Ensure that it is easy to navigate to the next/previous slide, and make sure that it is obvious that there are more slides than the first one.

If content is required then don’t hide it past the first slide. Sliders should also not be used as a way of trying to say too many messages at once.

Don’t use images to display text

Including text in images means that someone using a screen-reader is unlikely to be able to read it. It also severely limits the responsiveness of the text, meaning that the only option for mobile users is to scale the image down, often making text too small to read.

All images should also have descriptive alt text.

Have text alternatives

If image must be used to display text, then a text alternative should be offered. Videos and sound clips should have transcriptions available.

This doesn’t just make content accessible for blind users, it also lets someone who isn’t able to watch a video (eg. in a quiet area with no headphones) access the content.

Use plain English

Accessibility isn’t restricted to design, text should be well written, with clear purposes for all messaging. Consistency and clarity are key to ensuring that users can understand content. Use descriptive headings and labels, and test their comprehension with real users.

This includes navigation. Make sure navigation items are consistently named, and that each section/function is described consistently.

Don’t use abbreviations

…unless you clearly explain what they mean.

Icon saying JBD NEED AN ETA ON PTY to show bad accessibility

Progressive enhancement

Don’t rely on technology to show people content. There should be a very low technological baseline that gives users access to all content, with additional user experience built on top.

Include text with icons

Icons by themselves are rarely enough information for someone to understand what is happening. Labels should be included with icons wherever possible.

There is a very limited sub-set of icons that can work independently (eg. the close X). These should be treated with care, and include additional instructions for screen-readers.

Assist users with forms

Ensure that forms ask for the minimum amount of information. If they require filling out in a particular way, then show an example of what is required. Inline instruction is better than general instructions at the top of the form.

Forms should be tested, as users can quickly identify usability issues that can be highly problematic.

Use visible form labels

Don’t use placeholder text as a form label. This text disappears once the user starts typing, which is problematic for anyone with short-term memory issues. Most placeholder text is also a light grey, which doesn’t necessarily meet colour contrast standards.

It is also best practice to include form labels above the field, not beside it. This makes things easier in responsive designs.

Form field using correct accessibility design for first name

Clear validation messages

Include validation messages inline with where the errors are, and clearly explain what the error is. If a particular format is required for the data, show an example.

Ideally, don’t allow a form that isn’t valid to be submitted.

Easy to close modals

Make sure modals follow conventions when it comes to closing them: have a close icon in a top corner, and press escape to close them.

Modals that collect information should also have a “Cancel” button (or similar) to let the user know that they can safely close it without submitting the form.

One task at a time

Each screen should have a clear purpose. Flooding a user with too many options provides distractions, confusion, and reduces the likelihood of them achieving what they have set out to do.

Illustrations showing lot's of buttons

Test with real users

All of these accessibility guidelines provide a good basis for creating an inclusive, accessible design. Two minutes of testing with real users will potentially throw up usability issues that haven’t been considered, but can be easily resolved.

“Real” users includes people from all backgrounds and of all abilities. A good digital design should not rely on a user to be fully able or technologically savvy.

Everyone is not always fully able

MS inclusive accessibility illustration

Remember that these guidelines help everyone, not just users with traditional accessibility needs. We can be limited by our circumstances, as this diagram from the Microsoft Inclusive Design Toolkit demonstrates.

These guidelines are for base level accessibility. Web Content Accessibility Guidelines (WCAG) 2 requirements can be found here. We are more than happy to work strictly to these guidelines if it’s a requirement to the brief.

By Ben McKeown

A digital designer with close to a decade in experience, Ben founded Jen & Ben Design in 2014 with Jenna Fisher. A graphic designer by trade, he also has an extensive knowledge of how websites work.

Interested in knowing more?

We’d love to chat about how we can design an accessible website for you

Jen & Ben Design are a digital design agency in Melbourne, Australia.

We don’t just design accessible websites, see all our services and work.