Accessible websites. That term is tossed around quite often and depending on the industry you are in, you are required to have your site pass an accessibility check. But, for the rest of us, what does that mean? Why is it important? And, what is needed to make a website accessible?
What is website accessibility?
An accessible website is one where people with visual or motor disabilities are still able to easily navigate and be able to interact. This means that navigation, images, and content need to be accessed in various ways. The way it is accessed may not include your beautiful site design!
The WHY is almost answered by itself. Your website needs to be a part of the level playing field of accessibility so people can engage in your services. It is just as important as having a front door that is wide enough, or a public bathroom that meets accessibility codes.
Visual Impairments
There are three different types of visual impairments. Blindness (and all stages of it), poor vision (blurriness, cataracts, macular degeneration, etc), and color blindness. Each of these is handled a little differently when it comes to accessibility.
Blindness
Within blindness, you have people that are partially (yet legally) blind to being 100% blind. Once you get to the point where you can no longer see the computer screen, technology kicks in with screen readers where the content will be read to you and you can navigate through voice commands.
Poor Vision
For everyone who ranges from poor vision to being partially blind, if you can see the computer screen, it’s imperative that the font size is very large and clear to read. There are settings within a computer to set font size, but there are also adjustments you can make on your website that make it easier for the font to grow.
Color Blindness
About 8% of all men and 0.5% of all women are color blind. Putting that in perspective, about 300 million people are color blind (stat source). That means that they struggle every single day with websites that don’t take the needs of color blindness into consideration.
Motor Skill Impairments
There’s a broad array of technical terms that cover the different types of motor skill impairments. We’re going to stick to English… These cover any condition that impedes sensation, movement, or coordination. It includes people with involuntary movements (jerky, tremors, the inability to control a shaking hand, etc.), limitations of sensation ranging from numbness to paralysis, pain or joint disorders that impede movement, and missing limbs. Some may not be able to use a mouse and instead rely on navigating with just their keyboard. Others may use assistive technologies such as voice software to interact with websites.
What is needed to make a website accessible?
Do you need to take extreme measures for accessibility? Depending on the industry or your affiliation – yes. But, there are things that everyone can do that will meet the basic requirements. A number of these we’ve covered in previous tips, so we’ll simply note them here with a link to the tip.
Also, please note that beyond what I will cover, there is so much more! We’re just scratching the surface. If you want to dive deeper into the topic as a whole, here’s a 4-minute video from the W3C. The W3C is the organization that has created the accessibility guidelines and is a wealth of information.
ALT tags
Use ALT tags for every image including your logo. A screen reader depends on the content in these tags to tell the person what the image is. We go in-depth about ALT tags in our Easy Wins with SEO tip.
Properly organize your content
Well structured content makes it easy for screen readers to follow the content on the page. IF you were to remove the style sheet that dictates how the website looks, would your content still make sense?
Use an H1 for your page title, and make appropriate use of H2s and H3s, etc. on the page. By the way, this has a big factor for SEO as well. Learn more about How to structure your content.
Another thing to consider is when you have a list of things – like: “I’m going to the store for milk, sugar, and bread” (ok, silly example). Create an unordered list, and if you’re using a page builder that allows for fancy “icon” lists, don’t use them. A simple unordered list styled beautifully – and with icons, if desired – is easier for a screen reader to follow.
Consider your links within your content
What wording do you have for your links? “Click here” is a general term, and when a screen reader says “link: click here”, you have no idea why you are clicking. Instead, use something like “click here for prices”. The screen reader will read “click here for prices”, and the person will know exactly why they are clicking.
Second, don’t “hide” your links by removing the underline. The online world has been trained that if it is underlined, it is a link. Many sites have the underline removed which means that you must rely on a different color of the text to alert you to the fact that there is a link. This affects color blindness and poor vision the most.
Last, make the “hover” and “focus” style of your links clear enough so that people can easily see if they are interacting with them.
Make forms friendly
Another thing that is a “cool fad” in the web design world is hiding the form labels. There are right and wrong ways to do this. The wrong way is to simply “display: none”, which removes the form label completely. Screen readers rely on the form label to be able to properly identify the form field.
Using color for accessibility
The obvious importance of double-checking colors is for color-blind accessibility. Do you have enough contrast between the background and foreground colors that it is easily seen regardless of what shade of color people are viewing it as?
Second, don’t use color alone to convey information. Think about what would happen if all of the color directives you give were suddenly greyscale! W3.org has a couple of great examples of how to make adjustments so you can keep your color but be accessible to those that may not see your colors.
Navigation that plays friendly
With the use of Content Management Systems like WordPress, having consistent navigation across your website is so much easier than in the “old days”. And the majority of the themes today include the proper coding to make navigation play well across multiple screens.
Human error comes when you decide to add sub-navigation to a page or section and, you change the location of that navigation from section to section. Consistency is huge! Sub-navigation is great – just keep it in the same place throughout the website.
Resources for testing accessibility
If you’d like to take your site through an accessibility check on your own, here are a few resources and tools. Some of these tools have Chrome extensions which means you can get feedback without having to leave your site.
- Reviewing your site – an on page review
- Overall accessibility check (you can test 1 page at a time)
- Check for contrasting colors
- Testing your site with a screen reader:
- Accessibility Insights (Chrome extension)
- Colorblind testing (there are a lot of resources, here are a couple that we use)
- Toptal
- A11Y – Color blindness empathy test (Chrome Extension)
Your Online Partner… for Success
If you’d like to have us take a look at your site from an accessibility point of view, please don’t hesitate to reach out. We’re here to turn the geek into English and take care of you online!
