11 Ways to Make Your WordPress Website More Accessible
Accessible, Responsive, and Readable
Creating an organized and optimized website goes for more than just search engine optimization; providing your website viewers with more ways to consume your content can also make your website more accessible.
In researching accessible websites for the visually impaired and radio stations, I found there are some very basic, some not so, ways to improve your readability and seo in taking advantage of some of WordPress’ built in features. Here’s a few ways you can improve your website by making your content more accessible.
1. Use a consistent & organized layout.
Make sure your header, banner, main navigation, and sidebar appear in the same place throughout the website. A consistent structure and layout is good for any website, but also provides both the human and computer screen readers the ability to follow your content. Plus, it’s also helpful not to annoy the person reading your site by moving the major elements all over the page.
Because we’re talking about WordPress, this accessible feature is already well handled by the content management system.
2. Add image titles, alt tags and descriptions.
All of the images on your website should make use of the title and alt tags. Both the title and alt information provide descriptions for the image that can benefit both you and the reader. A couple of the most important ways being: search engine optimization is bolstered by providing search engines with a text description of the, sometimes, un-indexable image files; and also provides the visually impaired the information necessary to understand what this image is in it’s context. Here’s a few ways to make your image files more accessible:
- WordPress doesn’t require the alt attribute, add the Alt tags to your embedded images.
- If the Image is linked, describe the link the user is being directed to.
- Don’t use alt tags for your design element like lists, css can handle that for you.
3. Use proper headings.
WordPress has a well set heading and text styling structure built in and any theme worth looking at manages this too. You just need to make sure you put it to use. Here’s a few “rules” to follow in using headers correctly:
- Only use one h1 heading per page.
- When using the h1, keep it similar to the page’s title.
- Outline your page, use the heading tags in order h1 before h2; and don’t skip.
4. Use meaningful link’s.
Avoid naming your links with “click here” or “more”. Use more descriptive text that can remain meaningful outside of the context. If you’re going to send your reader over to reddit: the front page of the internet, or the most awesomest thing ever, make sure you tell them exactly where they’re going. And also avoid using the url link as the content text, you could end up with a page full of url if you aren’t careful.
5. Identify your links and their focus.
If your links do anything other than open a link in the same window you should make it clear to your reader. You should also make it known if your link is another web page, video, or pdf file to be downloaded. One effective way is to use icons that represent any non standard links; a pdf icon can be placed next to your file download for example. The icon will also give you the option to add those alt and title attributes we talked about earlier.
6. Validate your html and css.
This is a bit easier said than done, especially for those who may not be CSS or HTML experts. WordPress handles most of this for you, and a good theme will also help you keep your code in check, but I listed a few tools for you to see where you website code stands down below.
7. Increase responsiveness.
With all of today’s Internet enabled devices, this may be one of the most important aspects of an accessible website. It’s probably safe to say that ignoring mobile devices is a major “no no” if you want to maintain any sort of accessibility.
Creating responsiveness in an existing site is a bit of a task, but there are many options out there for responsive themes and plugins to help you reach all of the devices you want your website displayed on. My website sublimedzine.com is responsive and RESPONDS to the device and the screen resolution being used; try it out and resize your browser window to see what happens. Here’s a few theme resources I use:
8. Use those lists.
Lists are an easy and effective way to make your content more readable. Make sure you’re using CSS to manage your lists; something already in WordPress,so you’re good to go with both ordered and unordered lists.
9. Get rid of that Flash.
Flash is just that, Flash. You can create some pretty nice sites with Flash, but accessibility is a major issue and Flash is not very friendly to the mobile players on the Internet. Much of what Flash accomplished beyond HTML is now possible with CSS. Adobe offers some best practices for using Flash and accessibility as well if you absolutely need to use it.
10. Transcribe your videos.
Providing your users with transcriptions of your audio and video files is another great way to up your accessibility and seo. Much of what is said or seen in video and audio files cannot be read by a screen reader or heard by the hearing impaired. There are a few options out there that can provide transcription services, some free, some paid. I can’t recommend any at this time, as I have not had the privilege of using any of them yet,
11. Try it out!
Take your website through all the hoops. Make sure to test your website in all of the environments you can possibly think of; various browsers, screen resolution, operating system, and hardware can make quite a difference in the way your site appears to the end user. Here’s a short list of some of the tests I go through:
- Navigate your website only using your keyboard. Is it possible?
- View your website without the CSS. Is it still legible?
- Test the contrast. Someone with color blindness may not appreciate the colors as much a me.
- Test your website in different browsers. Browser Shots is my favorite way to see what my websites will look like in the various browsers about the Internet.
- Check for color specific instructions and language
- Check your heading structures
To conclude, a website’s accessibility is a work in progress. Taking advantage of WordPress and a good theme will handle much of what I talked about above, but ensuring your site is accessible also requires you to tailor your content as well.
It should also be noted that some plugins and themes used in WordPress may cause issues with your accessibility, code validation, and the overall control of some of the accessible elements I touched on. The responsibility for keeping your site accessible is ultimately yours; stay vigilant, listen to your users, and keep your site updated.
Recently the