Posted by Roberta Scerri on in product design, product management, UX & UI

Designing Inclusive Experience on the Web

More than two thirds of the web is inaccessible to individuals with visual impairments. What are we going to do about it?

In February 2019 and 2020, WebAIM conducted an accessibility evaluation of the home pages for the top one million web sites using the WAVE stand-alone API along with other tools to collect site technology parameters. The results show quite a bleak picture of the current level of web accessibility for individuals with disabilities: complexities and errors on pages have increased from 2019 to 2020, increasing the percentage of pages with detectable errors from 97.8% to 98.1%. As per the graph below, the majority of these errors were low contrast issues, followed by missing alt text and empty links.

Graph and table showing the most common types of errors found on websites.
Graph and table showing the most common types of errors found on websites. From: https://webaim.org/projects/million/

The universal aim of digital accessibility practitioners is to create a world where digital experiences are equal to each individual, with or without disabilities. The core of equivalent experience lies in preserving the motive that you and your team set out with when you started building your website – including all the features and content encapsulated in it – while making it translatable into an equal experience for all kinds of users within your target market.

In an industry where the how often ends up trumping the why, there is an enormous need for context for understanding how design and code should be implemented with accessibility in mind. This can only be achieved through empathy, by asking questions such as: what are the daily barriers that individuals with accessibility encounter? What are our biases while we are developing or growing experiences, and how are they affecting the decisions that we take?

Working towards Equivalent Experience

Non-responsive websites which break when viewed on mobile devices are just one example of an inequivalent experience; other more slightly less obvious scenarios include – among others -websites or web apps which do not allow zooming in on text, cannot be navigated with a screen reader, or assumes medium to high level of experiences with the web or similar web apps in order to be used. 

Frustrating, inaccessible digital experiences take a toll on the person using them, leading to high cognitive load and a resulting drop-off, not to mention the emotional downturn since users have a tendency to blame themselves for not knowing how to accomplish a task, even though one of the principles of good user experience explicitly specifies that interaction with an interface should be intuitive.

The principle of universal design is a philosophy based on designing to be fully inclusive of everyone and these principles need to be ingrained in whatever we build.

By applying the following parameters to the design of your website, you will consequently improve its level of accessibility – and therefore – usability:

1. Cognitive – easy to understand

  • Have a clear site and in-page navigation.
  • Hyperlinks should be descriptive (for example: their destination)
  • Organise your content based on the inverted pyramid method
The inverted pyramid refers to a content structure where the most important information is presented first. It starts off with who, what, when and where, and is followed by supporting details and background information.
The inverted pyramid refers to a content structure where the most important information is presented first. It starts off with who, what, when and where, and is followed by supporting details and background information. Image from: https://bit.ly/3pwf889

2. Visual – easy on the eyes

  • A larger font size and comfortable line height make it easier for the user to read.
  • A colour palette with good contrast ratios not only aids readability and accessibility for those with visual impairments, but also helps to keep the reader in a state of flow.
  • Allow fast scanning by adding Skip to Content links

3. Auditory – easy to hear

  • Code semantically and label the information on your website at granular levels to allow your content to adapt to specialized reading modes and browser extensions.
  • Write succinct sentences in plain, simple language and phrase answers as complete sentences.
  • Provide Alt text should at a maximum of 15 words, and in the case of backgrounds or other image elements which need no alt text, leave without.
  • DOM structure should be in parallel with visual design.

4. Motor – easy to interact with

  • Headers and landmarks provide immense help when going through content within a page since they create a solid sense of hierarchy
  • Consistent application of colour can also help communicate what elements can be interacted with, as long as you make sure that colour is not the only determining factor.
  • Ensure that text content is written using text (not presented as an image), providing flexibility to be formatted and also be recognised by screen readers.
A quick walkthrough of how to check your website for accessibility.

Designing for the invisible

Screen readers have been around for a very long time – with two thirds using voice output and the rest going with braille – therefore it is not a new concept.

A good starting point for designing for the invisible is making websites text-to-speech (TTS) friendly. This method also implies that information needs to be labelled at a much more granular level, in order to help users find the information they are looking for more efficiently. This can be done via semantic mark-up like ‘speakable’, which is a Schema.org property (BETA), which highlights the sections of a webpage suitable for TTS conversion.

In this scenario, if the users ask their home speaker assistant what opinion Audioxide has about Origin of Symmetry by Muse, by simply labelling and structuring the website’s content better and via speakable the users listen to the album name, the artist, and the short review summary, sparing them time.
In this scenario, if the users ask their home speaker assistant what opinion Audioxide has about Origin of Symmetry by Muse, by simply labelling and structuring the website’s content better and via speakable the users listen to the album name, the artist, and the short review summary, sparing them time. Example from: https://bit.ly/3augxb2

Other conditions to consider when it comes to designing for accessibility are ADHD and epilepsy. Browsing experience should not have to be enhanced by using ad blocking technology because your website has too many flashing and moving adverts and animations going on at the same time. Apart from the fact that this is detrimental to users with the aforementioned (and similar) conditions, ads also cause websites to constantly auto-update to refresh the content, which inhibits users with screen readers from going through the websites’ content.

Washington Post asking the user to turn off their ad blocker or start paying up is a clear example of lack of concern regarding accessibility for their users.
Washington Post asking the user to turn off their ad blocker or start paying up is a clear example of lack of concern regarding accessibility for their users. Image: https://bit.ly/3dt1Cj8 

Is compliance enough?

Compliance with accessibility standards is a necessary – and in some cases, even legal – goal but it cannot exist in a vacuum. Unfortunately, the stipulated guidelines do not always get it right and with the world being in such a state of flux due to ever-emerging new tech, those standards need to be constantly updated and re-implemented.

As UX designers, empathy is ingrained in us, therefore it is in our remit to educate and guide our clients and co-workers towards understanding that: accessibility isn’t a checklist, standards are not a target and implementing accessibility measures should never be beyond product scope, because accessibility is all about people.

This is why it is essential that a number of the decision-makers within your team have lived experience of disability: to ensure that accessibility goals within your company are not pushed to the back-burner, but prioritised and supported by making decisions based on feedback from those who truly understand what inclusion and exclusion look like.