5 Steps Towards Accessible Web Design
Wednesday, 22 May 2019 | Posted in: Articles | 6min read
Wednesday, 22 May 2019 | Posted in: Articles | 6min read
Accessible web design is the practise of making it easier for people (especially those with certain types of disabilities) to access and interact with your website.
Accessibility guidelines help designers and developers create accessible websites. The World Wide Web Consortium (W3C) created the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) to support this goal. The internationally recognised set of standards for web design aims to provide the necessary information on how to make the web useful and entertaining for all users.
WCAG 2.0 standards specifically focus on designing for people with cognitive, auditory, neurological, speech, physical and/or visual disabilities.
A 2015 survey by the Australian Bureau of Statistics reveals that 4.3 million Australians are reportedly living with a disability. Accessible web design makes it easier for this fifth of the population to achieve their goals with your website.
In addition to this diverse user group, the guidelines also help to improve general website usability for a variety of alternative uses, such as televisions and watches, as well as older devices and browsers.
WCAG 2.0 standards aim to ensure website accessibility for users of all device types. Common examples of alternative website navigation devices include keyboards and screen readers.
Keyboards are used for navigation by people with mobility impairments who are not able to use a mouse or trackpad. They use ‘tab’ and ‘arrow’ keys (or alternative input devices such as mouth sticks) to access and navigate through website content.
A screen reader is a form of assistive technology that converts website information to a format the user can understand. These formats can include speech or braille.
“Everyone involved in building and maintaining websites has the responsibility to ensure that all users have meaningful access to the websites we create.”
– Timothy Downing, Digital Designer and UX Specialist at The Digital Embassy
This article introduces 5 initial steps you can take to improve the accessibility of your web design in line with WCAG 2.0 standards.
You can begin to action these steps almost immediately, because accessible web design largely requires small tweaks, not a complete overhaul.
One of the most obvious visual aspects of web design is colour. Colour serves an important role in enhancing the appearance and prioritising the content of websites, but for people with visual impairments such as low vision or colour blindness, the wrong choice of colour could prevent them from being able to read your content.
Colour contrast is a surprisingly overlooked aspect of web design. One of the most common issues is the use of grey tones that are too light to be read easily, especially when placed against a light or white background.
WCAG 2.0 standards include recommended contrast ratios that make text easier to read on-screen. These ratios decrease with larger font sizes or bold type, as they get easier to read.
As well as being accessible for people with visual impairments, correct colour contrast also ensures that your website is visible when viewed in a bright environment, like from outside on a sunny day.
Useful tools to test the colour contrast of your website designs are:
Colour is frequently used as a visual cue to distinguish an element, indicate an action, or prompt a response. One example of this is using colour to convey error states to users. Field error states are commonly marked by colour feedback such as red outlines.
While colour can be a useful tool to convey information, people with visual impairments will often benefit from having other types of visual cues included as well.
Accessibility guidelines suggest making sure colour is not the only type of visual cue provided to users. Other types of visual indicators can include text labels, size, icons, and underlines.
This example of a field error state uses two types of visual cues to provide feedback: colour, and iconography.
A common accessibility mistake is putting labels as placeholders of form fields. Screen readers often do not read this placeholder text, so users have no understanding of the required input.
Form fields should be labelled clearly for both visual users and screen reader users. This involves including a well-positioned, descriptive label for each field. Also, remember to include visual cues to indicate required fields where appropriate. This is commonly denoted by an asterisk.
The focus state is the name given to the change in appearance of an interactive element (such as a button, link, or form field) when focused on by the keyboard.
Focus states serve an important function for many web users who navigate using a keyboard. Keyboard users who navigate with ‘tabs’ and ‘arrows’ (or other devices such as a mouth stick) need to have a visual indication of their position on the page in order to interact with it. A focus state will indicate this position with visual identifiers such as a glowing blue outline, or colour change.
Focus states can be made to look the same as your hover states (the animation of an element that is hovered over with a mouse or cursor but not yet clicked), which are commonly used to enhance a website’s visual appeal. These focus states can be designed to fit the style of your brand, matching the look and feel of your website.
You might already know the importance of structure and headings for SEO purposes, but it is also important for the group of users who use screen readers.
Heading tags are attached to text that establish the hierarchy of content. Screen reader users rely on this content hierarchy to be well organised in order to navigate the page. People using these devices navigate content by header tags. They can listen to a list of headings, similar to how sighted users can scan a page so poorly structured headings will affect the accessibility of your content by not allowing screen reader users to navigate easily.
Be sure to organise your content using the correct structure of heading tags. Choosing a heading type just because it looks good visually can be confusing to screen readers. To change the visual appearance of headings while maintaining your page structure, create new CSS classes for styling.
Achieving accessible web design should be on every designer, developer, marketer and content editor’s radar. As the web continues to grow and plays a bigger part in our everyday lives, website accessibility has become increasingly more crucial in delivering content and services to digital consumers.
Any business today that has a website has a responsibility to ensure that everyone has access to it and can benefit from the user experience it provides.