Accessibility in WordPress (and other sites) has usually only been incorporated as an afterthought. Why should you care about the small amount of users that will not be able to access your site? Whether you are a government, media, or an educational site, it is crucial that everyone has equal access to your site. There are a variety of tools that people may need to use in order to read and/or see information on your website. In short, the web should work for the users, instead of the other way around.
There is another benefit to making your website more accessible; it can also help you SEO or Search Engine Optimization! Yes, that’s right, everyone wins. But first, let’s learn about what accessibility is.
Adobe defines accessibility as:
Accessibility involves two key issues: how users with disabilities access electronic information and how web content designers and developers enable web pages to function with assistive devices used by individuals with disabilities.
You can also read the WordPress Codex page about Accessibility.
Implementing Accessibility in WordPress
So, how can you make your website more accessible? Well, a good theme will attempt to implement and check the following things:
Headers
Headers should demonstrate a hiearchy of importance. This can be accomplished by using the various header tags: <h1> through <h6>. Make sure that the headers aren’t too small or that they make sense when added to your content.
<h1> <!-- Largest header --> <h2> <h3> <h4> <h5> <h6> <!-- Smallest header -->
Images
Visually impaired subscribers may use a text-to-voice program, so it is important to add a description. The program then reads the alternative text to the user. You will need to add the alt attribute to the img tag. For example:
<img src="http://www.hdwallpapers.in/walls/vivid_flowers-wide.jpg" alt="THe flowers in spring are beautiful">
After hovering over an image, some text might appear, this is where the screen reader / text reading program grabs the text.
Links
Make sure that the links on your blog are as descriptive as they can be! This is one of the ways that you can improve your site’s SEO. If you have to, you can rephrase your sentence and add a link like so:
You can watch cat videos by clicking here.
You can watch this cat video on Youtube!
In HTML:
<!-- Bad --> You can watch cat videos by clicking <a href="https://www.youtube.com/watch?v=tX4SMdXFUvs" target="_blank">here</a>. <!-- Good --> You can watch this <a title="Watch this cat video on Youtube!" href="https://www.youtube.com/watch?v=tX4SMdXFUvs" target="_blank">cat video on Youtube</a>
Colors
Some users also suffer from color blindness; however, that does not mean that you will need
Test, Test Test!
Can you read your site when zooming in? Did you add descriptive links and added description text to images? Is your typography clean and easy to read? Is there enough contrast in your page? How about the white spaces between your paragraphs/words? Are they easy to read? Is the text/font too small? Testing your site is the last and a crucial step, so test it out!
It’s time that we improve the web, for everyone’s sake. As Rand-Hendriksen, in Sarah Gooding’s article, states:
Accessibility can no longer be treated as a bonus feature, In many countries it is now a legislated requirement and that trend will likely go global in a few years.”
– Rand-Hendriksen author of the Simone theme, a responsive and access-ready WordPress theme
If you have any questions or suggestions, please leave a comment below.