Accessibility for Developers

Accessibility affects almost everyone. Although we often think of accessibility as something that affects people with major disabilities - such as being blind, it actually affects everyone.

Making a site more accessible will benefit everyone. For example, here are a couple of situations that increasing accessibility will affect people who typically wouldn’t say they have accessibility requirements.

• Ensure your text has good colour contrast, and you can easily read it even if using a laptop outside in bright sunlight glare
• Add subtitles, so if you forget headphones you can still consume audio content (such as films or podcasts)

But of course the biggest advantage is that you can make your site/app useable by anyone - including those who have accessibility issues.

Table of contents

Users with motor issues

People may have disabilities which means using a mouse is impossible. They may use input devices controlled by their mouth or face. Some users may have only one hand (one handed keyboards exist!), or might have hand tremors (and would find using a mouse difficult).

How to make your site accessible for people with motor issues

• If you ensure that users can use your site with just a keyboard (no mouse, no touchpad) then this goes a long way to helping people with motor issues. You should aim to be able to tab to all elements on a page, interact with them with your keyboard, and know what you are interacting with.
• People with motor issues might find it hard to accurately use input devices such as mouse or touch screen so ensure that anything clickable (e.g. buttons) have a large click target area.

Accessibility for those with cognitive issues

Always aim to make your site as clear and easy to understand as possible. When it comes to accessibility cognitive issues often come up (short term memory loss, low literacy rate etc). I also personally think that aiming for simple clear language also helps those who do not speak the language very well.

There are lots of design choices (visual and text content) that can go a long way to make content easy to understand and comprehend.

You can also make sure that people with dyslexia are able to easily read content (super high contrast can make it harder to read when people have dyslexia - so offering an option to change background colours can be hopeful)

Users with low vision

Sometimes low vision gets confused with blind users but they are often facing completely different accessibility issues.

People with low vision can still see - but might have major issues seeing clearly.

Also see the section on blind users, as some with low vision will use screen readers.

How to make your site accessible for people with low vision

• Avoid small font sizes.
• Ensure it is very clear what the currently focused/hovered element is. Some sites will put a tiny colour change when focusing on a button or link … but this might not be big enough of a difference for users with low vision to notice.
• Do not disable zooming in on your site (do not add <meta name="viewport" content="user-scalable=no" />). This isn’t as much of a problem now, but a few years ago it was common to disable zooming in (especially on mobile sites).
• Ensure that manually zooming in (e.g. ctrl + + or cmd + +) does not ruin the layout
• Avoid low colour contrast. Pick colours that have high colour contrast so users can easily read and distinguish text.

Blind users

Blind users can use the web - but they use screen readers to read out the content of sites.

Unless you are experienced with them if you have ever tried using a screen reader it has probably been a really bad experience. But blind people quickly get very used to the way the screen readers speak and often set the screen readers to speak at a very fast rate.

How to accommodate for blind users

• Use correct HTML markup. For example don’t style <div>s to look like headers … just use <h1>.
• Use aria properties where needed. For example if you had a custom interactive element that worked like tabs, be sure to use the correct role="tablist" (etc) and aria properties so screen readers can interpret what is happening and convey that to users.
• Do not try to convey information only by colour. Don’t use things like a green outline or green text colour to indicate a success, and red to indicate an error.
• Do not require that users have access to a mouse (or touch screen). If you make your site useable by a keyboard only, this goes a long way with helping screen readers.
• Ensure that all content has a text version. If you have images or videos, if they are needed to understand the content then they should have alt tags or a text based description. Add transacripts for any audio content.

Users with colour blindness

Colour blindness affects 1 in 12 UK men, and around 1 in 200 UK women.

It is very likely colour blind users are affected by your design choices, unless you think about it up front.

Types of colour blindness

There are several types of colour blindness. The most common is red/green, and less common is blue/yellow.

For people with red/green colour blindness it will mean if you rely just on colours for showing a status (e.g. green = ok, red = error) then they will have difficulty noticing the difference.

How to make your site accessible to people with colour blindness

• The key point is to make sure that you do not only use colour to convey information.

• For example if you had a list of users and wanted to show if they were currently logged in, you might list them with green backgrounds or yellow backgrounds. Users who could not tell the difference might have issues working out what each colour are if they look the same!

Its not bad to use colour… the issue is when using colour alone. Here is a more accessible version:

Deaf users

Most websites do not rely on audio content so you might not immediately think about deaf users when thinking about web accessibility. But in fact we have lots of multi media on modern sites.

For example, anyone using Facebook (with its many videos) or Youtube would struggle to understand the content if they’re deaf

The best way to address this is to provide captions for audio content.

Deaf/blind users

We’ve covered deaf users, covered blind users… but what about when someone is deaf and blind?

You have to take all the considerations of deaf users and blind users into account.

Deaf/blind users will tend to use a braille display. It is sort of like a screen reader (which is why making a site accessible for screen readers is critical for deaf/blind users) but will output the content via touch.

People prone to seizures or motion sickness

Some people are affected by seizures (often from flashing lights) or motion sickness.

If you have lots of animation or flashing lights, consider having an option to disable them.