25 Ways to Make Your WordPress Website More Accessible

Web Accessibility is important for anyone with a website to think about. While researching it I came across an excellent guide by Dennis Lembree on Web Hosting Guide about 25 ways to make your website more accessible. Dennis is a web accessibility expert, author of the Web Axe blog and of Accessible Twitter.  I’m going to piggyback onto the article and look at how WordPress users can achieve many of the steps outlined.

Not interested in accessibility? Major websites have been sued for discrimination for not meeting accessibility standards. You can read a breakdown of some lawsuits concerned with Section 508, which deals with web accessibility in the USA.

Let’s look at each of the points and see if WordPress gets it right, and how you can improve your own WordPress website to improve your accessibility standards.

1.    Consistent Layout and Structure

Diagram showing banner, navigation and sidebar layoutThe structure of your website should remain the same throughout. This means that the header, nav bar and sidebar should appear in the same locations across your site. This doesn’t only improve accessibility but it improves usability for every user. How annoying would it be to have a sidebar skipping around from page to page?  Since you’re using a WordPress theme on your site you’re already pretty sorted for this.

How does WordPress do?

Great!

2.    Add Alt Text for images.

Everyone who does a modicum of web design knows what Alt text is. It’s alternative text (duh)” and should be used as such – i.e. it should be an alternative to the picture. Therefore it shouldn’t just say “image” or “picture” but be descriptive. If you have a picture of a red ball your alt text should say “a small red ball.” Screen readers, which are used by people who have vision problems, will use this text to read out what is in the picture. This text also appears if the image on the page doesn’t load.

screenshot of wordpress image uploader with alt attribute

How does WordPress do?

By having a space for alt text on the image uploader WordPress goes some way to improving accessibility.

However, unlike the title attribute, the user does not have to include the alt attribute and many WordPress users will just ignore it.  This was a complaint that I found on the Accessify Forum where a user said that a major problem with WordPress is that it doesn’t force users to complete the alt attribute. On the one hand I agree that it would be good to force users to fill in the alt attribute so that they start using it as a matter of course. On the other, WordPress would have no control over what people put in the alt attribute so they could fill it with a random letter string which could end up being worse.

To improve your own website’s accessibility you should:

  1. Ensure that embedded images have descriptive alt attributes.
  2. Do not include alt attributes for decorative elements – use CSS for them instead
  3. If the image is a link, the alt tag should be used to describe what the link is
  4. For charts, graphs and complex pictures you should use a long description to give the same information as there is in the picture. You could try a plugin like Long Description. This is particularly important if you have a website with lots of graphs and data.

3.    Use Headings

Heading are important for having a good semantic structure to your website. They also  help screen readers to navigate your site. Normally a website will have a <h1> tag for its main title.

How does WordPress do?
Okay but not perfect, as we will see in the next point.

4.    Use Headings Correctly

There are a few rules to heading use (which I’ve just been learning all about myself). They are:

  1. Only one H1 per page
  2. The H1 content should be the same or similar to the title
  3. Use headings in order H1 – H6
  4. Don’t skip headings going down, skipping headings going up is okay
  5. You can use more than H1 when you’re using HTML 5

You can read this post for an interesting discussion on the best use of headings.

How does WordPress do?

The shift from Kubrick to TwentyTen saw a big improvement in the use of headings in the default WordPress Theme. Theme headings often work as follows:

<h1>Site Title</h1>
<h2>Post/Page Title</h2>

Then a user will come along and write their post using <h1>and<h2>, screwing up the order.

Twenty Ten uses a different structure – on the homepage <h1>is used for the site title, but on your posts the site title switches to a div and the <h1>is reserved for the content title.

Title code in TwentyTen theme

This means you can use <h2>upwards for your posts. This has been discussed in relation to SEO on this blog.

This is a great structure to use when building a theme as it lets end-users use the heading tags for their post and page content. However, different themes will do things differently so it’s worth checking it out.

Another solution is to use one <h2>tag before starting the main content structure. This is for navigational content that appears above the main content.

5.    Skip Links

A skip link is included at the start of the page and lets keyboard users skips past elements like navigational content to the main page content.

How does WordPress do?

Here is the skip link code in Twenty Ten:

screenshot of the twentyten skip link

It is better to have the skip link visible for keyboards users, or at least appear on focus. Unfortunately this doesn’t happen with Twenty Ten. Again this is a theming issue and it is up to individual theme designers to include a skip link in their theme. You can read here about how to add skip links to your own theme. Ideally you will have a skip link at the bottom as well to let your visitors go back to the top.

6.    Link Content Should be Meaningful

There are assistive technologies that show links on a separate page. Imagine a page where all of the links are “click here” or “more” – on the page of that assistive technology there would just be a whole list of links that said “click here.” That’s not very comprehensible.

  • The text for a link should still remain meaningful out of context
  • Never use “click here” or “more”
  • Don’t use the URL for the link text
  • Each link on a page should be unique to the page on which it appears.

How does WordPress do?

Mostly this is an end user issue. Who hasn’t used the words “click here” on a link? However, the “continue reading” link on the bottom of posts on your archive page causes a problem:

Screenshot of continue reading link in TwentyTen

A screen reader will pick out all of these “continue reading” links and have them on a separate page. A big list of “Continue reading”s is going to be totally meaningless.

You can read here about how one user improved his Continue Reading accessibility.

7.    Link Awareness

Image showing click hereIf your link does anything other than opening a web page in the same browser window you should make it obvious what it is. This could be including a little email icon for an email address or a PDF icon for a PDF. This icon will have both the image and the alt text. You should also ensure to use your link’s title attribute for supplementary information.

How does WordPress do?

Again, this is largely an end user issue so it’s something that you should be thinking about when you are working with WordPress.

8.     Correct Use of Title Attributes

screenshot of WordPress image uploader

Title attributes are often misused. Here’s a good example:

<a  href="…/sitemap.html/" title="Visit our sitemap">Sitemap</a>

A screen reader will read this as “Sitemap visit our sitemap.” Pretty nonsensical, right? In these cases you don’t need to use title attributes as the link itself is self-explanatory. These can be very annoying for people using screen readers. They can also cause problems for people using screen magnifiers. The title will appear as a tooltip and, due to the magnification, can obscure other elements on the page.

How does WordPress do?

Not great. Too many title attributes can cause a “stutter” in your website when browsed with a screen reader and WordPress inserts a lot of title attributes – to images and to links. You can automatically remove your site’s redundant titles by adding a function to your functions.php.

Or you could try this plugin to remove the titles from your images.

9.    Keep the Underline

Underlining the text really helps links to stand out. This is primarily to help people who are colour blind – of which, as we have sign, there are many. A person who is color blind may find it impossible to discern which of the text is hyperlinked, and which isn’t.

Remember! This means that you should never underline text that isn’t hyperlinked. That can cause much confusion!

How does WordPress do?

The default Twenty Ten Theme uses underlined links and many of the major themes  also do. If you are using a theme that isn’t using underlined links then maybe now is the time to start thinking about playing with your CSS.

10.    Forms

To ensure that a web form is accessible there are a number of steps you should take:

  1. Fields should be correctly labelled with each field having a unique ID:
  2. For longer forms use legends
  3. Validate your forms
  4. Don’t ask for information that you don’t need
  5. Information such as “required” should be inside the form label (that little red star you use will not be picked up by a screen reader)

How does WordPress do?

screenshot of twenty ten comments

As you can see above, the comment form on the default Twenty Ten theme is well labelled. However, most WordPress forms are created using 3rd party plugins. It becomes your responsibility to effectively choose a contact form that is set up for good accessibility. You could try Fast Secure Contact Form or form behemoth Gravity Forms.

11.    Make Links Keyboard Accessible

There are loads of people who don’t use a mouse while browsing the internet. They use their keyboard instead. Navigating a website using a keyboard means that the user relies on the designer having created a website that has a logical and semantic structure. Some things to avoid:

  1. Don’t use double click handlers onDblClick or the click handler onClick as a keyboard can’t handle this behaviour
  2. Avoid using onMouseOver and onMouseOut Javascript Handlers
  3. If you are using Javascript make sure to give the link a tabindex value of -1 – this will make your divs keyboard accessible

How does WordPress do?

The default theme doesn’t use these types of behaviour and I have yet to come across one that does use them. But there are bound to be some out there. Be aware!

12.    Link Focus

screenshot of link focus on TwentyTen theme

Make sure that your links are highlighted or have some sort of focus when they are selected. This could be using underlines, different colors or a different background color. This ensures that someone who is navigating your web site using their keyboard doesn’t get lost.

How does WordPress do?

Twenty Ten has goes some dotted lines appearing around the links, but that’s it. You could improve it by adding a bit of CSS to change the background color. Check your own theme by tabbing through the links to see how it does. If you get totally lost you might want to consider adding some CSS to make it easier for keyboard users to navigate.

13.    ARIA Roles

ARIA is a new WC3 specification that is used to make technologies accessible to screen readers. ARIA Roles map out a webpage making it more readable by screen readers (nb – not all screen readers use ARIA technology). They’ll include different roles such as navigation, banner and main.

screenshot of Twenty Ten's ARIA rolesHow does WordPress do?

Twenty Ten does incorporate ARIA roles but other themes are pretty lacking in that area. There’s no plugin that can fix this issue so it’s really down to individual theme developers to incorporate ARIA landmarks into their themes.

You can, however, improve upon your  own theme’s accessibility by adding Aria roles yourself. Like so:

<div id="branding" role="banner">

Simple!

There’s more information here about adding ARIA roles, including a table with them all listed.

14.    Validate

Code that doesn’t validate can cause problems for screen readers which have difficulty with incorrect code.  You can validate your code using the W3C HTML Validator and CSS Validator.

How does WordPress do?

Screenshot of Validated HTML results

Pretty good, no issues validating the HTML. But then this is once again a theming issue so it’s up to designers to ensure that their code validates.

15.    The Three Tiers and Progressive Enhancement

In web design the Three Tiers separates out content, style and behaviour. This ensures progressive enhancement – ensuring that everyone can access the data regardless of browser. It also ensures that people with better browsers get more enhancements to their page.

How does WordPress do?

We are all familiar with our good old CSS and PHP files. WordPress’ functions are kept separate from its styles which are kept separate from the rest of the PHP. This approach helps with the three tiers.
Try your theme out in a number of different browsers to ensure that it degrades gracefully. Much as I love plugins like graceless degradation if you are concerned about accessibility you should ensure your website works cross-browser. Remember, there may be people who genuinely want to upgrade their browser but who can’t!

16.    Use Lists

Lists are a fantastic way to make your text more readable to anyone. However, you should make sure that they have been marked up correctly. Ensure that any images that you use for bullet points are styled in your CSS file.

How does WordPress do?

Good! A CMS like WordPress lets you easily add ordered lists and unordered lists to your content. No coding required!!!

17.    Never Rely on Color Alone

We are all aware that certain colors imply different things – on traffic lights red means stop, green means go and amber means get ready. However, if someone is color blind they are unable to see what you mean. The Matrix might have ended a little bit differently if Neo had been color blind:

“Red pill or blue pill?”

“Errrrr….. that one?”

As website owners it’s our responsibility to make sure that people know what we’re talking about.  Don’t say click the red button or click the green button – have more than one indicator. It could be a different shape or have a word on it.

How does WordPress do?

This is a design and content issue so choose your theme wisely or be aware of it when creating your design.

18.    Color Contrast

Your color contrast ratio should be a minimum of 4.5:1, with 7:1 being needed to reach the highest standard.

How does WordPress do?

Again this depends on the theme. The contrast on Twenty Ten is pretty good but other themes, such as Platform, don’t have such a good contrast ratio – light grey on white does not make for very easy viewing. Luckily lots of themes, like Platform, have extensive theme options that will let you easily change the theme’s colors. If your theme doesn’t have options then you’ll have to get your hands dirty with a bit of CSS. You can use this color contrast tool to check out your contrast ratio.

19.    Make Sure Tables Are Marked Up Correctly

a table of tables

Argh! Who uses tables anymore? Some people….. I used them recently myself. For accessibility you should ensure that your tables are marked up correctly.  Give your table a caption and summary attribute. You should also use  as opposed to  for headings, to indicate when the top cells are headings. In any case, you really should use CSS for pretty much all of your layout needs. Or find a time machine, go back ten years and start using Geocities where you’ll feel right at home.

How does WordPress do?

When I want to make a table I use a plugin. WP Table Reloaded does a pretty good job, using the caption attribute and properly using  and. Here’s the code:

<pre><strong>
</strong>
<h2><strong>My table</strong></h2>

<table id="wp-table-reloaded-id-1-no-1">
<caption style="caption-side: bottom; text-align: left; border: none; background: none;"><a title="Edit" href="http://mywebsite/wp-admin/tools.php?page=wp-table-reloaded&amp;action=edit&amp;table_id=1">Edit</a></caption>
<thead>
<tr>
<th>Outdoor tables</th>
<th>Bedroom tables</th>
<th>Living Room Tables</th>
<th>Big Tables</th>
<th>Other Tables</th>
</tr>
</thead>
<tbody>
<tr>
<td>picnic table</td>
<td>bedside table</td>
<td>side table</td>
<td>dining table</td>
<td>desk</td>
</tr>
<tr>
<td>garden table</td>
<td>nest of tables</td>
<td>coffee table</td>
<td>conference table</td>
<td>water table</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>banqueting table</td>
<td>table</td>
</tr>
</tbody>
</table>

<span><strong>A table with information about tables</strong></span>

Unfortunately the caption only includes the “Edit” button – which isn’t all that great for accessibility. But it does include a title at the top and a caption underneath which helps out.

Can you recommend any other tables that are good for accessibility?

20.    Changes to Content Should be Clear

ARIA Live regions are a relatively new technology for alerting screen readers to any dynamic content. More and more websites are using content that updates dynamically. In this situation how does a developer alert a screen reader? ARIA Live regions can alert the reader to elements that are going to be updated.  The values are off (the default)polite, assertive and rude.

How does WordPress do?

Since it’s normally plugins that have dynamic content it’s down to the individual plugin developers to add these regions. As we’ve seen, WordPress itself already includes ARIA regions in its default theme – there aren’t any dynamic regions to add the live values to.

These last five are less WordPress issues and more user issues so I’ll cover them briefly (because if I didn’t achieve completeness it would drive me a bit mad!) You can read more detail about them all on Dennis’ original post.

21.    Flash

Dennis goes into Flash in detail, so I ain’t going to. Needless to say Flash isn’t great for accessibility If you are going to use Flash you should always try to include an accessible version.

22.    Provide Transcriptions

Transcriptions of video and audio are an important part of improving web accessibility. A screen reader is unable to read a video or an audio file. You can use the Media Access Generator to provide a transcript of any audio or video.

23.    Add captions

As with providing transcriptions! You can use the Media Access Generator for those too – nice!

24.    Use Appropriate Language

Clear, concise web content is really important. You may have visitors with cognitive or learning difficulties. To learn about writing great web content you can read my post all about it :)

25.    Test!

Test your website through multiple methods.  Dennis advises doing the following:

  • Navigate your website only using your keyboard
  • View your website without CSS
  • Test the contrast
  • Test your website in different browsers. Browser Shots is a great tool for this.
  • Check for color specific instructions and language
  • Check your heading structure
  • Try something like the FireFox Accessibility Evaluation Toolbar

Test with some the tools below:

Conclusions

Accessibility, when it comes to WordPress, is mostly down to themes . Some themes are better than others. It’s up to the website owner to choose a theme which meets accessibility standards. I talked to Karel from Access for All about this. He said that pretty much every theme will need modifications to be brought up to accessibility standards so the onus is really on you, the website owner.  Those 25 steps should be a great place to start.

If you want to improve your website’s accessibility even further you could try out some of these WordPress plugins:

Unfortunately many plugins end up causing problems for accessibility and these are more difficult for end users to correct than any problems with themes. If you are concerned about your website’s accessibility you should really ensure that your plugins don’t cause any issues on your website.

Further Reading:

Many thanks to Dennis for writing such a great article that I could adapt for all you WordPress users!!!!

Comments (18)

  1. Siobhan, thank you for a great compilation of what can be done to make WordPress sites more accessible. I agree that themes play a large role in the accessibility – or lack thereof – of blogs and sites. There is definitely a need for more themes that meet accessible standards.

    Another point to add to the list is tabindex which sets the order for when tabbing through a page. This helpful to people who navigate through the page using the tab key. Some people recommend not setting the tabindex, otherwise strange ordering can result, like when tabbing through this comment form.

  2. Thanks for the pointers. You may want tell people about some free accessibility checkers you can use to test your webpages. None of the automatic ones are perfect and still require humans to completely evaluate the webpage, but they provide a good starting point for the broad accessibility issues. My favorite is WAVE by webaim.org – http://wave.webaim.org/

    I know that after you read this you will test your blog pages with WAVE and then get busy fixing the accessibility issues here !

  3. This is a useful article and really does prompt people to think about how they can make their WordPress blog and/or site more accessible.

    I echo Glenda’s comment above about the tab order. I’m sighted but I do use the keyboard a lot and the tab order of this page is confusing.

    I would also draw your attention to your point 12 about visible keyboard focus. The theme that you have chosen for this site does not provide that feedback.

    But once again, thanks for the article and since I use WordPress a lot I’ll be checking out your other articles. Cheers.

  4. Hi Siobhan
    Another great in-depth article.
    How long does it take you to write these things?

    I know that we should all try and make our blogs more accessible but it’s all too easy not to bother.
    Thanks for the reminder.

  5. Great article–lots of valuable accessibility tips for WordPress development! Here are a few comments:
    -For alt text, “picture of a red ball” should be more like “a small red ball” (no “picture of”).
    -For headings, if using HTML5, you CAN have multiple H1 tags.
    -For skip-to links, it’s better to have it displayed by default (for keyboard users), or at least displayed on focus.

  6. Thanks for all of the comments!

    @Graham and Glenda – I did realise this as I was writing and wasn’t quite sure whether to include it! But I think it’s important and will pass on the info to our designer :) He’s away at the minute though so it might take a while to get updated.

    @Keith They take a looooooong time to write. But always worthwhile!!

    @Dennis I have updated with your comments. Thank you!

  7. Wow, this is a lot of information to take in all at once. I am going to have to come back to it later. Quite surprised as some new stuff here that is not normally discussed. Well done for coming up with an original blog post. The first I have come across today.

  8. Hello Siobhan,

    Nice work. Just after our talk, I remembered a very good WordPress plugin to create access keys:
    - Access Keys: This plugin allows you to add Access Keys to Category and Page navigation menus to make your website far more accessible.

    Also using explanatory acronyms is a must. here again, a plugin is available:
    - Acronyms: A plugin to wrap acronyms in posts and comments with appropriate acronyms. Allows users to manage lists of acronyms through admin interface.

    Also, breadcrumbs are very handy for people with limited ability of the upper limbs to easily go back to previous pages or top pages:
    - Breadcrumb NavXT: Adds a breadcrumb navigation showing the visitor’s path to their current location.

    Finally, providing a clear print of a page, without all the images is much wanted by people with visual impairments. Here as well an accessible plugin is available:
    - WP-Print: Displays a printable version of your WordPress blog’s post/page.

    As a general policy, we play around with many plugins and try to see the highest benefit for people with disabilities. At this moment, we have been contributing to creating also an accessible calendar plugin for WordPress. This and other plugins will be made available by the end of the year and will be demonstrated at the AEGIS event we organise in Belgium (see http://www.aegis-conference.eu).

  9. Hi Nice article!

    In my opinion WordPress has the best templates and layouts. WordPress is super easy to use, and most important, it is very SEO friendly, this is why so many people are using WordPress.
    I have been using wordpress as a CMS platform for my clients
    http://www.beyowi.com/

Participate