If you’re a website owner and pay attention to rules and regulations for businesses and organizations, you have probably heard about “Website Accessibility” or “ADA (Americans with Disabilities Act) rules for websites”. These rules (sometimes just guidelines, but more and more often actual laws) are set in place to help websites be accessible to as many visitors as possible, independent of the way that they experience your website and access your site’s content and services.
There are a variety of rules and laws that apply to some types of sites only, or sometimes to some locations only, but are increasingly being standardized and adopted globally. Even if all rules are not eventually adopted globally and apply to every site equally, it is a fabulous idea on every level to support as many of your visitors as possible!
So, how do you check your site to see if it is accessible at least on a basic level?
Here are a few things you can check to get an idea of basic ADA compliance:
Are Mobile and Tablet Screen Sizes Well Supported?
One thing that we have found is that if your website is “responsive” (meaning that it adapts its display to be very readable and navigable for mobile and tablet resolutions), then it is far more likely that it will adapt to become readable for many other different users as well. For example, it is very common for people to “zoom in” their browser window so they can more easily see your site’s elements. You can do this as well to see how things display as element size becomes magnified… when/if things become unreadable or disappear off the screen or under other elements, then you probably have an ADA compliance issue that needs correcting.
Are font sizes too small?
You might think that a site’s font size looks perfectly fine to your eye, but typically, the smallest font size on the site should render at no less than 16px in size. That can be difficult to determine by looking, even if you know how to find the font size rules in your site’s code. One way to take a look at font size, if you use Chrome, is to use the Fonts Ninja plugin for Chrome to inspect the font size of any text element. But, if you’re simply going to eyeball it, take a look at this font right here, and, if you do not have any zoom on your browser, the font that you are reading right now is rendered at 16px… so that’s some food for thought.
Are overlapping elements sufficiently contrasting?
By this, I mean any text that is over a background color or background image can become unreadable for some visitors when the overlapping element’s color does not contrast sufficiently with the background. To test foreground and background colors, you can use the Webaim’s color contrast checker tool to compare foreground and background colors to see which ADA regulations your site’s elements pass or fail.
Are Hyperlinks and Button text descriptive?
If you were to take a hyperlink or button out of context – remove it from the other content that surrounds it – will reading the text of that link help you understand where you would be going or what would happen if you clicked on that link or button? For some users, this is how they may experience the links on your site… so links like “Click Here” and “Learn More” would not be useful or ADA compliant links. Changing them to “Click Here for the Food Menu” or “Learn More About Cheetahs” would be much more useful link or button texts.
Do image references include descriptive alternative text and do videos have captions available?
Also called Alt attributes, alternative text on static images is necessary for ADA compliance. Alt attributes are visible or read to visitors if the image itself is not able to be displayed. So, it’s not just that it needs some alt text, it needs to accurately represent what the image is displaying. If you’re using WordPress that also uses a modern theme, like Astra or Hello Elementor, then you can check all of the images in your media library one by one for alternative text, and the changes that you make there will populate the alternative text attributes in your theme and on your pages, in most cases.
Captions or a transcript should also be available for any video that you publish. You will often have the option for auto captions on platforms like YouTube, so check for those when you are uploading your video as this will make it easier to get started on your captioning.
Can the site and all functionality and information be accessed by tabbing?
For visitors that do not use mice, track pads or swiping; their browsing technology may essentially equate to a tab press (next link) or shift+tab press (previous link) to get from place to place on your pages. Tab through your pages… if you can tab through your pages and hit every actionable element, that’s a good start. Activation of some elements that would require a click might require an Enter key press. For activation of some elements that require a hover or click, that may also be Enter or arrow keys. If an element or function can’t be triggered via the keyboard, you probably have an ADA issue.
Another thing that is very good to have, and in some cases required, would be the Skip-To menu. The Skip-To menu is the first thing that you should tab to after leaving the address bar. If you use WordPress, many modern themes include this menu by default. This menu helps keyboard navigators skip directly to sections of the page. Skip to Content is often the most helpful, allowing folks to skip what could be a pretty big list of links in the main menu.
Are there any automated ways to assess a site for ADA compliance?
Absolutely! There are a variety of tools and services out there that will check for ADA compliance, some more thoroughly and accurately than others. Some are free, some are paid, but in all cases, we have found that even the paid tools and services have trouble checking certain things, so a human’s eyes will always be needed to confirm if something truly is an issue. We don’t recommend a specific tool over another, but WebAIM is a good place to start: https://webaim.org/services/
We like WebAIM because it offers a lot of resources and self-check tools. It’s good to have some understanding of what you’re looking for, so it’s good to learn a bit about the requirements on some level.
Can Roost Web Strategies help with ADA Compliance?
We sure can! We offer some base level analysis of sites and can recommend (or even make) those changes for you, or let you know if further analysis is needed. Please reach out to Roost Web if that’s something you would like to take advantage of!
