As web interfaces continue to evolve, it is becoming increasingly important not to get distracted from the main purpose of a site: to deliver a message. In order for this message to successfully reach your audience, the website needs to be easy to use – intuitive, with good information architecture and (preferably) beautiful.
As the web has evolved, it has become an alternative world – a new “dimension” where we while away hours upon hours. Crucially, the web is all-inclusive and accessible. Therefore one factor we must not forget when it comes to designing a great website is to make it look beautiful for as many people as possible. We build buses, streets, buildings and underground stations with the accessibility of disabled citizens at the forefront of our minds and it should be no different for the web.
In 2011, the World Health Organisation (WHO) published a report in which they estimated an average of 15.6% of the current world population has significant disabilities. According to the Global Burden of Disease Study, this number rises to 19% if we consider people with smaller difficulties. This means there are more people with disabilities than the whole population of China (1.3 billion). Whilst not all of these people will have disabilities affecting how they use websites, it highlights the need to be inclusive.
Web designers have the social responsibility of determining how to design flat and multimedia content that does not exclude. This is applicable for people with hearing, sight, mobility or cognitive difficulties. According to BBC’s study on accessibility, a design that is accessible for everyone will combine Usability, Web standards and Assistive technology.
A good way to start is, as always, to put yourself in the shoes of these users. Test responsiveness, navigate with your keyboard instead of a mouse, try the colour blindness tool on Illustrator/Photoshop. Appreciate some of the frustrations and feel empowered to create interfaces that minimise them.
Here we share some practical tips that can easily be applied to your web interface design.
Web Structure
According to the W3C’s standards within their Web Accessibility Initiative, it is essential to make content appear in predictable ways throughout a website. As the largest web standards regulator states, “many people rely on predictable user interfaces and are disoriented or distracted by inconsistent appearance or behavior.”
Tips:
- Repeat any navigation and key elements throughout multiple pages, ensuring that they always appear in the same place
- Apply consistent labelling and structure throughout the site
- Remember that significant changes on a page should not happen without the user’s input
See it in action:
Consistency and predictability are essential on ecommerce and services websites with multiple pages. Airbnb’s website repeats the same templates and symbols across different pages. When opening a new page, the user already knows where to look in order to find the information they are seeking.
Images
Visual representations should never be the only means of showing an idea. Making sure there’s equivalent text will allow colour blind and visually impaired people to still have access to the same information through tools such as device speech, enlarge to custom sizes or read on braille devices.
Tips:
- Be sure to label every image
- Text within images should be avoided, although if there is no alternative then you can use ALT labels (Alternative Text) which translate the same information into typed text
- Add short descriptions next to your charts, diagrams and illustrations
- When using audio and video files, add a short text description next to them
- Use labels on your forms, input and other user interface elements.
See it in action:
News channels need to be especially careful with making sure information is clear and accessible to everyone. On The Guardian’s website, you’ll find that all pictures and videos are followed by a description.
Text
People with dyslexia, autism or low vision have to put in additional effort when reading text content on a website. Cutting down on overly long content and making it more readable is a general requirement that will improve the user experience for everyone.
Tips:
- Create content that is concise, clear and simple. Break it up with subheadings, images and videos, as this makes content more dynamic and easier to read.
- Ensure your text is set at a readable size. Although there is no universal rule as it depends on the actual font, the device and the reading angle, you can find very good tips in this article. If you want to play it safe then we recommend a minimum size of 18px.
- Test whether you are following contrast standards between text and its background, using tools such as Colorsafe and WebAIM’s Contrast Checker.
- As mentioned above, images of text should either be avoided or accompanied with matching ALT text.
See it in action:
Apple is the classic example of minimal design, in which they apply text standards for accessibility by keeping it short and concise.
Colour
When highlighting or assigning interactions to UI elements, colour should never be used as the only distinguishing element. This will avoid creating perception barriers to people with sight disabilities – people who are colour blind (1 in 12 men / 1 in 200 women), have low vision (1 in 30 people) or are blind (1 in 188 people). Jesse Hausler, the Accessibility Specialist at Salesforce, provides some valuable advice in his post on what every designer needs to know about accessibility.
Tips:
- Use colour to highlight or complement what is already visible
- Use text, shapes or sizes together with colour to convey information (for example, use a cross next to your red error message);
- Choose content/background colour combinations which provide sufficient contrast
- When designing forms, make sure borders and labels are clear and visible
See it in action:
TransferWise’s forms have clear borders and symbols that complement their meanings.
Multimedia content
A great characteristic of the web is how it allows us to have control over time and speed. So why not give users full power to do so? Although people with hearing and learning difficulties will benefit the most from these tips, they will also provide a better experience for everyone else.
Tips:
- Allow users enough time to read and use content.
- Give the option to pause, stop, or adjust the volume of audio on multimedia content
- If you have audio background, have the option to turn it down or mute
- Use subtitles on videos
See it in action:
TED not only includes the option to have video subtitles on every one of their videos, but also provides transcripts and footnotes.
Interaction
Interaction elements are usually the features that you are aiming to draw the user’s attention to. Ultimately, you wouldn’t want someone to miss a button or misinterpret the information on a form. These interaction elements can sometimes be challenging for people with motor related disabilities.
Tips:
- Enable visual focus indication for keyboard navigation
- Make primary elements visible, not just on hover; this is a limitation for assistive software, since it can only read items that are visible on the screen
- Help users avoid and correct mistakes, for example by using predictive text on forms
- Make sure your clickable hotspots are large to avoid demanding precision
See it in action:
Twitter’s hover and keyboard focus provides a text explanation for each of the icon’s functions.
Get creative!
Now that you have the main tools to create a website that is inclusive, you can proceed with the creative process. Designing for accessibility doesn’t mean that you’re limiting your creative freedom. Since this is something that not everyone is doing, you’ve got plenty of room for experimenting!
It may take a little longer at first to try including all these features into your designs, but you’ll get used to them in time and eventually they will become natural specs for your projects.
