Accessibility & Design for All: Why Businesses Need to Care
It’s human nature for us to be attracted to colourful and aesthetically pleasing things. But, it’s easy to forget that we don’t all see or experience the same thing.
Have you ever struggled to read writing over a photograph, or been frustrated because you can’t hear a video in a noisy coffee shop? These may seem minor frustrations, but for some their online experience is an every day struggle.
Web Accessibility by definition means that people with disabilities can perceive, understand, interact and engage with websites and tools without barriers (Source: W3C). Indeed, the UK Equality Act of 2010 requires service providers to make reasonable adjustments to enable disabled persons access to their services.
Designing for all isn’t just for those with disabilities. It’s relevant for all your consumers. Why? Because you have seconds to make sure your message is seen and understood in an ever crowded online world.
Here are just some important points to consider:
Indeed, with the use of mobile phones, an ageing population and a time-poor audience, it’s essential to design with colour contrast in mind. Whilst a designer may want a site to look aesthetically pleasing, using a colour contrast checker like WebAIM’s colour contrast checker can help you make small adjustments to page elements.
Users will engage and digest information if content is readable. Readability, put simply, is about making content clear and easy to understand for your audience.
When choosing a font, look at the character separation and make sure there’s a large enough x-height. To achieve maximum legibility the character stem stroke should be 17–20% of the x-height.
Sans-serif, Roman fonts and Monospace are generally easier to read on screens, while fonts like Arial italic are found to be difficult for those with dyslexia. In this example you can see a clear difference between the capital ‘I’ and l using the Verdana font.
Line spacing and line length are also important aspects to consider. Line spacing is the vertical distance between lines of text and usually measures as a percentage of font size. It may seem obvious, but too little line spacing or too much line spacing will be immediately obvious to your reader. See my illustration below. Ideally, aim for between 130% — 150% as different fonts require different spacing.
There’s also a lot of research on the optimal number of characters per line for block text. Most suggest aiming for between 50–75 characters per line, but this will vary. The key is to have good responsive web design for multiple devices and window sizes, so that suitable widths can be set.
Take a look at the Golden Ratio Typography Calculator — a brilliant tool that uses mathematical formulas to calculate the optimal font size, line height, and characters per line for your chosen font.
Write for Skimmers and Scanners
Studies have shown that on average only 20% of written content on a web page will be read (Nielsen Norman Group). Users tend to look for specific information, so will scan for the keyphrase or keyword that they’re looking for.
Using the following techniques will help your audience scan content and digest information more easily:
Use short paragraphs to create white space
Write headlines that are descriptive
Create bulleted lists
Bold text if it’s a key learning point/piece of information
Avoid technical language and write simply
Video is a great way of engaging an audience — our eyes are drawn to movement and we’re better at retaining it’s message than reading a whole page of text. But, what if you’re one of the 11 million deaf or hard of hearing living in the UK (Source: Gov.uk), or in a quiet environment and can’t turn the sound on?
Best practice is to have captions available. These are the spoken word in text form and sound descriptions e.g.”door opens”, that allow viewers to follow the dialogue in real time. Alternatively, provide a transcript file which is a text version of every word spoken in the video.
There are added benefits to providing text captions and transcripts. Studies have shown that people watching videos with captions have a better comprehension of the content. Plus, they are better indexed by search engines, and therefore improve your SEO.
Web Page Design
Thankfully, the accessibility agenda has been propelled forward with the growth in mobile phone usage and search engine ranking. However, having an accessible website is more than just search engine optimisation and responsiveness. Consider what it would be like to have a sight or hearing impairment, or how assistive technologies would interact with your website.
Do your images have alt text? (Also know as “alt tags” or “alternative text”)? Alt text is used to describe an image on a webpage and its function.
They are relied upon by blind and visually impaired people using screen readers to read out text on web pages. You’ll also notice alt descriptions if images download slowly or fail to appear.
The added bonus of alt text is that it helps with SEO. Google, for example, will use alt text to understand the content of a page and how it relates to the subject matter on the page.
“When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.” (Source: Google Images Best Practice)
Where you’re able to add alt tags to your images, give them descriptions that are meaningful and accurate. For example: “Red Eyed Tree Frog Staring” is a better description than just “Frog”.
Sign-posts and Conventions
Most of us scan a web page or social media feed with an implicit understanding of how it works. We’ve learnt the patterns and meanings of elements, for example, a magnifying glass icon for search, and that a logo on the top left of a web page gets us to the home page. Following user interface design (UI) conventions reduces the time and brain power for learning.
Understanding your audience’s goals and abilities (user-centered design) will also help inform your design decisions. Helping your audience complete a task or get to the information efficiently will give them a good impression — and ultimately a reason to buy your product or service.
Often there’s a balance to strike between usability and visual design. For example, using an accordion is a neat way of hiding blocks of text, but a user has to take an additional step and guess what information is hiding behind it. Is a page with lots of text more confusing or is an extra click more frustrating? Good web design decisions are the ones that consider the user and trade-offs.
Is your site structured and organised well? A clear content hierarchy is essential for those using screen readers so that they may skip to sections that they are interested in.
The code behind your site needs to stick to a rank or level for each item. So, the main page title may have an <h1> tag as it’s the most important, with the next important sub-heading tagged with <h2> and so on.
In addition, coding a site semantically gives meaning to users and machines about what that content is, rather than just how it looks. For example, the paragraph <p> tag means a section of content and a browser will know how to display it.
A good site structure is not only important for accessibility, but enables search engine crawlers to find and index your web page content quickly.
Next time you’re posting an image for social media, or signing-off on web content take a moment to consider your audience’s needs and differences. Accessibility and design for all isn’t a nice to have. You really do have a much better chance of creating a positive online experience with inclusive design.
Check colour contrast of text across all your print and online media;
Chose fonts and spacing that are legible to all;
Add alternative text to images describing what they show and their function;
Consider your user and the usability of your webpage in design;
Use captions or transcripts for video content.
If you have any questions or want to share your own experiences, please feel free to comment.
For more information about web accessibility or design for all, you can contact me at firstname.lastname@example.org.