45,000 public bodies across Great Britain are covered by the Disability Equality Duty (DED), which came into force in December 2006. The DED is meant to ensure that all public bodies—such as central or local government, schools, health trusts or emergency services—pay ’due regard‘ to the promotion of equality for disabled people in every area of their work.
This, of course, applies to websites too and the government has generally adopted the W3C's Web Accessibility Initiative Guidelines (WAIG): public sector websites are required to reach Level AA of the WAIG.
As some of you may know, in my real life I am involved with a company that specialises in building and reviewing Accessible websites—so the technicalities of the WAI are something that I am pretty familiar with.
So, inspired by the wife, I decided to go and have a look at the Labour Party website. It's not good—not good at all.
Click here for a larger PNG version.
The home page is shown above, and the numbers correspond to the points below.
- Text rendered as images: this should be avoided where possible, especially where that image is also a link.
For those using the Tab key, many dropdown menus will not activate—meaning that those users cannot navigate the site.
In this case, the menus have been rendered as a collection of nested lists, with no
skip-navlink: this means that someone using a screenreader will have to navigate through every, single link in all of the submenus before they can get to the page content. On every, single page!
- Flash. Ugh. I am using a Flash blocker, but many assistive technologies will prevent the use of Flash entirely—quite apart from locking out those who don't have the Flash plugin installed. This is, apparently, a quiz—for what it's worth.
- Aaargh! The site is using Flash to render headings, so that a custom typeface can be used. There is an alternative text version for those without Flash...
- ... but this heading—News—is an
For those not familiar with how headings should be arranged, think of them as being like an index to the page information—like a table of contents—where lower numbered headings relate to the higher numbered heading before them.
For instance, a well structured page might look like this:
<h1>Welcome to DK's website
<h4>Who I am
<h4>Where I live
<h4>How to contact me at home
<h4>Who I work for
<h4>What my job title is
<h4>How to contact me at work
<h2>What DK is doing
... and so on and so forth. You should only ever have one
h1on a page—it explains what that page is, broadly, about.
You should never skip headings, i.e. in the flow of the code, you should never jump from an
h1directly to an
To return to the point originally made, the
h1for this page should be something like
<h1>Welcome to the Labour Party online
</h1>or something similar—not News.
- See that link that says "Continue Reading"? There are a couple of problems here, which are also wider site problems.
First, using all capitals is a bad idea: those with literacy problems will struggle more than usual.
Second, a screenreader allows the user to take links out of context in order to navigate through the page; as such, all the screenreader user will hear is "continue reading" (and three of them at that). Continue reading what exactly?
- Ooops. This heading—Videos—is another
h1! No, no, no.
- These videos are hosted on YouTube. Video is a difficult subject as regards Accessibility (although the HTML5
videotag should make life easier once browsers support it properly) but, as a bare minimum, you should provide a transcript for those using screenreaders. Ideally, you should also have close-captioning too (for deaf users).
- Another Flash heading—How You Can Help. The text alternate is an
h5! So, we have jumped from an
h5. Except that we haven't.
Because in the flow of the code, the first heading is this
- Another Flash heading—Join The Fight is one heading, followed by For Britain's Future. And the textual alternate is an
- Yet more Flash headings—the textual alternates are all
h6s, which is roughly correct.
- There are no
labeltags on these forms—ensuring that many screenreaders will not know what is supposed to go in here. They will just say "input". Yes? Input what?
- Another Flash heading—Local Labour News. This heading is an
- The contrast between the yellow text and the red background is insufficient. Those with poor eyesight—and that includes those with colour blindness—may not be able to read this text at all. There is an excellent colour contrast tool over at Juicy Studio: it uses the algorithms given in the WAIG 2.0, and gives you the compliance Level (A, AA or AAA) for varying text sizes.
- More Flash headings—Site, Labour's Polices, About Us and Support Labour. These are
h3s! Do bear in mind my example of good heading structure above, whilst I review what this page's heading structure is (going in code order).
<h5>How You Can Help
<h6>Join The Fight
<h6>For Britain's Future
<h6>Events Near Me
<h6>Labour In Your Area
<h6>Tell Your Friends
<h6>Why I'm Labour
<h4>Local Labour News
To summarise, the headings are in a totally nonsensical order, they don't relate to the parent headings, and there is no
h2at all! This is abysmal.
- This list of links... Well... Instead of using an unordered list—
ul—these links are simply loose in the code (not good practice). Further, the bullet points have been generated using an
•character, so a screenreader will read, "bullet point... link: home; bullet point... link: Labour in Government; bullet point... link: News; bullet point..." Well, you get the idea.
Believe me, someone who is blind is going to get pretty sick of having to listen to the word "bullet point" before they can hear what the link is. They could, of course, switch to links only mode, but they are going to have to go through all of the links in the top navigation first...!
There are a couple more general points to make.
- Much of the page structure is rendered in tables. Don't use tables for layout—use tables to display tabular data. And when you do so, you should make them Accessible, i.e. include
headand then hook them to the HTML elements with classes or ids.
Some people like to apply their own custom stylesheets to webpages, e.g. many dyslexic people find that a pale pink or pale yellow background helps them to read the text much more easily. Using CSS within the page will over-write the user's styles, thus making the information more difficult to access.
It is a pretty poor showing Accessibility-wise: in fact, NuLabour is breaking their own law by blatantly discriminating against disabled people on their website.
How much does this matter?
Well, as far as I am aware, no organisation has yet been taken to court in the UK for having a non-Accessible website—although I know of a few cases where legal action was threatened. Of course, often because disabled people simply don't have the money to fight a lawsuit, but this is a role that advocacy groups might take on.
For instance, in the US (where a similar law applies), a private individual was bolstered by the National Federation of the Blind and NFB California in suing Target for its inAccessible target.com website. Target settled out of court for $6 million, and promised to make the website Accessible and incorporate website Accessibility into its staff training.
In this country, it is a legal duty for all organisations—pubic and private—to ensure that their website is Accessible. It's also, I think, a moral issue too: I have taken part in a lot of events, given talks and participated in debates around this issue—with able and disabled alike—and I have seen just to what extent the web can empower those with disabilities. Technology (and especially the web) is a massive force for good in this respect, opening up all sorts of avenues—not least in enabling them to work: a great many disabled people become self-employed entrepreneurs because they cannot find employment.
Anyway, I hope that some of the points that I've raised have been useful to any of you building a site!
What I must also say is that I am well aware that this blog is not particularly Accessible—I shall be addressing that as soon as I can, i.e. within the next few weeks.
An Accessible site does not have to be a boring site, by any means: an awful lot of Accessibility is simply to do with good HTML engineering, and the rest is about providing alternatives for those with varied disabilities.
But simply providing a text-only version of your site does not mean that your website is Accessible—a text-only version of this Labour home page would still have the useless heading structure and confusingly huge numbers of links that the normal, graphics version has.
Oh, a quick disclaimer: the company I work for (and am now a very tiny shareholder in) does do website Accessibility audits and Accessibility training—feel free to drop me a line if you're interested...
UPDATE: Commenter Mark Wilson says that the WAIG are a bit old.
The problem is that the accessibility guidelines (WCAG) are really old and not really designed to cope with the modern internet.
Not so. Yes, WAIG 1.0 were released in 1999, but WAIG 2.0 were released in December 2008 and were specifically designed to take account of new technologies—in fact, they are designed to be technology-neutral.
The danger with a check list approach in designing a site when your check list is hopelessly out of date is that you don't really address the underlying issues with disabled people using web sites and you also become risk averse and don't innovate with truly useful web sites.
And this is why people should gain an understanding of Accessibility and update their knowledge of the subject as they update their knowledge of, for instance, coding or design.