User Experience / What are accessibility features of a website?

What are accessibility features of a website?

Andy Thorne
icons of features of a website

Nearly a quarter of the UK’s population, and around 1 billion people worldwide live with one or more disabilities. Which makes understanding the accessibility features of a website a priority for designers. 

Accessibility online is the process of ensuring websites are designed and built to allow people with disabilities, including auditory, cognitive, neurological, physical, speech, and visual to use them.

Web accessibility isn’t only beneficial to people with disabilities, but can also support users with temporary impairments such as injuries or illnesses, people using alternative input methods, and in situational environments with bright sunlight or audio restrictions.

Designing for accessibility will not only increase the number of people who can access your website, but will also ensure a great user experience for all of your users, regardless of their abilities.

5 accessibility features to include on your website

Closed Captions

Illustration of 2 dogs, one with a heading of English CC and text underneath reading '[Whispers] Thank you'. The other dog has a heading of Subtitles and text underneath reading 'Thank You'.

Unlike subtitles which only display the spoken dialogue in a video, closed captions also include other elements such as background sounds and audio cues to give context to what is happening in the video. 

In terms of accessibility, users with hearing impairments, or in situations where they can’t listen to audio would find closed captions essential in order to fully understand what is going on in the video.

Colour Contrast

Image of two website buttons, one with sufficient colour contrast, and one with insufficient colour contrast

Good colour contrast between a foreground and background element, such as text on a button, or links on a page is crucial to allow users to see what they’re looking at.

This is important to consider generally in UX, but is especially important for users with low vision, or impairments that make it harder for them to distinguish certain colours.

Contrast checkers can show whether your chosen colour combination is accessible, but you can also check by switching your design to grayscale; if the contrast is strong enough. If not, you’ll need to make some adjustments.

Keyboard Navigation and Logical Headings

Many users have physical disabilities that prevent them from using a mouse, and they rely instead on navigating through websites with a keyboard, or screen reader.

Clear visual indicators are important to show the user where they are on the page.

As well as logical keyboard navigation, logical heading structure with H1, H2 & H3 is necessary to allow users to successfully find the content they’re looking for with a screen reader.

Large Buttons

Image of one button with sufficient spacing, and multiple buttons positioned too close together

Button sizing is an important aspect for UX best practice, but even more so for users with motor impairments such as cerebral palsy.

If buttons, links and clickable elements aren’t big enough, or placed too close to each other or other elements, users might miss the button or click on the wrong button altogether.

Small buttons are also harder to interact with on small screen devices where space is particularly limited.

Screen Readers & Alt Text

Screen readers are devices that assist many users with visual and cognitive disabilities or impairments. They work by reading the content on a web page out loud, including navigation, buttons, and images. 

In order for screen readers to describe images, they must have alt-text applied to them. 

Alt text is the invisible description of images which lets you include images on your website, whilst giving context to blind or visually impaired users.

It is important to provide useful detail with Alt text; not too descriptive, and not too vague.

Updated Accessibility Guidelines

 

W3C, the international organisation that creates standards for the World Wide Web is currently drafting WCAG 3, the new set of accessibility standards that will be rolled out over the next few years.

At WDC, Geri Reid spoke about what to expect from the new guidelines and explored the idea of designing for humanity to solve core issues.

Designing for accessibility is an ongoing process

What we’ve discussed in this post are just the starting points for creating an accessible website. W3C has an extensive set of guidelines to ensure accessibility for all users, regardless of disability.

Incorporate accessibility into your websites and speak with real users who live with disabilities to gain a better understanding of their needs.