Wednesday, 20 June 2012

Web Accessibility and Self publishing… using WordPress on the No Boundaries web site.

illustration of a figure reading WWW braille with a wordpress logo for a head, depicting writing with wordpress for accessible reading on the internet. If you are a regular visitor to this No Boundaries site you’ve probably noticed some changes… not just to the content, but to the style, layout, form and structure. This has been because we have been working through the steps to make this site as accessible as possible. As at 30th June 2012 we think we’re 95% of the way towards best practise.

We think some of you might be interested in the story behind this and the decisions we’ve made, especially if you are using wordpress to blog and would like to present your information to people with sight impairment.

When the No Boundaries project began we began talking about the project online using a basic wordpress site, because its a low cost, easy to maintain method of self-publishing, and its very simple to provide opportunities and training for our community to have input and be involved in the writing and development. However we couldn’t find a free wordpress template that offered accessible web standard compliancy.

If you are wondering about Web site accessibility and compliancy, you can look up the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) that were released as a W3C recommendation in 2008 by the World Wide Web Consortium (W3C).

These guidelines are an international standard that define how to make web sites more accessible to people with a range of disabilities, and that consist of 12 guidelines supplemented by 61 success criteria—testable standards that web sites should meet. These are arranged in three levels with level A (the lowest), being the most fundamental and essential. The more success criteria a site meets, the more accessible it is likely to be. However, it is still possible that people with some types, degrees or combinations of disabilities might still have problems using the site. Australian legislation requires all government sites to be accessible to these standards.

Vision Australia (link to VA web site)Fortunately one of our project partners, Vision Australia, are experts in a process of web site auditing and recommendation through their Web Access team. Vision Australia provided this service to No Boundaries and in early May carried out a first “web site audit”, and produced a report for us, which pointed out lots of issues with the site, and suggestions on what to do about them. It also told us what wordpress was doing right in its automatic model of web page publishing. We had a bash at fixing these (and got most of the problems fixed straight away) and then Vision Australia carried out another review for us to see how we were doing.

Although we’d been worried about the site and whether it was even close to being accessible, this report made the process of correcting the flaws really easy. We will outline some of the basic issues below, because if anyone else is using wordpress twentyten as their template, you can follow these same steps to help make your site more accessible too.

Issues found in the No Boundaries site, by Vision Australia’s audit… and how we fixed them:

Images need alt tags

This is something we started doing from scratch, but there’s always room for improvement. As images are added and displayed on the wordpress site, you should give the image a relevant and useful name, but then also use the alt tag to add a very usable description to what is in the image. The alt tag is only read by electronic screen readers, (it may display by default if you hover your cursor over an image), and alt tags shouldn’t be left blank (if you are going to use an alt-tag, put information in it, as leaving it blank is a nuisance for the screen readers). So if you are using wordpress and want the images to be more accessible, use alt tags to add good, details and descriptions of what is in the image. Detailed captions and descriptions in the body of the text are very helpful as well!

Empty heading/link in header, and No title on the home page.

When we first built the site we didn’t have a name or tagline in the wordpress site title or tagline. Unfortunately wordpress still puts an empty link tag there, which is a nuisance for blind users who rely on a screen reader to browse pages – it will have a heading and link announced to them. To fix it, we simply added a site title and tagline, but we could have also directly modified the header.php wordpress page.

Blank alt text used for banner image.

This was a bit more tricky to fix because its an inherent problem with the twentyten template… it doesn’t let you specify an “alt” tag for the header image through the back end. So the only option is to add one manually, or to remove the blank alt text, directly in the header.php file.  It took us a while to find out where that was … but we did it manually in the php code, and the site didn’t break! We decided not to have any alt tag for the header as really the header contains the same information that appears later on the same page. We didn’t want people with e-readers to have to listen to the information twice.

Legibility of Serif vs Sans-serif font.

Well, I learned something new… SANS-serif is far more readible for many with impaired sight. And the default font of wordpress twentyten will display as Serif based Times in most browsers. You can’t change it in the template’s back end, but we eventually worked out how to modify the wordpress page styles.css to override the body tag’s default font-family, simply to sans-serif.

Headings not marked up a headings

As you can see from this page, we worked out how to use headings! Headings are a feature that help reading aids and devices, give quick overviews to how the information is chunked. Using headings will give people short cuts to find the text they are interested looking at. We found that wordpress simply and easily supports headings and other html format options in the content editing tools of the wordpress backend. It is standard in all wordpress templates, so really there is nothing technical about this at all… you just need to think about chunking the content as you build it… and use appropriate heading levels (h1 through to h7) to organise the chunks.

PDF links do not describe their target

This is an outstanding issue we have to fix. Basically PDF files have lots of accessibility issues, and we’ve been advised to replace them with more accessible formats. So in time we will either update our links, or replace the targets. Should be able to have that sorted by mid July.

WCAG 2.0 compliance and where to from here?

As you can gather… we have done a lot of work with the help of Vision Australia. At first it was a bit daunting, we were worried that wordpress might be hard to make compliant. But as it turns out, twentyten is close to the mark, and using the blog template has made it easy to update the whole site quickly. And for anyone on a budget or wanting a quick turnaround, that is a bonus.

If you spot anything on the site that’s not up to scratch or have a suggestion, do let us know! There is always room for improvement.

From here on in we will be focused on making sure that the content is easy to access, simple to digest, and engaging… and hope also to begin sharing these simple self publishing techniques with some of our project collaborators so that there’s more people able to use wordpress for best practise.

If you live in Penrith, want to blog, get in contact and be part of this project, make some content and learn how to use wordpress – we’ll show you how (it’s easy).

For another day… looking at the accessibility of WordPress’s back end, and also… what about… facebook!?