Website accessibility caters to making websites, apps, and other technologies accessible for people with a range of disabilities. Every website should be accessible to anyone, regardless if they have a condition that affects how they interact or use a website.
Millions of internet users have needs that could prevent them from accessing or using a website if it is not designed with their disabilities or conditions in mind. This includes:
- Visual: Partial or total inability to see colors or perceive contrasts (e.g. color blindness, blindness)
- Hearing: Reduced or total inability to hear
- Physical: Difficulty moving or using parts of their body, using a mouse/keyboard, or making precise movements
- Seizures: Conditions that can cause seizures like epilepsy or triggered by flashing lights
- Cognitive: Conditions that affect cognitive ability like dementia and dyslexia
Table of Contents
Website Accessibility Statistics 2021
- Up to 10% of people in the US have reading difficulties including dyslexia
- 35% of US entrepreneurs are dyslexic and 20% of UK entrepreneurs are dyslexic
- 8% of Caucasian men in the US have some form of color blindness
- 0.5% of US females have color blindness
- 7% of working-age adults have severe dexterity difficulty
- Around 5% of people in the US, UK, and Canada suffer from hearing difficulties
- Around 4% of people in the US, UK, and Canada are unable to see well enough to read
How To Make Your Website More Accessible
Now that we understand accessibility is important to any website, it’s important you know how to make your website accessible. One of the best ways you can start to improve your website’s accessibility is to choose a good CMS like WordPress. Of course, you don’t have to use WordPress to achieve this, but you may see a reference to WordPress as we go through this accessibility guide.
1. Make Your Website Keyboard Friendly
A keyboard-friendly website means you can access it and navigate through the website and its pages without the use of a mouse. The most common way to navigate through a website without a mouse is by using the Tab key on a keyboard.
Major features like pages, links, and content should be accessible via a keyboard. When designing your website, you should test that all of your features can be accessed using the Tab key. The best way of doing this is to test your website without the use of a mouse. If you’re unable to access certain key parts of your website then these issues need addressing.
As you can see on the WebHostingProf website, you can simply tab through the links and forms on the website with your keyboard. Best Web Hosting is highlighted with a green dotted line which identifies that this link has been selected using the Tab key.
2. Add Alt Text To Images
When you add an image to your website, you can include something called Alt Text (alternative text). The alt text describes what an image is and is helpful if an image fails to load.
Alt Text is also used when accessed by screen readers; this technology reads the image and offers context to an image for those that cannot see them. As well as providing increased accessibility, Alt Text can help improve your website’s SEO as it provides the context of an image to search engines.
3. Choosing The Right Colors
Color blindness isn’t as simple as seeing one color as another. People with color blindness see a whole spectrum of colors and perceive them differently from another person that has color blindness. A website should offer the right color contrast so that everyone can distinguish between various colors and content on your pages.
Do you remember The Dress? This was a great example of how people see colors differently. Some people saw the dress as blue, whereas others saw it as gold. Different individuals see colors differently, so it’s essential your website uses the right color scheme to avoid some people from not being able to view your content.
4. Use Headers
In order to structure your content in an accessible way, you should use your headers carefully. In WordPress, you can easily select content or titles and assign headers H1, H2, H3, H4, H5, and H6.
Clear headers not only help all of your website visitors to understand how your content is structured, but screen readers can also interpret your pages much easier.
You should only use one H1 header per page, which is usually the page title. Subheadings can start from H2 and follow on with H3, H4, etc. where appropriate. You should follow the header structure in order, so H3 would always follow an H2, rather than an H4, and so on.
5. Form Design
If your website contains any forms, they must be designed carefully. Each form should be clearly labeled next to its respective fields. A screen reader will then be able to clearly interpret the form and the relevant fields, making it easier to fill out.
If your form requires any instructions, these should be clear and easy to understand. For users who are creating their website in WordPress, you can create accessible forms using a plugin called Caldera Forms Builder. This plugin focuses on accessibility.
Tables are really useful to display large amounts of data. People using assistive technology will benefit from tables if they are used correctly. It’s important to make your tables as simple as possible so as not to overcomplicate their purpose, or confuse screen readers.
If your website requires more complex tables, you can follow W3’s tutorial on how to code a table to accessibility standards.
7. Scalable Text
Most devices that you can use to visit a website, like a smartphone, PC, or tablet, will allow you to resize text. For those with visual impairments, this is extremely helpful. However, if your website isn’t built to support this feature, it will make it difficult for users to interact with your website.
When you build your website, you should make sure that user scalability is turned on. If it’s turned off, it will make it almost impossible for users to resize the text.
By avoiding absolute units like defined text sizes, you can make your website scalable. You can test this yourself by zooming into the site on your browser to check the content is easy to read and navigatable. WebAIM has created a guide that’s very useful for discussing font size for your website.
8. Accessible Content
Your website content is the core element of your site. When you create your content, you need to have accessibility in the back of your mind at all times. For example, if you are writing an acronym like WWW, explain what this acronym actually is – World Wide Web.
Anchor text to internal or external links should be descriptive, ensuring all of the descriptions are unique. If you’re struggling with this concept, imagine a computer reading out the content on your website and think about whether it would make sense to someone taking it on a base level.
9. Automatic Media
While this is a personal frustration of mine, it’s also really bad in terms of accessibility. There’s nothing more frustrating than a video or music starting to play as soon as you load a website.
If someone is using a screen reader, it’s incredibly difficult to turn off any automatically-playing media. Those with sensory issues could become deterred or even frightened by the sudden noise, so if you want to include media you should ask for permission or prompt the user that this is going to happen.
Carousels and sliders undoubtedly make a website look nice, but again, these can cause frustration for users with accessibility issues. If a screen reader is reading out the content on a slider, and it moves to the next slide, it doesn’t offer much time for the user to absorb the content.
Website Accessibility Is Important
The bottom line is that web accessibility is important to a successful website, and a website that caters to everyone’s needs. Creating a website that many people can use is not only good for them, it can work in your favor in terms of SEO.
When your website ranks better, you get more traffic and an increase in conversions. Yes, it can be frustrating having to correct your mistakes, but if you can optimize your website for accessibility, you’ll reap the rewards.