How to design websites for people with disabilities in 2017

Image: iStock

An in-depth guide to UX and design approaches that benefit people with visual impairment - whether for medical reasons, neuro-disability or the natural ageing process.

Disabled people can easily be neglected when it comes to online user experience (UX) or mobile app interface design.

But despite preconceived ideas, designing with disabled consumers at the forefront of innovation will make a product even more accessible to the wider public. 

For any web designer it’s important to understand where web accessibility for people with disabilities is failing, why it’s important to improve standards, and why it’s beneficial to everyone beyond moral motives. 

We explore the current areas where web interfaces struggle to cater to people with mild, moderate and serious disabilities, and offer steps that provoke inclusive thinking and designing. We also suggest organisations to turn to for testing and further advice.

But before moving on it’s important to define exactly who we're referring to as 'people with disabilities' in the context of UX and design. In this feature we focus on the partially sighted, neuro-diversity (such as dyslexia or the autistic spectrum), hearing loss, the elderly who suffer impairments, those with mobility or cognitive impairment (such as epilepsy), manual dexterity problems and those with learning disabilities.

The ThinkDesignable Collective encourages design and media industries to think about diversity. This feature follows on from the collective’s conference - Designable 2016 - which brought together designers, creatives, marketers and campaigners to discuss ways of making media and design more inclusive.

Why designing for disability benefits everyone 

The Royal National Institute of Blind People (RNIB) head of solutions, strategy and accessibility Steve Tyler says good accessibility also means good design. 

“If a site is navigable, uses site elements correctly, and offers a genuinely customer-centred experience, the further creation of apps that interrogate the site, search engines that search it, and the plethora of devices that are out there accessing it, can all work properly,” he says. 

Similarly, Open Inclusions research director Tom Pokinko says participatory design with disabled people and the elderly helps to create better products and services for everybody, which leads to a better brand experience overall.  

“They often come up with very creative solutions to specific design problems because they are used to innovating within and around design limitations. And the challenges they face are more often than not more obvious version of the same or similar challenges faced by non-disabled users.

“For example, websites and emails with small or low-contrast fonts are hard to read for people with visual impairments but also for people with tired eyes or people who experience glare on their mobile phone screen. 

“Similarly, unclear messaging and visual design with confusing layouts or distracting visuals make web pages difficult to understand for dyslexics and people with cognitive impairments, but also impact the user experience of non-disabled visitors, especially those who happen to be distracted, stressed, needing to find information in a hurry, or who are not native language speakers,” he says. 

How to think ‘disability first’ 

Elizabeth DePoy and Stephen Gilson are authors of Design and Branding for Disability.

They looked at disability symbols used in public spaces, such as an ear with a line through it to denote assistive listening. They came up with new symbols that avoid referring to body parts but focused on giving general directions for everyone rather than singling out specific disabilities. 

“This allows choice. It doesn’t say who should park here or use the symbol, but it gives attributes. You know if you go up in the elevator where it is or if you go left or right,” says Elizabeth. 

The pair describes a creative process that begins with awareness of the need for change, or what they refer to as “undesign”. 

“Undesign is actually an existing school of thought and practice…that invokes criticism first and then informed revision to achieve a balance between aesthetics and function. This creative yet forensic process is necessary for clearing thought debris so that a new canvas is left for redesign,” says Elizabeth. 

They aim to follow five redesign principles built on a foundation of design theories combined with their own: seamlessness, scepticism, elegance, proximity and polyphony. 

  • Seamlessness is seen in the example of signage redesign. Highlighting features of an environment avoids “carving humans into segments”, but instead places environmental features in the spotlight. 
  • Elegant design refers to inconspicuous fit, quality and precision. 
  • Healthy doubt and persistent asking 'why this over that?' characterises the principle of scepticism. 
  • Both proximity and polyphony emerge from co-design approaches in which those who are the object of a design process are part of it. 

But alongside incorporating these principles into a brand philosophy, there needs to be practical manifestation.

The current situation

People with disabilities and the elderly represent large and quickly growing consumers segment, according to Tom. The increased purchasing power of these consumers makes for a compelling business case.

The Click-Away Pound Survey 2016 by Rick Williams and Steve Brownlow from disability and diversity consultancy Freeney Williams explores the online shopping experience of customers with disabilities and the costs to businesses of ignoring them. The disabled participants vary on level of competence and personal conditions, but include those with visual and hearing impairment, manual dexterity and neuro-diversity. 

Based on the survey’s findings, around 6.1 million disabled internet users in the UK have access needs – and 71 percent of disabled customers with access needs will click away from a website they find difficult to use. Only 7 percent would phone a helpline and 11 percent would get help from someone else. 

But what’s important for brands to note is the estimated spending power of £11.75 billion in the UK alone that they miss out on when this happens – around 10 percent of the total UK online spend last year.

Eighty-two percent of customers with access needs would spend more if websites were more accessible, the survey says. 

But as well as proposing a compelling business case, function for the disabled at the forefront of design can benefit everyone.

Essentially, the survey indicates the silent customer cannot be assumed to a satisfied customer. 

And as digital culture becomes dominant, access for disabled people becomes an issue that permeates all organisational levels, functions, systems and products. 

Image: iStock

How disabled people access websites

To have an understanding of what accessibility issues disabled people have, it’s important to know how some people with more serious conditions access a website. 

Over half of the respondents in the Click-Away Pound Survey used some form of assistive technology (AT) to help them interact with computers.

The report mentions four main assistive technologies: screen readers (58 percent of all respondents), screen magnifiers (14 percent), dictation software (13 percent) and refreshable braille (5 percent).

Other examples of AT include voice over features on all Apple devices, the Android phone’s inclusion of Google screenreader TalkBack, and Microsoft’s Narrator screenreader. 

Some users might even need a variety of these, and their ability to use them can depend on their device and its OS, programmes the user wants to use and the hardware it’s installed on. 

But although AT is helpful for those with visual impairments, website design plays a key role in access and how well these assistive technologies function. 

Online access barriers  

Seventy-three percent of those with access needs experienced barriers on more than a quarter of websites they visited for the first time, according to the Click-Away Pound Survey.

Crowded pages with too much content was the most common barrier – 67 percent of participants said it was the biggest website issue they face. 

This was followed by poor link information and navigation, filling in forms, distracting moving images and graphics, and poor legibility (colour contrast and text layout).

Of those who use screen readers, 86 percent said they found websites difficult to use with their software. 

“Often, not only are inaccessible sites not designed correctly but use a lot of scrolling imagery, advertising, and clutter. This causes screen reading technology to be fooled about what to focus on,” says Steve. 

“A great deal of processing power and site rendering has to happen on devices where over-complicated systems are at work.” 

The survey shows that people who have difficulty using a site are unlikely to give it a second chance where there’s an alternative, but points out that these accessibility issues can have negative impacts on anyone. 

Image: iStock

How to provide better web accessibility 

Rick Williams from disability and diversity consultancy Freeney Williams suggests that those in charge of websites should establish a house guide, which sets out clear standards of a brand’s expectations for site developers and designers. 

He suggests those standards and guidelines should then be used as a management tool to check it has in fact, been done. 

Guidelines could cover issues such as colour contrast, the use of the alt-tag and form field labels.

Developers and designers should make sure colour contrasts used on sites fall within international standards so it can easily read by those with a visual impairment or dyslexia. 

“Ensure the alt-tag is used properly so those who use AT can understand what a given link might actually do if activated,” says Rick. 

“Avoid graphic capture, too much text on a page and make sure the heading structure is used properly as this is often used as a shortcut way of navigating a page.” 

Where to learn more about design and disability

Web Accessibility Initiative 

The Web Accessibility Initiative (WAI), which in turn has released Web Content Accessibility Guidelines 2.0, also known as WCAG2.  These recommendations detail how to make a website interface accessible for all. 

This covers good practice about web design, creating alternative text descriptors for images, using navigational systems like headings, lists, and how elements on the page should function. This ensures that screen readers operate properly. 

A first port of call should be a visit to the easy checks page of the Web Content Accessibility Guidelines. 

The checks cover page title, image text alternatives, headings, colour contrast, resizing text, keyboard access and visual focus, moving, flashing or blinking content, multimedia alternatives and basic structure.

From here, it’s up to brands to make a conscious decision on whose responsibility it is to make sure the brand web interface includes the disabled.

A recent report by Forrester Consulting, on behalf of Microsoft, found 60 percent of organisations rely on “developers following guidelines” to carry out accessibility of their content. 

Only 42 percent reported using a content accessibility checker, and only 25 percent said they have strong governance in place. 

Although there’s no straightforward answer - it could be the responsibility of customer engagement, PRs, marketing, communications or IT development - it should be clear who gets the final say on whether a website’s design meets the WCAG2 guidelines. 

Furthermore, as the Click Away Pound Survey suggests, a brands compliance with WCAG2 must be worked alongside expert interpretation and testing by users with impairments. 

Below are organisations and consultancies that specialise in delivering research, user tests and methods to develop a brands user experience for the disabled.

Open Inclusions

Open Inclusions is a consultancy that specialises in providing research-based innovation solutions for clients who need both digital and physical accessibility.

Brands can get in touch via a call or email, and be followed up by a face-to-face meeting and a process of how to make their brand UX as inclusive as possible. 

Freeney Williams

As mentioned earlier, Freeney Williams is a consultancy that works to enable organisations to recruit, employ and retain disabled people in the workforce, develop and sell products or services that are accessible to all customers, and meet their duties under the Equality Act 2010.

The consultancy also offers a free disability audit to assess your level of disability competence.


There are currently over two million blind and partially sighted people in the UK and this is set to double by 2050. The Royal National Institute of Blind People wants blind and partially sighted people to be able to use the web, just like other people can.

RNIB provides consultancy services as well as accreditation of well-designed sites. The organisation offers specialist guidance and, most importantly, user testing and observation. 

RNIB also offers accessibility solutions to businesses, you can find out more here.

Steve Tyler from the RNIB says the notion of the internet from its inception has been that ability or disability shouldn’t be a barrier.  

“Today, people's expectations of technology have grown exponentially.  With the advent of products like Amazon’s Echo and Google Home, delivery of information in the way you want it when you want it is here. Sometimes it’s convenient to use keyboards or a mouse, others times you want to speak to someone," he says.

“Sometimes you are carrying things or driving, which means you want easy to access information. Well-designed sites allow all of this from a single source.”

Home Office Digital 

Home Office Digital is an organisation that designs, builds and develops services for the department and for government. 

The team consists of professionals in product development, digital policy and data availability, and they write about their work on this blog.

In a recent updated post, Home Office Digital released six posters on the Do’s and Don’ts on designing for accessibility in the areas of low vision, deaf and hard of hearing, dyslexia, motor disabilities, users on the autistic spectrum and users of screen readers. 

Karwai Pun designed the posters. She’s an interaction designer and part of an accessibility group at Home Office Digital, leading on autism. The posters cover colour contrasts, legible font sizes and linear layouts. You can print the posters out here.

Rufus Leonard

Rufus Leonard is an independent agency that works with organisations to produce cross-channel brand-led customer experience.

Rufus Leonard aim to produce brand design, as well as developing business systems and manage business transformation. 

It designs and builds technical ecosystems that enable brands to deliver inclusive user experiences.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...