7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. Accessibility

Making the Web Accessible for Everyone With Inclusive Design and Diverse Personas

Scroll to top
Read Time: 10 mins

The importance of creating a web that is accessible to anyone and everyone has always been emphasised by the inventor of the World Wide Web itself:

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect” – Tim Berners Lee

This article will therefore explore how we can better understand accessibility and people through the use of “diverse personas” in our design process, helping us make products that are more inclusive of the wider market. We will see how accessibility can affect anyone at any time in their lives, and how disabilities are in fact very common. 

For instance, even a sports injury such as a broken wrist can be classed as a disability, bringing with it accessibility issues, as the person may now struggle to use a computer mouse. 

First though, since accessibility is often confused with usability, let’s start by looking at the difference between the two.

Accessibility vs. Usability

In short, “accessibility” ensures people with disabilities can access the same information from a system as everyone else, and also get the same benefits. Whereas “usability” is a quality attribute that measures how easy a user interface (UI) is to use.

The difference here is important, because if a website is not accessible, usability cannot even exist, since a user experience is not possible. As DigitalGov put it:

“usability depends on accessibility” – DigitalGov

This highlights that a great level of accessibility can be a solid foundation for good usability, and a better product for everyone. The W3C (World Wide Web Consortium) provide a more complete definition of accessibility when it comes to the web:

“For the web, accessibility means that people with disabilities can perceive, understand, navigate, and interact with websites and tools, and that they can contribute equally without barriers.” – The W3C

Accessibility Can Affect Anyone

It’s important to note that a “disability”, in the definition above from The W3C, isn’t just limited to blind people using screen-readers, as lots of us can be quick to jump to. Actually, disabilities also include a wide range of impairments.

In fact, Adobe state that nearly 20% of the U.S population have a disability, and almost 75% of people over the age of eighty do too. The broader concept of what can be classed as a disability means that accessibility can affect almost anyone, as shown by the following common disabilities:

Common Disabilities

  • A visual impairment can also be color blindness, or limited vision–something which can easily happen as we grow older.
  • Disability categories (according to Adobe) also include temporary disabilities, such as a broken wrist that makes it difficult to use a mouse.
  • Paul Boag adds that we can all suffer from disabilities at some point in our lives through events which are often unavoidable, such as sports injuries, minor operations or every day accidents.

All of this highlights the importance of including accessibility in the design process, as doing so enables us to create products that work for a more diverse set of people. A notable approach on incorporating accessibility into the design process is through “inclusive design” (also known as “universal design”, or “design for all”). Let's now explore how inclusive design is useful, and ways of applying it.

Introducing “Inclusive Design”

If a product is to be accessed by a mainstream audience, such as on the web, an inclusive design approach ensures that the needs of the widest number of consumers are met when creating a product or service.

As outlined by the W3C, inclusive design applies to “all people whatever their abilities, age, economic situation, education, geographic location, language, etc.” So by addressing the needs of the widest possible audiences, inclusive design overlaps with web accessibility, ensuring products are accessible to everyone.

Improving User Experience for Everyone

A great benefit of inclusive design is that it not only improves a product’s user experience for those with disabilities, but for everyone else too. For example, an accessible website is likely to be easier for everyone to read, not just someone who is partially sighted.

The W3C emphasise this when saying that 

accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO).” – The W3C

Now we know what inclusive design is, we can look at how to design for inclusivity, by using “diverse personas”.

Diverse Personas for Inclusive Design

A persona is a generalised representation of a typical user of your product or service, and is usually based on research carried out on real people that can validate any possible assumptions made.

Personas can evolve with accuracy throughout the design process as new research emerges. They can be important for validating design decisions, prioritising features, and guiding your team. Here is an example:

Jerry Jones Persona exampleJerry Jones Persona exampleJerry Jones Persona example
Persona Example: Jerry Jones, Software Developer

As seen in the example, a persona can be made up of the following attributes, which help to create an imaginary person:

Common Persona Attributes

  • Name: naming your persona makes them more real, and you may even find your team referring to the user through this name.
  • Motivations: why would the user use your product?
  • Goals: what do they want to achieve, and how can your product help?
  • Frustrations: what problems does your user have with certain tasks?
  • Demographics: age, gender, location, occupation.
  • Picture: giving the user a face makes them more real and relatable.
  • Quote: what memorable quote sums up your user and the problem you want to solve for them?

The more realistic a persona is, the better your product can be, which is why it’s important to create diverse personas. As explained throughout, disabilities are fairly common, so overlooking them can lead to a lot of user frustration and exclusion–which in turn can reduce the commercial success of a product (as explained in The Inclusive Design Toolkit by the University of Cambridge).

Diverse Personas

Diverse personas can help us understand how people with disabilities might use products differently, or interact through different means.

The pyramid model of diversity shown below can help benchmark the range of disabilities that are reasonable to target for inclusive design. The model shows how ability can vary within a population, starting from people with no difficulties, moving upwards to severe difficulties.

Pyramid model of diversity Image Inclusive Design ToolkitPyramid model of diversity Image Inclusive Design ToolkitPyramid model of diversity Image Inclusive Design Toolkit
Pyramid model of diversity (Image: Inclusive Design Toolkit)

Whilst the pyramid aims to include the less able, it’s accepted that this can be difficult with those at the very top of the pyramid needing more socialist solutions.

Making a Persona Diverse

Referring back to the persona example of a user called Jerry Jones, it’s noticeable that there is no mention of the user’s ability (or disability). Therefore, to make the persona diverse, we can add the extra attribute, “ability”. Whether Jerry has a disability or not, this ability attribute can help start us to think about inclusivity, when creating personas for different users. As well as ability, the following attributes can be added to encourage more diversity in personas:

Attributes for Diverse Personas

  • Ability: the level of ability the user has–do they have any impairments?
  • Aptitude: how experienced is the user with the web? Do their abilities create any specific difficulties when using a computer?
  • Attitude: what are their attitude towards life, or towards the web?
  • Access points: does this user need assistive technologies to access the web?

Modifying the example persona of Jerry with these attributes would result in something along the following lines (see the additional attributes on the right):

Persona modified for diversityPersona modified for diversityPersona modified for diversity
Persona modified for diversity

By considering these additional attributes in the persona, we can see that Jerry suffers from eye strain, and relies upon keyboard input, as opposed to using the mouse. This provides leverage to make certain design decisions with regard to input, making the end product more accessible to the wider audience. 

Let’s now go a bit deeper into deciding upon the type of abilities to look for when creating diverse personas.  

Start With Ability

When adding the user’s ability to create diverse personas in web accessibility, we can start by considering the impairment categories outlined by W3C:

  • Auditory
  • Cognitive
  • Neurological
  • Physical
  • Speech
  • Visual

After the ability is defined, it can often help us understand the other attributes listed above. For example, if the user has an upper limb impairment, they may be unable to use the mouse input, and be better suited to use a different input device such as the keyboard.

Consider the Level of the Disability

The level of the disability can range from mild to severe, and can determine the difficulties the user faces when using a product or service. Here are a couple examples of the range of disabilities that are possible for a couple of the impairment categories listed above:

  • Auditory disabilities can range from one ear to both ears, and from “hard of hearing” to “deafness”.
  • Physical disabilities can include limitation of muscle control (e.g. causing involuntary movement), joint problems (limiting movement), or missing limbs.
  • Cognitive disabilities can impact how well people understand information. They involve any disorder in the nervous system, affecting how well people can hear, move, see, speak and understand information.

Understand the Barriers Created by the Disability

Each disability can bring different types of barriers and aspects that must be considered when designing for inclusivity.

  • Auditory barriers can include all types of audio content, meaning videos that make great use of sound become inaccessible to the user.
  • Physical barriers may include websites that don’t provide full keyboard support, or unpredictable navigation systems.
  • Cognitive barriers may include page layouts that are difficult to follow, or large amounts of text with few useful images to aid understanding.

A complete list of disabilities and barriers can be found in the W3’s guide on Diversity for Web Users.

Consider Assistive Technologies and Enhancements

When people are faced with barriers due to their level of ability, lots of common yet simple enhancements exist that can make a product accessible.

For example, enhancements used to close auditory barriers include adding captions to videos, or using transcripts that can be read instead of listened to.

As previously mentioned, such improvements not only help those hard of hearing, but often improve the user experience for everyone, as highlighted in this article by Hubspot, titled Why Your Facebook Videos Need to Be Optimized for Silence.

They argue that there are situations where people (regardless of their level of ability) will not watch videos with the sound on, such as in a public setting. In these situations, subtitles make the information conveyed by sound accessible to the eyes. In fact we have started to see this in many videos today, as shown in the following image:

A video with caption to overcome auditory barriers (@foodvideos)

Examples of Diverse Personas

There are lots of great examples of diverse personas out on the web that put many of the ideas in this article into practice. Below are a few good examples you can follow when creating diverse personas of your own:

Barclays Diverse Personas

Barclays have put together a full collection of personas, that include a wide range of disabilities such as bipolar, Cerebral Palsy, dyslexia, and other impairments. Each persona also contains a detailed bio and lifestyle description, which is useful in understanding the disabilities.

Barclays Diverse PersonasBarclays Diverse PersonasBarclays Diverse Personas
Barclays Diverse Personas

A Web for Everyone

The book, A Web for Everyone “Designing Accessible User Experiences”, has a set of excellent diverse personas, some of which are listed below:

Trevor A high school student with autismTrevor A high school student with autismTrevor A high school student with autism
Trevor: A high school student with autism
Emily Cerebral Palsy living independentlyEmily Cerebral Palsy living independentlyEmily Cerebral Palsy living independently
Emily: Cerebral Palsy, living independently
Jacob A blind paralegal in a law firmJacob A blind paralegal in a law firmJacob A blind paralegal in a law firm
Jacob: A blind paralegal in a law firm

The full collection, along with detailed descriptions, can be seen in the UX Mag’s preview of the book.

Next Steps

To make personas more concrete, it’s useful to create “user scenarios”, where stories can be created to explore a typical day for your user. This can help identify more pain points that can be solved in your product. Good luck making your own diverse personas!

Further Reading

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.