Website Accessibilty Guidelines

As designers we have responsibility to create inclusive web experiences. That means embracing approaches that will make it easier for everyone to access as much of the content and functionality offered by a website as possible.

Accessibility is often seen as a low priority. But dropping potential barriers to access can benefit your whole audience and have a positive impact on aspects such as SEO too. Nearly 1 in 10 internet users have vision issues that can’t be corrected with lenses. Many more will be accessing your website in less than ideal viewing conditions, whether that is adverse lighting conditions, distance from screen or the quality of their display. Making it easier for these people to access your content makes a lot of sense.

It is always possible to do more, but the following accessibility guidelines provide a good starting-point for creating more accessible websites.

Colour contrast

To ensure that content remains clear on screens with poor contrast ratios, in challenging lighting and for users with impaired vision we should pay careful attention to the contrast between background and foreground elements. For critical content and UI controls a ratio of at least 4.5:1 is desirable. For large text elements (24px or larger) a lower contrast ratio of 3:1 is generally acceptable.

Font sizes

The size of the fonts we use can have a big impact on how easy it is for visitors to read content and interact with key interface elements such menus and buttons. In general as fonts get smaller the amount visitors will be inclined to read and their comprehension of that content both tend to drop. For a comfortable reading experience a calculated font size of 16px or larger is recommended.

Font weight, letter spacing, line height and the font style also have an impact so in some cases you may need to go above this suggested minimum to achieve good legibility. Very thin or very complex letter shapes in particular tend to require larger sizes to be easily legible.

Line spacing

Line spacing/height often receives less attention than other aspects of type setting, but can still have a significant impact on readability. Particularly on how easy it is to track from one line to the next. Line spacing is usually expressed as a factor of the font size and W3C accessibility guidelines call for a line spacing of at least 150% to be used wherever text runs over multiple lines.

Touch targets

User interface elements that are too small or too close together can be hard for users to tap with accuracy. We should ensure that all touch targets are at least 48dp wide (this can include padding) and 8dp apart.

Image alt text

Wherever possible images should be marked up with descriptive alt text. This helps both search engines and real visitors using assistive technologies such as screen readers to understand the content of an image. It will also be what displays if for some reason the image itself cannot load.

Link anchor text

Anchor text on links and buttons should ideally be meaningful in isolation. This will help all users, but particularly those using assistive technologies such as screen readers, be clear on what they can expect from clicking a linked piece of text or button. If linking to a file download rather than a standard web page it is good practice to show the file type and size as part of the link’s anchor text, for example: Website accessibility guide (PDF | 1.5MB) – (note this particular link is for illustration purposes only and simply leads back to this page). The final thing to consider is whether your link text is long enough for users to accurately click/tap on. As with other clickable user interface elements we should aim for a touch target that is at least 48dp wide. With this in mind short words (under 5 characters in length) may present an accessibility challenge for some users.

Readability

Line Length: Line length has a very real impact on the readability of our content. If a line of text is too long, the user’s eye will have a hard time focusing on the text. If a line is too short, the eye will have to travel back and forth too often, breaking the reader’s rhythm. For a comfortable reading experience we should size content areas and their font sizes accordingly. 50 – 90 characters per line is a good guide for large blocks of text and 15 – 40 characters for short single sentence paragraphs.

Language: We should write clearing using everyday English, avoiding jargon wherever possible. When we use longer words (8+ letters) readers tend to skip more and comprehension can drop. Shorter words that are part of our common vocabulary tended to be recognised by shape making them quicker to read. By keeping language simple we help to speed up reading and access to the information within.

Sentence length: For clarity of message short sentences work best. Anything up to 8 words can be read by most people without any difficulty. Where possible try to keep sentences under 25 words. Users don’t necessarily read from top to bottom and are likely to skim your content, reading around 20-30%. To help your content scan easily put the most important content first within sentences, titles, bullet-points etc.

Capitalisation: In general our use of case should follow the normal conventions of a sentence in the English language. Capital letters should only be used for the first letter of the first word, for proper nouns or abbreviations/acronyms. All other words should ideally be displayed in lowercase. Limited use of BLOCK CAPITALS text is acceptable but more than a couple of words will introduce readability issues.

Text in images

This should be avoided wherever possible because it makes the content inaccessible both to screen readers and search engine crawlers. Typically text within images also renders less clearly than real text and is much harder to have naturally adapt as the browser width changes between desktop and mobile.

Browser support

All content and functionality should be accessible across the latest versions of the most popular web browsers (which today are Chrome, Firefox, Safari and Edge). Because of its widespread use also support legacy versions of Internet Explorer back to version 9. Cosmetic inconsistencies are acceptable as long as they don’t significantly impact the the user experience. Development techniques such as Progressive Enhancement help ensure a base level of functionality for all browsers.

Mobile content

While it makes sense to tailor some aspects of the user experience specifically for mobile devices, such as the layout of the user interface. We should try to avoid making assumptions about context based purely on device type and making the mistake of restricting access to particular content or functionality based on this.

Usability of images

Usability might seem like a strange concept when thinking about images. But photos that are too small to make out, are generally unclear or seem to contradict rather than support the content they are supposed to compliment can all cause tangible usability issues for a site, distracting or confusing visitors. We have written in greater length about selecting effective images in a previous article.

Content linearisation

This is just a fancy way of saying that content should ideally be presented within the code in the same order that it will appear within the rendered page, since this is how most assistive technologies will read it.

Design Standards

These basic accessibility guidelines are part of our Design Standards. A set of best-practice principles that shape all our work. While they really just skim the surface of what you might want to consider when trying to make your website more accessible, we believe they form a good foundation that will positively benefit any project.