With all of the talk about making the world a more accessible and inclusive place, it might be tough to even know where to begin. One really important way to help contribute to an accessible world is by making the internet a more inclusive place. If you have ever visited a website that is tough to read from a visual standpoint, has a confusing format, or even has an illogical or confusing structure then you probably have a bit of an understanding about what inaccessibility can feel like.
This inaccessibility issue becomes much more important when you realize how many people out there are accessing the internet while working with some sort of disability. While disabilities can vary greatly in severity and some are not permanent, they still create huge roadblocks for people trying to use the web. If you saw a restaurant without a way for someone in a wheelchair to enter, you’d probably be pretty outraged.
The same concept applies to the internet. Website owners and designers are often so focused on creating something that fits their imagination that they forget to see things from the standpoint of someone with a disability. This is essentially why WCAG 2.0 exists. The internet playing field is far from level, and so the US government has implemented laws to ensure people with disabilities are able to access the same content on the internet as everyone else.
Accessibility Issues and Solutions
Below are some unfortunately common issues that users find when accessing websites, and ways that site owners can fix them pretty easily.
It All Blends Together
Scenario: A user goes to your website only to find it has extremely similar text and background colors. They can’t read the website and have to search elsewhere for the information they wanted.
Issue: The color contrast ratio is off, making the text tough to distinguish from your website’s background. It’s kind of like trying to read a really light pencil note on a piece of paper. You know the words are there and if you squint you might be able to get the message, but it’s not simple.
Solution: This is an easy fix! All you have to do is boost the contrast ratio to ensure that the text your website visitors are seeing is easy enough to read. According to current WCAG 2.0 guidelines, the colors on your site need to have the following ratios:
- Text-to-background contrast ratio of 4.5:1 for normal text (AA requirements)
- Text-to-background contrast ratio of 3:1 for large text (AA requirements)
- Text-to-background contrast ratio of 7:1 for normal text (AAA requirements)
- Text-to-background contrast ratio of 4.5:1 for large text (AAA requirements)
You can easily check your contrast ratios with UserWay’s contrast checker. While you might like the way your site’s color scheme looks, you’re still going to need to change the colors. Likely, you will be able to find a similar color scheme that works just as well without giving your users such a hard time.
If you aren’t sure how to change your colors to make them pass the ratio test, the UserWay contrast checker gives you the option to email your ratio results to your web designer so they can check out why the colors failed. A few small tweaks to the shades on your site is typically all you need to make to get a passing color ratio result.
A Blank Space
Scenario: A blind user goes to your website and wants to read an article that is heavily based on images. They use a text-to-speech program to make sure they don’t miss the content, only to not be able to get the full story because the images don’t have descriptions. They know that img_091.jpg is there because that’s what their screen reader tells them, but that image could be of pretty much anything.
Issue: Every image on your website needs to have alternative text (from now on called ‘alt text’ in this post) included to support the images. This text gives a brief and precise description of the images on the page so that text-to-speech programs don’t skip the image and users are able to understand all of the content.
Imagine if you went to a pastry shop and instead of seeing bread there was just baskets where the bread should be placed. You know the shop makes bread, you know you’re in the right place to obtain the bread, but what you really want just simply isn’t there. You’ve got to give your users all of the information they need to get the most out of your site, otherwise they’re going to be aware that an image exists, but they won’t know what it is or why it’s there.
Solution: Always, always, always include alt text that gives a good but short description of the images on your site. Text-to-speech users really rely on this content, and when it’s missing it creates holes in the story your site is trying to tell. This doesn’t just go for pictures either. Things like banners and navigation buttons also need to include alt text so that users can easily interact with your site. WebAIM has an awesome guide to help you choose the perfect alt text for your site.
Mass Chaos
Scenario: A user visits your website after breaking their dominant hand. They use keyboard navigation to help them get around the web while their hand heals. When they go to your site, the navigation is everywhere and confusingly laid out, meaning they’ll have to click around and search extensively to get to the content they want to access. They give up because even though the site was always simple to use when they were able to use the mouse to click the link, it’s just taking too much effort to do the same task now.
Issue: Your website is not optimized for keyboard navigation. Website structure is a really tough thing to get right, and when it is done incorrectly it can be extremely apparent. If a user needs to search high and low for information and do an excessive number of keyboard clicks to get to the content they want, then the site is not accessible.
More than that, a few of your website visitors might be using keyboard navigation in conjunction with a screen reader. If the site is chaos they are going to have to click around while listening to a lot of completely irrelevant information before they get to the details they want.
Solution: First, install the UserWay widget because there is a feature on the widget that helps with keyboard navigation. The UserWay widget is handy because it will find and make tiny modifications to the pieces of your site need to have in order to make them responsive to keyboard-only navigation. It also doesn’t require you to modify your website’s code, so it is an easy way to immediately improve your site.
Once you’ve installed the widget, it is probably best to either do some user testing or talk to a web designer about the layout of your site. Having someone go through the site using keyboard-only navigation can give you some critical insight into what the issues with your site are and what changes you might want to make. If you want, you can even be the user and test your own site (although sometimes it is tough to be objective about your own site).If you really don’t know where to begin, or if you can’t tell whether or not your site really needs to be changed to make it more responsive to keyboard-only navigation, it is probably a good time to talk to a web designer. There are plenty of freelance designers that can guide you toward the best solutions and many of them are well versed in WCAG 2.0 compliance so they can give you specific compliance recommendations. The end result will be a website that is simple to understand and navigate, giving your users freedom to move about the site with ease.
It Takes Work (But It’s Worth It)!
Like most things that are worth doing, creating a more accessible website takes a fair amount of work. You need to really understand what the barriers your users face might be, and work to help make those issues disappear. However, once you start to learn more about these challenging issues, you will start to think more like your users when you make changes to your site.
Over time, you will be making the internet a more accommodating and accepting place, while giving your users access to the best content without barriers. From my perspective, that type of success is absolutely more than worth the bit of extra effort you need to put in now to start making your site more accessible. So get motivated, get started, and help make the internet a more inclusive place!
