How Great Design Impacts Website Accessibility

19 November 2020

Great website design should always include the topic of accessibility. Creating a beautiful and aesthetically pleasing website is a great achievement; knowing that it creates a frictionless experience for all users should be a must.

And it’s not only a moral question; more accessible websites reach a wider audience and bring better business results.

Website Accessibility Does Not Require More Investment

But what does website accessibility entail, and would it not be extremely costly to achieve? These are often the questions companies struggle with. On the cost side, the answer depends on the time of asking. Website accessibility does not require additional work if taken into consideration at the initial design phase of the website. Making a website accessible does not require extra features or content. It requires awareness of accessibility issues and taking these into consideration.

Website Accessibility Starts with Design

At the design phase of a website, it’s important to make accessibility part of the requirements. The five big areas that improve website accessibility are color contrast, alternate text, focus states, forms, and typography.

Colour Contrast

Making sure there is plenty of contrast between text and background helps those with impaired vision. This does not only affect those with low vision but also people who suffer from color blindness.

Never use colors as the sole option to convey information (i.e., products out of stock are made grey) and make sure to add additional signals (i.e., use the text “out of stock”). Maintain a decent contrast between text and background, at a minimum of 4.5 to 1. This adheres to the conformance level AA.

Alternate Text

Also, consider the tools people with accessibility challenges would use. For example, people using screen readers rely on their tool and the text on the website to navigate their way around.

Making sure that images get an alternate text helps the screen readers to provide the user with all the relevant information on-page.

Focus States

Focus states indicate where the user is currently looking or interacting on the page, traditionally the blue outline on clickable elements such as links or images. Most designers would consider these unwanted effects on the website and would use CCS to circumvent these effects. However, for users who don’t have or use a cursor, for example, and would rely on tabbing through a page, not having these indicators will make it difficult to navigate the page.

Forms

Taking a too minimalist approach to forms can also work counterproductive when it comes to website accessibility. For example, not using labels for fields, but having it within the field can be confusing as the “label” would disappear as soon as the user starts typing. Alternatively, not using clear borders to indicate where text needs to be input can be confusing for users.

Again, for those who have color blindness, using color changes to show validation errors in fields can be challenging to see.

Typography

When choosing a font and font size, use clean fonts, and consider those with dyslexia or those with visual impairment. As a rule, use letter-spacing x0.12 the font size, word spacing x0.16 the font size.