Websites are often seen through the eyes of a designer. In most cases the focus is more on making the site visually appealing. But there is a big but, what about people who actually can’t see it? Over 94.8% of websites fail the web accessibility test. And this isn’t a small number.
Yes, it is a new era for websites and people with disabilities deserve a chance to use them. You see, the great news is, making a website accessible, it isn’t rocket science.
This article covers the following topics.
- Accessibility in Web Design: Why is it Important?
- Principles of Accessible Web Design
- Techniques to Make Websites More Accessible
- Accessibility Mistakes to Avoid
Accessibility in Web Design: Why is it Important?
Approximately 1.3 billion people in the world have a disability, which accounts to 16% of the global population. You can imagine if only some of them are currently locked out of your website.
Here’s something more interesting…
Did you know that web accessibility is also considered to be a search engine optimization (SEO) issue?
When you use modern development, especially good web development tools to make your site accessible, you automatically optimize it for search engines. Whether you’re building in-house or hiring a web design agency, making accessibility a priority from day one saves time and money later.
So what does this mean exactly? Building your site with accessibility in mind opens it up to an audience of over 1.3 billion. That’s a big number of potential visitors and customers.
Let’s not forget the search engine optimization (SEO) benefits and it’ll be easy to say that making your website accessible should now be a requirement for every website out there.
Principles of Accessible Web Design
Here are some accessibility best practices for web design and development. For starters, there are 4 key principles that make a website accessible. The word POUR comes up a lot. The four principles are as follows.
Perceivable
Your site needs to be perceivable through all types of senses for users. The perceivable information is available in one or more formats:
- Adding alternative text to images
- Using sufficient colour contrast
- Providing captions for videos
- Allowing text resizing without breaking layouts
On average, a website has 51 total accessibility errors, 75% of these are related to the Perceivable principle.
Operable
Navigation needs to be possible for all users. This includes users who have mobility impairments that cannot use a mouse.
Make sure your site is fully navigable by just a keyboard. Test it out! Use your site with the tab key and Enter and see if you can reach all content.
Understandable
Content needs to be understandable for the users.
Easy to read, clear language, avoiding jargon where possible. Navigation should be consistent across all pages. There should be no guesswork for the user as to how the site works.
Robust
Robust content is simply content that needs to be interpreted by different devices such as desktops, laptops, mobile devices and assistive technology.
The best way to ensure your code is robust is to keep it clean, using proper semantic markup, validated with W3C standards and tested with screen readers to check for issues.
Techniques to Make Websites More Accessible
Ok, here are some more technical topics. The most important thing to do when you are about to develop your site or looking to redesign an existing website is to start from the ground up and make sure everything follows best practices for accessibility.
Use Semantic HTML
- One of the biggest issues in old websites is a ton of divs everywhere with no semantic meaning. When it comes to building an accessible website, these are critical.
- Use <header>, <nav>, <main>, <footer> properly.
- Structure your content with H1 through H6 in order.
- Use buttons for buttons (don’t use divs with click handlers).
- Check links use the <a> tags with proper href attributes.
Tip: Semantic HTML is one of the most cost-effective accessibility wins you can make.
Keyboard Navigation
This goes hand-in-hand with the Operable principle in the POUR list of principles for accessibility.
The most critical questions to answer:
- Do focus indicators exist and are they clear?
- Is the tab order logical?
- Do you have skip links so users can jump to the main content?
- Are there keyboard traps?
A keyboard trap is what happens when a keyboard user gets stuck in a particular section of a site that they cannot get out of. Commonly this is found in widgets such as date pickers or content sliders.
Tip: Make it a practice to regularly test all keyboard navigation!
Alt Text
Alt text is an area where people commonly make many mistakes.
It either gets completely overlooked or too much information is put in alt attributes which could be expressed visually, rather than the purpose.
Tip: A good rule of thumb is to focus on the purpose of the image as well as providing concise, clear information. Keep it simple and leave decorative images with empty alt text.
Colour Contrast
Colour contrast issues are surprisingly one of the biggest offenders on many websites today.
WCAG requires a minimum of 4.5:1 contrast ratio on normal text, and 3:1 on large text. Bigger is better of course for ease of reading.
Tip: Use free colour checkers, don’t trust your eyes. Search engines like Google uses text contrast to identify and rank content as well.
Accessible Forms
Forms are another area where accessibility errors are common.
Make sure all form fields have visible associated labels. Error messages and instructions need to be clear and not rely on placeholders. All elements should be grouped using fieldsets.
Tip: Always show users what you want from them, give as much context as possible.
Accessibility Mistakes to Avoid
Here are the top mistakes that some websites make in the name of accessibility.
Colour Alone Doesn’t Work
You should never rely on colour alone to provide important information.
Colour-blind users will miss out on the information provided by your website if colour is the only way to understand something.
Solution: Always add a second indicator such as icons, text labels, patterns or underlines for links.
Auto-Play Features
Automatic play for videos, carousels, slideshows and even audio can be an accessibility barrier.
Solution: Give the user control at all times.
Mobile Accessibility
Mobile accessibility is another common mistake websites make.
Touch targets should be large enough, and proper spacing should be given between clickable elements. Also, don’t forget to test on real mobile devices.
Complex Navigation
Complex navigation in the form of mega menus and deep nested drop-downs can cause accessibility issues if not designed properly.
Tip: Navigation should be kept as simple and predictable as possible. If you need to use mega menus, make sure they are accessible and operable by keyboard and screen readers.
Missing Page Titles
Page titles are another simple aspect that many sites forget to include or don’t provide a unique, descriptive title for each page.
Tip: Page titles are used for browser tabs, bookmarks, history navigation and even display on search results. It is important for accessibility and SEO.
Key Takeaways
Making your website accessible is something that should now be a requirement on every site you build. The return on investment over time is more than just good for the soul, it’s good for business.
You can start by covering the basics. Add alt text, fix colour contrast issues, make sure your keyboard navigation works. And then move on from there.
You don’t need to do it all at once. Small steps, constant iteration and improvements. Web accessibility isn’t a one-time project, it’s a way of life on the web. It should be considered with every new feature you build, every content update you make, every design change.
The internet was built to be inclusive for all, make it stay that way.
Leave a Reply