“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee, Inventor of the World Wide Web
Think about this interesting tidbit: about 15% of the world’s population has some form of disability. That’s right, over 1 billion people around the world have some sort of disability.
Are you making it easy for them to visit and browse your site? Have you even thought about how to make a website accessible to everyone, regardless of impediment?
You’re not doing yourself any favors if you’re not. Why? Because a site design that reaches the maximum amount of people is optimal, and for this to happen you need web accessibility that makes it easy for everyone to understand, interact with, and navigate your website.
In doing so, you’ll be making your site accessible and usable to everyone, which just so happens to improve user experience (UX), a very important consideration in today’s world of rapidly evolving web design trends.
Before we move on, did you catch that part — usable to everyone?
This means one thing: if you want to know how to implement web accessibility properly, you have to think about accessibility for disabilities that range from visual and auditory, to physical and cognitive.
With that in mind, let’s cover some tips and techniques to increase accessibility of web pages.
1: Be Responsive
The first tip, to be responsive, has more to do with accessibility as a whole, rather than accessibility for people with disabilities.
That being said, having a responsive site that resizes all content according to the screen it resides in is just as important for those with, than those without disabilities because everyone — (or the vast majority that counts as ‘everyone’) — is going mobile.
If you’re in doubt, consider what would happen if someone who’s vision impaired visits your unoptimized site. Long story short, they wouldn’t be able to navigate it because the text will be would too small, images would be all over the place, and a whole host of other issues.
To prevent that and similar occurrences from happening, get in touch with a responsive web design firm and join the mobile revolution!
2: Don’t Rely on the Mouse
For the first tip that actually deals with how to make a website accessible for the disabled, don’t rely on the mouse.
As it is, many web accessibility tools for disabled individuals use keyboard-only navigation that jumps between page areas (most often with the Tab key). This means that for a website to truly be accessible, all of it — its content, pages, links, everything — must be usable with the keyboard, and keyboard only.
3: Include Alternative Text
Do you want to know how to make a website accessible for the blind or visually impaired?
Include alternative text (alt text) throughout you website.
For those in the dark, alt text, also called alt tags, alt descriptions or alt attributes, is text that acts as a replacement for images if they either fail to load, or if a screen reader is in use.
For example, if you have an image depicting a pair of shoes, the alt text could be: pair of black heel stiletto shoes with straps. With this in place, whenever your users come across that image, they’ll hear (or see if the image doesn’t load and they’re not visually impaired) the alt text, which acts as a descriptor for the image.
4: Provide Text Alternatives for Non-Text Content
Similar to including alt text in your site, it’s also important to provide text alternatives like braille, speech and large print for any non-text content, such as videos and audio recordings.
Delving deeper, whenever non-text content appears, a text alternative that can acts as an accurate substitute should be available in two forms: short and long.
Whereas the long text alternative conveys information in full, its shorter counterpart will still cover everything, but it does so in a brief overview that touches on all the main points.
5: Support Screen Readers
Going off of the previous two tips, support for screen readers, which are programs that allow blind or visually impaired people to read and understand content, is an absolute must for a completely accessible website.
This means that you not only have to have alt text for all images, but also that all sections and interactive elements should be clearly labeled and tell users exactly why they’re there and their function.
For example, if there’s a layer that can be closed with an ‘X,’ someone who can’t see won’t know they can close that layer if that ‘X’ isn’t labeled with its function.
6: Enable Resizable Text and Zoom
Taking it back to the first tip on getting a responsive site, make sure to enable resizable text and zoom on all your content.
The thing is, while the majority of devices and browsers allow users to do both, problems can arise if your own site doesn’t support them, which leads to poor UX.
To this end, make sure to use relative sizes as opposed to absolute units so text can scale up or down depending what other content exists on that page.
7: Offer Multiple Forms of Navigation
Everyone’s different and not everyone will interact with your site in the same way. Additionally, just because assistive technologies allow users to discern content, they may not do so in an efficient manner.
On your end, this means you have to offer multiple forms of navigation so your users can find whatever they’re looking for and determine exactly where they are on your site, at all times.
Because it’s very rare you’ll come across a site that’s a straight read from top to bottom, you have to include features like search, tabbing, headings and links they can use to navigate wherever they want.
8: Veer Away from Automatic Media
Do you find it annoying when you land on a page and media plays automatically? Now imagine what that’s like for someone with a disability.
It becomes a real issue.
This is especially if they weren’t expecting it, as they can become confused by the sudden noise.
Don’t do this. Instead, always prompt them before playing any form of media.
9: Think Carefully About Colors
Colors are very important for a website, but you they’re not the end-all when it comes to conveying information.
For example, we all know green means “go,” “correct,” etc., and red means “stop,” “wrong,” etc. What happens when someone is either color blind or can’t see?
They won’t know the red highlighted area is incorrect and in need of editing.
To counter this, make sure to include a checkmark along with the color green and an ‘X’ with the red so all your users stay informed.
Similarly but not really, think about how you pair colors. If you’re using dark text, don’t use a dark background, and vice versa for light text and a light background.
Instead, make the text stand out by setting a dark color against a light one.
10: TEST Everything
Finally, the only way to know if your website truly is accessible for all is to test it out.
For example:
- Load it on a mobile browser
- Navigate and interact with it by only using the keyboard
- Use it with a screen reader
- Zoom in and out to see how everything is rendered
- Etc.
Remember, for this step the only thing you really need to do is place yourself in your user’s shoes and see what’s it’s like to access and navigate your site. If you encounter any issue, you can be sure they’ll encounter them as well.
Stop that from happening and nip it in the bud.
Final Thoughts
Why is web accessibility important? Because you want ALL your users to have a good on your site.
Keep in mind that accessibility extends past a website and into other brand-owned channels like mobile apps (trends in this area also pointing toward more accessibility).
To make sure you have everything covered, get in touch with a digital agency that offers digital design services and get optimized.
Tell us your thoughts in the comments