The World Wide Web is meant to be a place for the world to meet, share information, and grow together. Accordingly, much attention has been drawn to a conversation around making sure that everyone – truly everyone – can use the internet.
“Accessibility” is the term used to describe the ability of a website to be usable by members of society afflicted with disabilities that may make interacting with a website difficult for them. With nearly 1 in 5 Americans diagnosed with some sort of disability, achieving a mark of high accessibility with your WordPress site design is clearly important.
How do I know if my site is accessible and ADA compliant?
Thankfully, there is a set of standards that you and your website developers can follow as a recommendation to answer this question. The Web Content Accessibility Guidelines (WCAG 2.0) are a collection of reference points that help a website creator understand if they are following good accessibility standards.
A great resource to learn how you can make your site more accessible can be found at this WCAG 2.0 Quick Reference. WCAG uses three levels of accessibility (A, AA, AAA) that grade your website along the standards’ many dimensions. Even at just a quick glance, you can tell how much can go into making a website as accessible as possible.
While creating a website with truly high accessibility for all users is a full-time and conscious effort during the development process, here are 5 simple ways to make your WordPress site more accessible for your users with disabilities or other impairments.
HTML Semantic Tags
Every website is created using some combination of the big three web development languages: HTML, CSS, and Javascript. Luckily, proper of use of HTML semantic tags can help with accessibility.
Users with vision issues often use screen readers to understand the page being presented. However, if your site uses a paragraph tag for any time that text is on your page, your user will have a hard time understanding the page’s hierarchy because they will never know when the text is a header, a subheader, or a paragraph. A user that is viewing your page visually could see a header because it would, perhaps, be in larger font or emboldened, but a screen reader will never announce styling information for your users with visual impairments. It will only say “here’s a paragraph.”
This simple example applies to many different HTML tags, making it of vital importance that your site uses the correct tags at the right times.
Bonus benefit! Using the correct HTML tags will also boost your site’s SEO. How? Well, Google’s indexing robot doesn’t look at your page visually. You could say it has a “visual impairment.” Instead, it reads your page’s content by inspecting your HTML tags and content and making sense of things that way. So, by using the right HTML tags, you’ll improve accessibility and be rewarded for it with improved SEO!
Keyboard Navigation
There is a wide array of disabilities that can make using a mouse difficult for a computer user. For these people, they instead navigate their screen using just the keyboard. And, sometimes, it’s easier to navigate using just the keyboard anyway! (Think of typing in a form and pushing “tab” to go to the next field.)
To make keyboard navigation easier, make sure that the flow of your page is navigated from top to bottom and left to right when you are pressing the “tab” key. The focus of the cursor should always be highlighted (avoid using outline: none; in your CSS) and only give focus to elements of the page that are interactive. (Hint: If you used correct HTML semantics, your job should already be done!)
Proper Linking Practices
Again, we can help those using screen readers by following best linking practices. When a screen reader encounters a link, it announces that the element is indeed a link and then continues by reading the text of the link.
This means that if the text that the link is assigned to reads “click here,” your user won’t have as much information as they would like to know. What will happen if they do click that link?
Instead, use a more descriptive set of text. For instance, to improve on “click here,” use “click here to visit the ‘Contact Us’ page” as your link’s text.
Audio/Video Captions
If you truly are creating high quality content that you want your site’s visitors to enjoy, it’s important to understand that not all of your users will be able to benefit from your content in the same way.
Let’s imagine that you have created a video of instructions on how to tie a knot. The video is of you going through the motions of tying a knot while you describe the process.
For your visitors with visual impairments, they may prefer to have a set of audio based instructions as an option for them. These instructions would be a bit more verbose since they can’t watch you tie your knot and would still let these users achieve the ultimate goal: knot tying.
Alternatively, some of your users may have hearing disabilities. These users would not be able to hear you as you explain the trickier parts of knot tying. This is where captions come in handy. Once you have your video captioned correctly, a completely deaf user still can understand your explanation and get that knot tied!
Alt Text
Again, we have an opportunity to help your site’s visually impaired users with proper HTML practices.
Of course, for a blind user, an image on your page will not help them much. However, this does not mean they have to miss out on the image entirely.
A handy piece of HTML to use on an <img> tag is the alt attribute. When an image has an alt attribute given to it, a screen reader will see the image in your HTML file and read the alt text to the user.
So, as an example, let’s say you have an image of an adorable puppy on your site. Your image tag should look like: <img src=”puppy.jpg” alt=”An adorable puppy.” />. Now a user with a screen reader will hear “Image. An adorable puppy,” instead of just “Image,” when their screen reader scans this <img> tag.
Wrap Up
This list can be used as a checklist for your website. Do your headings use the right tags to establish the right hierarchy on your page? Are you using alt tags on every image you have? If you have ticked off all of the boxes, that’s great! If you haven’t, that’s also great! You still have an opportunity to improve your site for any user.
Whether you have or haven’t done everything on this list, it is important to note that this article only covers the very basics of accessibility on the web. Achieving true accessibility on your site is only accomplished when you develop with accessibility in mind at all times.
Creating great accessibility is just as complex as the wide set of disabilities that all of your users visit you with. Thankfully, WordPress takes care of a lot of the work behind the scenes. However, keeping your content accessible is ultimately left up to you.