As we continue to bring more and more people online across the globe, the percentage of your website visitors that depend on your forethought of accessibility increases. Meeting website accessibility standards is no longer something you can overlook. It should be top of mind from the beginning conversations all the way through development.
Just recently, Colorado became the first state in the US to pass a bill that requires state and local government websites to meet accessibility standards. This is huge news in our industry and something we’ll definitely be keeping an eye on.
Even if you are not a government organization, or there are no laws requiring this in your city or state now, the time is coming. Much like GDPR, this will spread and eventually become the norm. It’s worth taking the time up front to ensure that your website meets accessibility standards now so that you are creating a solid foundation for the future.
What are accessibility standards?
We won’t get into every specific detail, but we can point you in the right direction. The newest version of the Website Content Accessibility Guidelines, created by the World Wide Web Consortium (W3C), the main international standards organization for the World Wide Web, is version 2.2. However, at the time of writing this article, 2.1 is what the majority of website agencies and developers are working towards.
In the abstract from the 2.2 version of the guidelines, W3C breaks down website accessibility standards like this:
“Web Content Accessibility Guidelines (WCAG) 2.2 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.”
As you can see, the intention is to make web content more accessible to all users, but there are some more specific considerations. For example, listed early in that abstract is blindness and low vision. Typically these are the driving force behind these guidelines and a great place to start.
Why are accessibility standards important for your website?
If you have never paid any attention to this before, your website might be riddled with issues that make it hard for these specific types of users to actually get to the important information on your website and something you should begin to consider.
Let’s start with what we recommend not doing. There are some ‘plug and play’ types of tools out there that claim to be a simple solution to meeting accessibility standards, but more often than not they will cause more problems for the user than you would find by building your website and it’s content out thoughtfully in the first place.
For example, if you are using WordPress as the platform for your website, you can find some plugins that will allow your users to make changes to the front end of your website on their own (i.e., change font sizes, switch between light and dark modes, etc.). I highly recommend staying away from the one size fits all type of approach to accessibility and, instead, really put some time into making foundational changes that will ensure it’s done correctly.
Now let’s talk about a couple of things that you can do or focus on.
- Accessibility statement
- Navigation menu
- Images
- Links
- Styling
Accessibility Statement
An easy first step is to put up an accessibility statement. To be honest, this does absolutely nothing to immediately benefit your users in any way. It’s simply a statement and commitment that you are keeping accessibility standards top of mind and are making an effort in that direction. It’s easy and, if nothing else, will be a way to hold you, the website owner, accountable for keeping your word.
Navigation Menu
When you tried the screen reader, were you able to successfully tab through your navigation menu? If you look at the code for your menu, is it simple to read or is it a jumbled mess of unnecessary classes and animation features? W3C provides a simple breakdown of recommendations for navigation on the Menu Structure page of their web accessibility tutorials.
Using the WordPress menu system, it’s easy to organize your navigation menu in a thoughtful way and change it up as needed. Your theme could have an impact on how it’s presented so just double check this area and see if any simple changes can be made now. Otherwise, make sure this is a priority as you rebuild in the future.
Images
One of the key areas of focus for meeting accessibility standards is how you treat images in your page content. As you can imagine, a blind or low vision user isn’t going to be able to process much about an image. It’s important then to ensure that you are using the available HTML tags to add a description to those images.
This will communicate a description of what the image is instead of showing the image itself. “Making Images Accessible,” an article from the University of Washington, lays out a few helpful examples.
Links
Similar to images, there are some simple steps you can take to update your existing links in your page copy. These steps will ensure that a screen reader can give a little more context to the user.
First, consider the styling of your links. If a person with limited vision is still reading your text, you’ll want to ensure a high contrast between the text itself and the background. As well, you may be familiar with website style where there is no underline under a link. While this may look good to someone with full visibility, someone without might not notice that it’s a link.
Next consider the context of your links. Here is a quote from an article by Yale:
“While screen readers can read a full page to a user, screen reader users may prefer to instead listen to a list of links. In that case, a screen reader may only read the link text and not the surrounding text.”
As you can imagine, simply hearing the text of a link might not be informative enough for the user to know what it means. The idea here is to ensure that your links are contextual words or phrases.
The text “click here” as a link doesn’t tell the user very much, but “you can find our contact form here” as a link tells the user plenty of information.
You should also consider ARIA techniques, which allow you to add additional context specifically for screen readers. This would allow you to keep a “click here” link text while including “you can find our contact form here” context specifically for the screen reader.
Styling
One of the most simple updates you can do to your current website now is make style updates. Style updates would apply to things like colors and fonts. In regards to accessibility, it’s important that fonts are an appropriate size and that colors meet specific contrast ratios.
For users with visibility issues but not using screen readers, larger font sizes are helpful. There is not a specific size that they should be, but the recommendation is that it is not smaller than 9pt or 12px. Lately, our designs have been using a body font size of 18px.
In regard to colors, contrast ratio is the key. To meet accessibility standards, the contrast ratio between text and the background must be at least 4.5:1. Unless your designer specifically spent time to ensure this is the case, it’s likely that you have areas of your website that do not meet this requirement.
An easy way to test is using a contrast ratio check application like WebAIM contrast checker. You can also find specific color combinations that work together from your existing branding guidelines is by using the Accessible Color Palette Builder.
What happens if you do not meet accessibility standards?
At this time, if you do not live in Colorado, nothing happens. However, as time goes on, this will become law in more states and across the globe.
Using GDPR again as a reference, we will likely see government organizations tagged first, then public organizations like schools and universities. It will eventually trickle down to any for and non profit organizations.
That said, you have users right now that have trouble using your website. This isn’t something that you should be doing because the law says you should; it’s something that should be a priority as part of the user experience of your website.
What can you do to understand website accessibility standards better?
My first recommendation would be to step into the world of screen readers. These are the tools that users with blindness or limited vision use to navigate websites.
For example, while the Screen Reader Chrome extension is no longer supported, you can still install it and try it on your own website. I encourage you to try to navigate through your website with this tool to get a better understanding of how a user with limited or no vision has to navigate.
Unless you’ve taken specific steps already to ensure that this process is smooth, it’s likely going to be difficult. Additionally, we recommend spending time going through the actual guidelines themselves listed on the W3C website. Here are a few links to get you started.
Work with a team that knows accessibility matters.
As you design or redesign your website, consider enlisting help from a team of accessibility experts. Contact WebDevStudios. We know accessibility matters and work hard to ensure your website project meets accessibility standards.
Comments