Digital accessibility is essential for building an inclusive society. Unfortunately, many organisations and businesses are simply not aware of its importance, or they just don’t know how to go about it. According to the World Bank, there are one billion people, or 15 per cent of the world’s population, living with a disability. Despite this figure, the campaign to improve accessibility and digital inclusion hasn’t gained much traction. In the same way that an architect would no longer design a building with only stairs, a web designer should no longer create a website that isn’t accessible. To help get you started, we’ve listed a few of the latest web design trends and their impacts on accessibility.
Carousels without controls
Carousels are a popular feature that let users include a moving slideshow of photos with captions. However, most carousels do not include controls for the user to pause, go back and go forward. If a carousel includes important information, this also means that people with lower literacy have less time to take in that information. Screen reader users also have no way to access the information that is not visible. To create an accessible carousel, include ‘previous’, ‘pause’ and ‘next’ controls, and make sure that it is marked as an Accessible Rich Internet Applications (ARIA) live region. ARIA live regions help announce to a person using a screen reader when something has changed on the page, such as an image in a carousel.
Parallax scroll
Parallax scroll is when elements in the background move slower than elements in the foreground as the user scrolls – giving an illusion of depth. This can be used decoratively, as on the Firewatch game site, or as a way to present information, as on the Make Your Money Matter site. In both cases, this feature can give users motion sickness and can lead to contrast issues between the foreground and the background. These pages also rely on the user having the dexterity to use the scroll wheel on a mouse. The Make Your Money Matter site, for example, is not accessible by the ‘page up’ and ‘page down’ keys, which blocks out a whole group of users. Accessible sites cannot block users from using their preferred input method.
Hard-to-read text
Using small text that doesn’t contrast well with the background makes it much harder for users to read your website. If you have a lot of information on your site, your users might strain their eyes before they get through all the content. Increasing the font size and contrast makes your site easier for everyone to use and will help readers stay engaged.
Placeholder text instead of form labels
Lots of websites are making their forms more compact and minimal by getting rid of labels and using the field placeholder text instead – the grey text that sits in the text box before it is filled out. While this follows a current design trend, it introduces usability issues. Without labels, screen reader users will not know what each field is for. It also means that once a user puts something in the field, they will not see the placeholder text anymore. To make sure your forms are accessible, include a label element for every field.
Social media images and videos without text or audio alternatives
Many viral posts on social media are images that include text, for example, memes and infographics. If your audience includes people with low vision, they will not be able to read the text in these images, so be wary of sharing them without a text alternative or caption beneath. Another issue is videos that include text with no audio track: people with low literacy will not be able to read the text. Videos with text and audio alternatives will be accessible for everyone.
You can read more about web accessibility on our ‘What is accessibility?’ page.
