Unique shapes showing different colour ratios

The fundamentals of designing for accessibility

Designing for accessibility is about making the digital world brighter and more inclusive for all people. Here are the key ideas and guiding principles for accessible design.

Thom Bransom

By Thom Bransom, 1 December 20216 minute read

Designing for accessibility is how we ensure the digital experiences we create do not exclude those with different abilities. It's about adopting a mindset of inclusivity to design solutions that can be accessed and enjoyed by all people, including those with visual, auditory, cognitive, physical or speech differences. 

The key idea about inclusivity, from a design perspective, is that people with different abilities need to access, understand and interact with information in different ways. So the design process needs to approach a solution from a multi-ability perspective. Luckily, there are comprehensive industry guidelines to guide thinking and provide practical solutions. 

Web Content Accessibility Guidelines 

The Web Content Accessibility Guidelines (WCAG) are the current standards for accessible design best practices. They are published by the World Wide Web Consortium (W3C) – the main international standards organisation for the internet. W3C regularly publishes updates to the guidelines, which cover how to make websites, apps, and augmented/virtual reality environments compliant across the following key focus areas:

Perceivable
Making content accessible for all users by providing text alternatives for non-text content, using simpler layouts, and separating foreground from background effectively to make text easier to read.

Perceivable accessibility principles. This image demonstrates the difference between bad and best practice when designing a distinguishable visual language between UI buttons.

Understandable
Digital products should be organised in ways that are simple and predictable to navigate, and help users avoid and correct mistakes. Content should be readable and easy to understand.

Understandable accessibility principles. This image demonstrates the difference between bad and best practice when including logical terms within UI buttons.

Operable
Making sure websites are easy to navigate, with all functionality available from a keyboard. Users should also be given enough time to read and use content.

Operable accessibility principles. This image demonstrates the difference between bad and best practice when positioning elements in an interface for users to engage with.

Robust
Websites and other digital assets should integrate easily and effectively with tools and technologies that assist people with a range of disabilities.

Robust accessibility principles. This image shows the examples of tools and technologies available for users enabling them to interact with digital experiences.

It’s important to note that people experience a wide range of visual, auditory, cognitive, physical and speech disabilities – and to varying degrees and for different reasons. This makes it challenging to cater effectively to every individual user. The WCAG guidelines are just that – a guide, not a prescription to be followed to the letter. Ultimately, the design decisions and implementations are up to the designers and the development team. However, the WCAG documentation gives clear guidance about appropriate accessibility solutions.

Design solutions to enhance accessibility

Below is a brief overview of some design solutions that improve accessibility compliance.

Visual accessibility

Visual disabilities range from mild to total loss of vision in one or both eyes, colour blindness, and partial sight such as tunnel vision.

People with visual disabilities generally need content to be presented in forms that are more usable to their needs. Some examples include:

  • Adjusting text size and images
  • Text to speech synthesis of content
  • Reading text using a refreshable braille display (an electronic device that can be connected to a computer to enable content to be read using braille) 
  • Audio descriptions of video
  • Customisable fonts, colours and spacing
  • Consistent, predictable and simple navigation mechanisms and page functions
  • Coding compatibility with assistive technology.

Auditory accessibility

Auditory disabilities range from mild to total hearing loss in one or both ears, and auditory disturbances which may allow people to hear some sounds but not others.

To access digital content effectively, people with auditory disabilities rely on some of the following:

  • Transcripts and captions of audio content
  • Options to stop, pause and adjust the volume of audio content
  • Media players that display captions and allow text and colour customisation of the captions
  • High-quality foreground audio that is clearly distinguishable from background noise
  • Using simple text, graphical representations of information and incorporating sign language to supplement important information that is difficult to read.

Cognitive, learning and neurological accessibility

Cognitive, learning and neurological disabilities affect people in many different ways including neurodiversity, behavioural and mental health disorders. They may impact how well people hear, move, see, speak and understand information, however, they do not necessarily affect the intelligence of a person.

The following solutions make digital content more accessible:

  • Clearly and logically structured content and navigation
  • Consistent labeling and treatment of forms, buttons and other content types
  • Options to suppress distracting content such as animation, blinking and flashing 
  • Simple, short, concise text and scannable content
  • Predictable and consistent link targets, functionality and interactions throughout the site
  • Different ways to navigate websites such as menu navigation and search.

Physical accessibility

Physical disabilities are sometimes called ‘motor disabilities’ and include weakness and limitations of muscle control, joint disorders (such as arthritis), physical pain, paralysis and missing limbs.

Improving digital accessibility for people with physical disabilities may include:

  • Designing for specialist accessibility software and hardware in mind (such as screen pointer, mouth stick or other aids)
  • Incorporating large clickable areas into the design
  • Including voice recognition, eye tracking, and other approaches for hands-free interaction
  • Full keyword operation and support
  • Consistent, predictable and straightforward navigational mechanisms and page functions.

Speech accessibility

Speech disabilities include difficulty speaking in a way that is easily understandable by others or by voice recognition software. 

People with speech disabilities need some of the following solutions in order to effectively use digital products:

  • Text-based chat options rather than providing only telephone numbers as a means of communication
  • Keyboard or mouse alternatives to voice-based commands.

Why designing for accessibility matters

If we don’t acknowledge the diverse accessibility needs of people, then the experiences we design are limiting. If we are not intentionally inclusive, then we will be unintentionally excluding people who need to access the digital experiences we create. This is an enormous problem because there isn’t really a barrier between our digital lives and our ‘real’ lives anymore. Excluding or limiting people in digital environments, excludes them from engaging with the ever-changing world around them. 

Google values accessibility too

Another important point about designing for accessibility is that Google has started factoring a site's accessibility score into its SEO algorithm. This means highly accessible sites will be rewarded in Google rankings and low-scoring sites will be penalised. As the understanding and empathy for all user requirements increases, the potential for commercial gain increases too. Delivering experiences that can be accessed by more people will translate into a higher return on design investment.

Previously, accessibility compliance was seen as an afterthought or a box to tick towards the end of an engagements but with the emergence of HCD principles we start every project with accessibility compliance as a non-negotiable.

It’s a move that not only reflects the importance of inclusion but is also in line with commercial realities. Almost 20 percent of Australians and 24 percent of New Zealanders live with some type of disability. So being inclusive means more traffic, more customers and greater conversion rates.

The implications for designers

Designers are at the forefront of both emerging digital trends and new technologies. The challenge for designers is to translate and apply their knowledge of accessibility best practices to new environments and solutions. This requires both a degree of technical knowledge and an empathic understanding of the diversity in perception and ability among people. 

Designers must rise to the challenge to give greater focus to the needs of the end user, rather than prioritise the design possibilities of the technology. Designing to the WCAG guidelines is a great start, but designers must also focus on testing their work among real user groups with diverse abilities.

Accessible design is human-centred design 

Designing for accessibility is simply human-centred design, which brings our practice more realistically into line with the diversity of human ability and disability. It’s a way to grow a website’s user base and potential and it’s also a way to make the digital space a more welcoming and inclusive place. While people’s individual experiences online will be unique, the aim should be to make them rich, rewarding and satisfying for everyone.

Want to take the design of your site to the next level?

Let's talk!

Keep Reading

Want more? Here are some other blog posts you might be interested in.