Designing for Accessibility: Accessible Web Design

Web design accessibility refers to the level of ease a user can navigate and understand a website. It specifically focuses on making the website inclusive and easier to use for those who are disabled or have impaired movement, vision or hearing abilities. Ensuring a website is accessible needs to be a collective effort from the developers, designers and the content and copy creators of the website.

Designing accessible websites should be at the top of every website designer’s mind. Although it’s important to be inclusive of those who are impaired, it’s also essential for creating a website with a good UX for everyone. Furthermore, if accessibility is considered at the start of the design process rather than during a quality control check, it can eliminate problems and complaints further down the line, when it may be more difficult to make big changes to the website.

Contrasting the foreground and background

The foreground and the background need to be contrasting, whether that’s text on images, buttons and elements or background gradients. Why? Because some people who have visual impairments may not be able to read the text if the background doesn’t contrast enough. Also, the contrast ratio must be correct as some bright colours are not readable and require low luminance. There are a few instances where the minimum contrast ratio doesn’t need to be applied, and that’s in logos and also incidental text (i.e. text within photos).

Don't rely on colour to differentiate elements

Different elements and information need to be highlighted using symbols and other visual prompts than just colour alone. Colour and text are the most popular combination to indicate where information needs to be inputted. Numbers and symbols (such as bullet points and asterisks) can also be useful when highlighting data.

Use styling to group and identify related content

A great way to show relationships between content and help users understand context is to utilise whitespace on the page. As well as this, consider the style of headings, including colour, font, size, and proximity to the text. This will make it easier to process information and make it easier for screen readers to scan pages.

Make opportunities for interaction easily identifiable

When designing for accessibility, consider those who have impaired movement and may struggle to use mouses, relying on a keyboard to navigate websites. These users need to be able to identify and successfully use interactive elements. This can be easily achieved by establishing a clear and consistent style for your site’s interactive elements. Keeping these the same throughout the site will help make them easily identifiable on every page.

Clear navigation

Following the theme of consistency, the navigation of the pages across the whole site should be uniform in style and position. To further help users, make sure that breadcrumbs, headings and anchor text to pages are in-line. Furthermore, adding search bars on the website and including a site map are useful tools and provide more than one way for users to navigate the website.

Form elements need to be labelled properly

Position a descriptive label next to or above the form field (these are normally to the right for checkboxes). You should also consider the space between the fields and their relevant labels; the text needs to be readable and therefore not too close, but ensure there isn’t too much space separating the two either!

Add alt text & Aria labels

Alt-text: Alt-text descriptions help those who are visually impaired and rely on screen readers. It should be descriptive enough for the user to visualise the imagery on the website, and therefore needs to be more than just one or two words.

Aria labels: ARIA Labels (Accessible Rich Internet Applications) make it easier for screen readers to analyse information on a site, indicating key elements and features of the site.

Both Alt-text and ARIA labels help those who use screen readers and should be considered from the start when designing an accessible website.

Highlighting feedback

When feedback is required, such as informing the user that access to a page has been denied or that a password has been entered incorrectly, the information must be easy to understand. Again, this comes down to the styling of the feedback, which needs to be prominent and clear. When doing this, keep in mind all of the previous points on minimum colour ratio and don’t rely on colour alone to convey the information.

Create designs for different devices

Differently sized viewports need to be considered so that web pages on mobile phones, tablets and web browsers are presented similarly, regardless of the different screen sizes. In addition, the main elements and the accessibility of web pages need to be clear across all devices, with the text set to the maximum readability capacity.

Balance media alternatives within the design

Alt-text and ARIA labels are great for screen readers, but sometimes extra detail is required. For example, for those who are deaf or have hearing impairments, audio transcripts may be needed for videos and other content that is non-text related. The easiest way to ensure your site has accessible media is to strike a balance across the website using different forms of media throughout.

Provide controls for content that starts automatically

There are many instances on a website where media, animation or sound may start automatically, in carousels, pop-ups or video content, for example. Clear controls should be used so that these forms of media can be stopped quickly by users. Furthermore, ensure that videos or animation don’t flash more than twice within one second.

Designing for accessibility need not be complicated when you have the right tools and platforms that offer customizability, such as Craft CMS and OpenCart. At Welford, we appreciate the importance of designing accessible websites from the beginning of a project and seeing it all the way through to the end.