Thursday, December 31, 2009

Accessing Labour

In 1995, the Tories introduced the Disability Discrimination Act (DDA). The provisions of the DDA were considerably bolstered by NuLabour in the DDA 2005; NuLabour also introduced the Disability Equality Duty (DED).
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.

A screenshot of Labour's website, with annotations.
Click here for a larger PNG version.

The home page is shown above, and the numbers correspond to the points below.
  1. Text rendered as images: this should be avoided where possible, especially where that image is also a link.

  2. Hover states are swapped in by Javascript swapImage, rather than by CSS. Someone with Javascript switched off, e.g. those with partial sight using a screenreader, will see no feedback. Those navigating with the Tab key, rather than a mouse, will also see no feedback.

  3. Dropdown menus are a big no-no, for a number of reasons. If they are Javascript-rendered then they will not appear in the HTML, and therefore will not be read by a screenreader.

    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-nav link: 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!

  4. 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.

  5. 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...

  6. ... but this heading—News—is an h1. Aaaaargh!

    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</h1>
      <h2>About DK</h2>
        <h3>Personal Life</h3>
          <h4>Who I am</h4>
          <h4>Where I live</h4>
          <h4>How to contact me at home</h4>
        <h3>Work Life</h3>
          <h4>Who I work for</h4>
          <h4>What my job title is</h4>
          <h4>How to contact me at work</h4>
      <h2>What DK is doing</h2>
        <h3>Current Blogging...</h3>

    ... and so on and so forth. You should only ever have one h1 on 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 h1 directly to an h3.

    To return to the point originally made, the h1 for this page should be something like <h1>Welcome to the Labour Party online</h1> or something similar—not News.

  7. 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?

  8. Ooops. This heading—Videos—is another h1! No, no, no.

  9. These videos are hosted on YouTube. Video is a difficult subject as regards Accessibility (although the HTML5 video tag 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).

  10. Another Flash heading—How You Can Help. The text alternate is an h5! So, we have jumped from an h1 to an h5. Except that we haven't.

    Because in the flow of the code, the first heading is this h5!

  11. Another Flash heading—Join The Fight is one heading, followed by For Britain's Future. And the textual alternate is an <h6>

  12. Yet more Flash headings—the textual alternates are all h6s, which is roughly correct.

  13. There are no label tags 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?

  14. Another Flash heading—Local Labour News. This heading is an h4!

  15. 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.

  16. 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</h5>
                <h6>Join The Fight</h6>
                <h6>For Britain's Future</h6>
                <h6>Events Near Me</h6>
                <h6>Labour In Your Area</h6>
                <h6>Tell Your Friends</h6>
                <h6>Why I'm Labour</h6>
          <h4>Local Labour News</h4>
        <h3>Labour's Policies</h3>
        <h3>About Us</h3>
        <h3>Support Labour</h3>

    To summarise, the headings are in a totally nonsensical order, they don't relate to the parent headings, and there is no h2 at all! This is abysmal.

  17. 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 &bull; 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 legend, caption, scope, etc.

  • There are pieces of CSS and Javascript scattered throughout the HTML. Don't do that. The HTML is for structure, not for styling or scripting. Call the CSS or the Javascript in the head and 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 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.
Insisting the site works with JavaScript turned off for instance stifles an awful lot of functionality. See Gmail with it turned on and off for an example.

Sure. And for those instances, there are the Authoring Tools Accessibility Guidelines (ATAG) and the Web Accessibility-Accessible Rich Internet Applications guidelines (WAI-ARIA). These deal with, for instance, protocols for informing screenreaders that Javascript has changed something on the page.
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.


thefrollickingmole said...

Just a suggestion, but if you do a good job on it, can you tout for more work using your own blog as an example?

OR might the contents of this blog make maiden aunts faint and clergymen take to their rosary beadsin shock?

Anonymous said...

Aren't they using the <hX>s in a misguided attempt to achieve a certain font size?

Devil's Kitchen said...


Absolutely: when I was freelancing almost all of my work came through The Kitchen. But I don't want to link directly into the company that I work for, for obvious reasons.


They may well be doing that, but the sizes should be defined in the CSS. Given how much they have customised the headings—with Flash, etc.—I seriously doubt it though.

Besides, they could actually make an h5 in the sidebar a different size to the h5 in the main text if they wanted to.


JuliaM said...

"...public sector websites are required to reach Level AA of the WAIG."

Yeah, but they had their fingers crossed when they said that...

I'm told (by friends who work in the public sector) that internal webpages are even worse, and sometimes, even e-learning designed to explain the accessibility rules isn't accessible to those staff requiring specialist disability software!

Mark Wilson said...

The problem is that the accessibility guidelines (WCAG) are really old and not really designed to cope with the modern internet. Insisting the site works with JavaScript turned off for instance stifles an awful lot of functionality. See Gmail with it turned on and off for an example. 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.

I am not sure what the answer is really, a new up-to-date testing
method with the involvement of RNIB and other interested parties I suppose.

(many of the points you raise are perfectly valid regardless of accessibility, separation of semantic content from presentation etc.)

Wossat? said...

New Labour doesn't live up to what they insist is printed on everyone else's box. Who knew?

Kick the bastards in the balls, DK. Hard! It's what they deserve.

Anonymous said...

I think the law is deeply misguided. If I want to be a twat and not give a fuck about some section of my market I should be free to do so.

Rational Anarchist said...

"Insisting the site works with JavaScript turned off for instance stifles an awful lot of functionality."

Maybe, but I still do all of my browsing with Javascript disabled if I possibly can - leaving it on opens you up to all sorts of attacks.

Edwin Greenwood said...

"Aren't they using the <hX>s in a misguided attempt to achieve a certain font size?"

It's a hard habit to break. When I started building (internal) company websites in the late 1990s to be typically displayed by Netscape 3 and IE 4, separating content from rendering using CSS wan't a realistic option so structure was ignored and <h2> and <h3> were the order of the day.

But there's really no excuse nowadays, particularly for an "official" public site.

Anonymous said...

Be interested in a libertarian justification for government compelling "all organisations—pubic and private—to ensure that their website is Accessible".

Not saying there isn't one, just that it's an interesting area.

Anonymous said...

Laws only apply to the little people as ZaNulieBor have consistently proved over the last 12 years. Self-serving, lying cunts all of them!

Peter Grimes

English Pensioner said...

What do you expect? The page is as disorganised as the party and it's MPs. Every thing Labour does is ten times more complex than it need be - take tax credits for example.
For me, the ideal web page takes me to where I want to be in two or three clicks, and unfortunately the Labour site is not the only one so badly designed, some of the biggest companies seem to be the worst offenders.

Idle Pen Pusher said...

The Labour Party's website takes me where I want to be in one single click... on the 'X' in the top right of the screen.

Westerlyman said...

I think its great that you have shown that this site is technically crap (we knew it was idealogical crap) but really Devil you just gave away several thousands pounds worth of consultancy. If those schmucks listen to your advice and alter their site they won't reward you. What kind of capitalist are you?

Trixy said...

DK: you say the Tories introduced this, but I think it's another example of our friend 'soft legislation' from our best friends in continental Europe.

So even more hypocritical of Labour, then, seeing as they gang bang the EU post democratic model.

rich_w said...

Thanks for bringing some focus to the issue of website accessibility. I work as a director of a disability charity and regularly speak with people who find inaccessible websites an unfortunate fact of life.

In this case, you've taken Labour's website and shown how it's not a good one when it comes to accessibility. Of course, as you'll know from your work, you could have used one of literally hundreds of websites, dedicated either to left or right politics, or any one of hundreds of relatively poor local authority websites, to demonstrate the same (or similar) points.

I'm hoping, therefore, given the relative importance of the topic - i.e. the accessibility of websites per se to disabled people, and what that could mean more generally - that you're using the Labour website instructively, rather than to make a political point.

Westerlyman said...

rich_w it seems to me that part of the point being made is that even Labour (who have been making all the rules for the last 12 years) cannot follow their own instructions about accessibility.

In any case why should the devil be politically even handed about it, this is a libertarian blog. You know with political opinions expressed in uncompromising language.

Trixy said...

Rich w: sounds like you're a bit party political yourself.

rich_w said...

Westerlyman, Trixy: Yes, I am a Labour supporter and, of course, I know what to expect when I visit Devil's Kitchen (the bad language is one of the highlights of the political blogosphere!).

The wider point I was getting at is that web accessibility for disabled people is such a vital topic, and poor accessibility is so widespread, that, I hope, pointing out which sites are / aren't accessible is informed by more than making party political points. Given his professional interest, I happen to think DK's post is informed by more than this.

Devil's Kitchen said...

Rich w,

It started out as an amusing anti-Labour attack, because the wife happened to point out the Flash headings.

Then I started looking from an Accessibility point of view and realised just how bad it was. I might do the Tory site next, just to be even handed about it...

It is an important subject, and I'm slightly ashamed that I haven't got this site up to scratch (I meant to, but some rogue Javascript buggered up my headings).

Anyway, my company run Accessibility Awareness events every quarter or so—do feel free to drop me a line——if you think that we could do some work together...


FeFe said...

I would love to see a series! Do review all of these government sites and quangos like IPCC and around the world to see just how accessible they are. Plus, a series on your efforts to make your own site the model of inclusion. Pretty please. The cause is worthy.

Jenny S-T said...

Thanks for highlighting this issue. I've been amazed recently when working with an open source group who actually focus on accessibility, how many talented programmers they have who are disabled. If only mainstream employers and the government could wake up to all the potential talent being wasted because of inaccessible websites.

Suboptimal Planet said...

Anonymous wrote:
Be interested in a libertarian justification for government compelling "all organisations—pubic and private—to ensure that their website is Accessible".

I too would be interested in the Devil's thoughts on this. While I commend his efforts to make the web more accessible, I resent the compulsion inherent in the Disability Discrimination Act.

I've blogged about it here:

Suboptimal Planet said...

The problem with the DDA comes down to the distinction between 'freedom from' vs 'freedom to', drawn so eloquently by bella on 2009-10-12:

For the libertarian, there is no ‘freedom to.’ Freedom represents an absence, the absence of force and fraud. It does not represent a licence to do anything, or a right or entitlement, except the absolute human right not to be forced or defrauded.

‘Freedom to’ is where conflict enters the system. ‘Freedom to’ often becomes a right: a right to a family, a right to cheap healthcare, a right to a job, a right not to starve.

Enlightened people will make their websites accessible, and hire based on merit, but this must not be forced.

NHS Fail Wail

I think that we can all agree that the UK's response to coronavirus has been somewhat lacking. In fact, many people asserted that our de...