Designing For Accessibility

The idea that people with disabilities are also potential customers isn’t fantasy, it’s fact.

Yet as technology has evolved, some designers and developers still aren’t considering how their work impacts users with disabilities.

Accessible design isn’t about being polite or politically correct; it’s about doing right by your users—all of them.

By considering accessibility in design we can create better experiences for everyone.

This article guides you through the key things you need to know to create an inclusive design and highlights several key things to consider for people with specific disabilities and neurodivergence.

Understand the Problem

If you’re new to the concept of accessibility and don’t know much about it, here’s a basic overview of some of the key areas.

Accessibility is the practice of making content available to people with disabilities. And a disability is any condition that limits a person’s ability to access or use particular things in their life.

Usability refers to how easy or pleasurable something is to use. For example, if a website has good usability, then it’s just as easy for people who aren’t disabled to navigate as it is for users with disabilities.

Universal design means designing so something can be used by everyone regardless of their abilities or limitations.

Now that you know the basics let’s get into the key things you need to consider when designing for accessibility.

Be Careful with Colour

If you want your design to be accessible to everyone, you need to do your research and make sure that your content is usable and understandable by everyone—not just users with typical vision.

One group that often gets left out of the conversation on accessibility are people who are colour-blind.

It can be easy for non-colour-blind people to forget how difficult it can be for them because we don’t see anything wrong with what we’re creating.

A design may look absolutely fine to you, but worst case, it could be impossible to read by someone who is colour-blind.

Poor contrast between colours is the main reason why a design won’t be colour-blind accessible. In fact, it can make a design inaccessible even to those with good eyesight. This is because poor contrast makes it hard to tell where one element of the design ends and the other starts.

If you’re unsure whether your design is colour-blind accessible there are lots of tools available online where you can compare colour choices or that will scan your design/website and tell you if you have any issues. But a super simple trick can be to simply squint at it or to desaturate the design. This will help you to see if there is a high enough contrast between your various elements and whether it’s accessible.

Easy to Read Text

Making sure that your text is easy to read can take a bit of effort, but it’s worth the time and energy. Here are some guidelines to help you.

Font Size

Kind of obvious, but use a font size that is large enough to read.

The average adult reading speed is 200 words per minute (wpm), so an ideal font size for body text would be 16px at minimum, but 18-20px might be better if you want to make sure people can easily read your content.

Colour & Contrast

As mentioned above, use font colours and styles that contrast against each other, as well as against any background colours you may use in your design scheme.

This will ensure that no matter what background colour or image you choose, the colours used in your text will stand out enough so they don’t blend in with their surroundings.

Font Weights

Light font weights tend to appear thinner than regular or bold weights meaning they are more difficult for adults with poor vision and young children who may have shorter attention spans due to ADHD or Autism Spectrum Disorder diagnoses (ASD).

Bolder and simpler styles require less mental processing power from readers with cognitive disabilities such as dyslexia because they provide more visual clues about how letters relate to each other.

It’s best to choose typefaces based on legibility rather than aesthetics alone; this means avoiding script fonts whenever possible as these styles are not only hard for some users but are also difficult for automated accessibility tools like screen readers.

Avoid Using Justified Text

Justified text is easier to read on a screen than left-aligned text, but there are some circumstances where you might want to avoid it.

If you’re using justified alignment for the first time, you may find yourself dealing with line breaks in unexpected places. Meaning you’ll have to decide whether or not it will be worth your time and effort to correct this if it happens to your design.

In general, if your justified content is longer than 80 characters (including spaces), then it’s probably best not to use justified alignment.

Instead, opt for an alternative like left alignment which will allow each line of content to fit within an 80-character limit while still looking visually appealing.

Reasonable Line Lengths

We’ve covered this subject before in our article ’10 common website mistakes and how to fix them’ but let’s cover it again.

The longer the line of text, the more difficult it is for your brain to keep track of where you are in that particular block of text. This can lead to dizziness and headaches—and who wants that?

It’s a good idea to avoid long lines of text altogether. And no, we’re not talking about the length of a sentence, we’re talking about the physical length of a line on a page.

An easy way to understand this is to think about newspapers and magazines. Instead of writing across the full width of the page, they lay their content out in narrow columns. This is because it makes it much easier for people to navigate through the content and read it quickly, making it a more enjoyable experience.

Bite-Sized Content

Unless you’re designing a book you’ll want to break up large chunks of text into smaller pieces. This makes your content easier to deal with for people with learning difficulties such as ADHD and dyslexia.

A few ways to do this can be by adding headings and sub-headings or putting elements into box-outs, their own sections of your design.

Key Design Needs for:

People with Autism

Don’t rely on colour alone.

Don’t use animation for important content.

Write in plain English, avoiding jargon and technical terms whenever possible.

Make buttons descriptive.

People Using Screen Readers

Screen readers are used by people with visual impairments, dyslexia, low vision and colour blindness or physical disabilities (for example spinal cord injury).

They provide access to the web for blind or partially sighted people who use a keyboard to navigate the web independently.

Keyboard accessibility features allow these users to navigate websites efficiently using their preferred input devices such as a head mouse, sip-and-puff device or eye tracking technology.

Screen reader users rely on text content being read aloud through audio cues. When designing your website consider how it will be experienced by different types of user groups including those with impaired vision and hearing as well as those who are physically disabled.

People who are Deaf or Hard of Hearing

Deaf or hard-of-hearing people have different needs from those who can hear well. The main one is the need for captions on audio or video content.

This can be done by using an auto-captioning tool like Rev or Captionfish; having someone transcribe the content and then embed it into the site; or having a professional transcribe the content and then use that transcript for your captions.

Captions aren’t just a good idea for helping those with accessibility needs. Consider the fact that some people may be visiting your site at times or in situations where they can’t have the sound on. By not using captions you are potentially losing engagement from a much wider audience than just those with additional hearing requirements.

People with Dyslexia

As mentioned above, avoid long, continuous blocks of text by breaking it up into short chunks or paragraphs.

Use a clear font and text size that can be read easily. Your choice of font and size will depend on the type of content you are presenting, but generally speaking, you should use a larger font with good contrast against its background colour.

Boost Your Website Accessibility in 2 Minutes

Now, this isn’t a perfect solution, but if your website has accessibility issues and you’re not in a position to redesign and rebuild it just yet there are some tools you can use and one of those is the Userway widget.

It’s a tool that can be added to your website which allows users to adjust the design of your site based on their own personal needs.

It can be added in less than 2 minutes and it’s free.

Long Story Short…

In general, most people don’t think about accessibility when they’re designing.

But, designing for accessibility is not just about making things easier for people with disabilities. When you design for accessibility, you make it easier for everyone to access your content and engage with your brand. This creates happier customers and more positive word of mouth—bottom line: accessible design makes sense!