The why and how of website accessibility

What is web accessibility?

Web accessibility is about making the internet more equal and inclusive by creating websites that are useable for people with disabilities. It involves making conscious decisions during both the design and development process that accommodate for those with visual, auditory, cognitive or motor impairments, to name a few.

The international standard for web accessibility is outlined in the Web Content Accessibility Guidelines (WCAG) 2.1 (but note that Version 2.2 is in the works!). Based on these guidelines, websites are graded on a scale of A, AA or AAA where A is the lowest and AAA is the highest. A website which does not meet the A standard is inaccessible to those with disabilities in multiple ways.

In the UK, the required standard of accessibility for any website run by a private or public organisation is AA which means your website is usable and understandable for most people with disabilities. 

Impact for users

An accessible website enables people with disabilities to easily navigate your site, allowing them to digest the content and information on your site without challenge or frustration. This requires a website to be compatible with assistive technologies including screen readers which can transform information on web pages into speech or refreshable braille displays for those with visual impairments. Your website should also have a user-friendly experience for those navigating your site only with a keyboard which accommodates people with motor or physical disabilities.

Design considerations

While it’s important to design inspiring websites that stand out from the rest, design makes a huge impact on the accessibility of a website. By incorporating some of these accessibility-first principles, you can still create a unique website without compromising on accessibility and also create a more user-friendly experience for all.

Layout

If a website doesn't follow a consistent structure, it can be a challenge not only for technologies like screen readers to communicate the contents, but also pose a challenge for people with cognitive disabilities. To avoid this, web pages should follow a logical structure with headings and content as well as using buttons, forms and links in a way the user expects.

Not only is this crucial for accessibility but also creates a better user experience for everyone.

The size of elements on a page is also key to ensuring that your site is usable for everyone. For example, very small elements create a challenge for those with motor impairments who may struggle to click them. The same goes for mobile responsiveness which should be considered in your design process. Factor in the size of elements on different screen sizes to ensure that things like form input fields, radio buttons, CTAs, links and nav bars are all easily accessibility without having to be too precise on your movement.

Colour

Colour scheme is one of the most important decisions when creating a website. It needs to represent your brand as well as be accessible for people with visual impairments or colour vision deficiency, the most common type of which is red/green colour blindness. 

The colour of text and background is the most impactful way to make your site accessible on this front. It’s important to ensure that there is suitable contrast between text and background which for body text is a contrast of 4.5:1 and for larger, heading text 3:1. 

There are handy tools to test colour contrast such as colorable where you can see the WCAG grade of your colour contrast. Test your colour contrast with Colorable here. Or you can test the contrast on a live site here. 

Font

For people with visual or cognitive impairments, dyslexia or learning disabilities, font plays an important role in comprehension. Certain fonts can pose challenges when they make it difficult to differentiate between similar-looking 'imposter characters'. A common example of this is the lack of clear distinction between an uppercase I, a lowercase l, and the number 1. Similarly, problems may arise with characters that are mirror images of each other, such as db or qp.

Fonts which have a good level of accessibility include;

• Arial

• Century Gothic

• Helvetica

• Tahoma

• Times New Roman

• Verdana

It is also key to use suitable letter spacing or 'tracking' so that letters aren't so close that they blur together, or so far apart that they become difficult to read together.

Seizure awareness 

While animation and graphics can make a website more interesting, it’s key to recognise that flashing or flickering elements pose a seizure risk for those with photosensitive epilepsy. The WCAG guidelines flag that no element should flash more than 3 times per second because of this risk. If using animations on your site, it’s best practice to allow the user to disable or pause them while browsing the site.

Development Considerations

Screen readers

Screen readers enable people with visual impairments to use assistive technologies like text-to-speech and refreshable braille displays to digest content on your website. It's important to incorporate elements such as alt text, descriptive links and form labels.

Alt text

Without alt text or alt text that is non-descriptive of the content, a user with visual impairments misses out on that information which could impact their understanding and experience of the website. This is particularly relevant where the image might hold a diagram or additional information.

Alt text should be descriptive and contextual. For example, for the below image, the alt text "Bridge" isn't as insightful as "The Golden Gate Bridge viewed at sunset through a chain link fence decorated with love locks”. 

While having the added benefit of being good for SEO, the primary use of alt text should be for accessibility. This means they shouldn’t be used as an opportunity for keywords unless they would be used organically when describing the image. 

Descriptive Links

Linking text that just says 'Read more' or 'Click here' is not helpful for someone using a screen reader. Screen readers will identify when there is a link but no information about the destination.

So instead of saying:

We have an About Us page where you can find out more about Honey & Jam. Click here.

Say:

Visit our About Us page to find out more about Honey & Jam.

Forms

One common design trend is to use placeholder text instead of field labels on forms. While this looks good, it unfortunately isn't picked up by screen readers so users using this technology will find it almost impossible to complete the form.

Stick to using field labels and name fields by their function e.g. instead of "form_field_2" name it "email_field".

It is also best to implement focus states which will inform users navigating with a keyboard or using a screen reader which form field they are on.

Keyboard navigation

People with motor or physical disabilities often navigate the web with only a keyboard. This means that a user should be able to access any elements on your website including drop-down menus, buttons, links and forms, without a mouse.