Why should web designers care about accessibility?

Web designers and developers are all guilty of being somewhat selfish in terms of our work and who will be able to access it.

web designers and accessbility

Visual appearance often takes precedent over usability, yet as contemporary creators we should be more morally aware offering accessibility to people with different abilities.

Aside from the legal obligation to uphold UK accessibility laws, there’s over 11.9 million people in the UK with a disability. That equates to 19% of the population, an enormous potential user base that’s being let down by poor web accessibility.

Why would someone need good web accessibility?

We are going to break down the various reasons someone may be experiencing difficulty when using a website:

Auditory – This ranges from mild hearing impairments to substantial impairment of hearing in both ears. This may prevent them from hearing sounds which may affect their use of the web.

Cognitive and neurological – This involves disorders of the nervous system and can affect how people hear, move, see and speak.

Physical – This includes limitations of muscular control, involuntary movements i.e. tremors, paralysis.

Speech – This involves limitations that can affect somebody’s ability to produce speech that can be recognised by others or by voice recognition software.

Visual – Visual disabilities range from mild impairments in one or both eyes to substantial loss of vision.

How can designers help?

A lot of web designers and developers don’t care for web accessibility because they think it’s too difficult to implement. On the contrary – it can be quite easy when you know the fundamental issues that plague people when trying to navigate a site.

Simple ways web designers can improve accessibility

Let’s look at some simple things we can implement that would go a long way in improving accessibility across a broad range of disorders.

Alt text for images

web accessibility for web designers

All the images we display on the web should contain alt text that would describe the image in detail, so if a person with sight difficulties accesses the page, it can be accurately described to them.

Make link text descriptive

accessibility illustration for link text

When writing link text make sure you are descriptive so that it is understandable out of context.

Users who have screen readers rely on this information to be able to navigate the site.

For example:

<a href=https://wearemarvellous.com/about-us>Click Here</a>

Is incorrect.

This first example does not have a sufficient description of the link. Click here would not give the user any indication as to where the link will take them.

<a href=https://wearemarvellous.com/about-us>Find out more about the Marvellous team</a>

This is the preferred example, the text is descriptive and gives you real insight into where the link is going to take you.

Labelling form fields

A very common error amongst websites is the labelling of form fields. Most input elements including select and textarea elements should have an associated label element that states the purpose of this field.

Typography sizes

As a general rule, avoid small font sizes. 16px is the industry standard for body copy. If you’re planning to go any smaller than this, please use a heavier weight that will have plenty of contrast on the screen for extra readability.

White space is your friend

Clean and well spaced out content helps user’s identity different sections of your site easily.

Keep it simple semantically

If you adhere to semantic structures that html already offers, this will go a long way to creating accessible websites. Sites that don’t use complex code structures will more than likely be almost 100% accessible.

Colour contrast

colour contract in web design

Low contrast ratios can be a real problem for people with colour blindness or impaired vision. The contrast between text and image needs to be clear so it can easily distinguished by all users.

Keep content simple

Written content should ideally score highly in the Flesch reading-ease test – a test created by the US Navy in 1975 – as this makes website more accessible to users who have a lower than average reading level.

By following these simple rules and implementing them into your work, in a short time web designers can help make the internet a better, more inclusive place.

A Marvellous blog by Simon

Simon co-founded Marvellous in 2005, with the aim of building a dynamic digital agency – combining the latest technology with cutting-edge visual design.

See all our Marvellous blogs