Designing For Accessibility
Because you give a damn.
Before you go...
We don’t mean to brag, but our monthly newsletters are pretty damn good. They’re filled with useful information and how to's to help you grow your business. So do the smart thing, sign up below to get them in your inbox.
No spam, we promise!
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 being 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 for 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 color blind.
It can be easy for non-color 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 unaccessible 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 wheher your design is colour blind accessible there are lots of tools availabe 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.
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 colors and styles that contrast against each other, as well as against any background colors you may use in your design scheme.
This will ensure that no matter what background color or image you choose, the colors used in your text will stand out enough so they don’t blend in with their surroundings.
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 scentence, 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 desiging 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 to those who can hear well. With the main one being the need for captions on audio or video content.
This can be done through 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 using that transcript for your captions.
Captions aren’t just a good idea for helping those with accessibiloity 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 color.
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 the Userway widget.
It’s a tool thant 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.
Accessible Design Benefits Everyone
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!
We hope that this article helps you to create your most accessible design yet.
If you liked these tips, be sure to share them with your friends or colleagues and make sure you sign up for our monthly newsletter below for more articles like this.
Optimising an image is a process where you create a top-quality image whilst maintaining the smallest file size you can. It’s not an easy job but it is vital for any website, especially an e-commerce site as they are hugely image reliant.
If you really want your eCommerce site to succeed, and why wouldn’t you, then there are some key features that should be included and we’ve compiled that list for you.
You should be analysing your site regularly to make sure it’s delivering the best user experience for your target market. In turn, delivering the most leads and sales. But, if you’re not used to it, it may be hard to work out what to look at when you start to analyse your website.
This is probably one of the most common questions we get asked. So we’ve broken down what you need to factor into your new website budget.