General Election 2010: Party Campaign Websites Analysis (Part 3: Accessibility)

By Matt Cornock

This is the third and final part of the UK 2010 General Election Campaign Websites Analysis for the three major parties. This post looks at the accessibility considerations of the three homepages:

The table below is by no means a definitive record of accessibility, but covers some of the more significant issues users requiring accessible websites face. The list is a sample from the checklist provided at WebAIM (http://www.webaim.org/standards/wcag/checklist) which in turn is based on the WCAG 2.0 guidance (http://www.w3.org/TR/WCAG20/). The WCAG 2.0 guidance focuses on evaluating a website on being Perceivable (a website is available regardless of disability), Operable (a website can be navigated and its interface used), Understandable (the site interface and content is understandable), and Robust (the website can be displayed on and used reliably by a number of assistive technologies, software and systems).

The analysis was conducted at 8.40-9.50pm on 5th May 2010. Only key elements of the page were looked at in detail. Firefox 3.6 was used with the Web Developer toolbar to disable CSS and show ALT tags for images.

Criteria Labour Conservatives Liberal Democrats
Images conveying meaning have alternative text Incomplete text equivalents for the banner images. E.g. ‘Join Ed’s campaign for greater ambition on climate change’ simply has the ALT of ‘Ed’s pledge’. The pledges slide has only ALT ‘labour pledges’.
Flickr photos have ALT text. Normally good, but with no skip option for screen readers, it would take time to read.
Problems with incomplete ALT text for the large banner images. In non-CSS mode, the current banner element is in plain text. However, unlike other two sites, not all banner elements are displayed at once due to the script. Most other elements are fine, though ‘Signiture’ is incorrectly spelt for David Cameron’s signature on the ‘contract’. A lot of the visual aspect of the site is done through colour of elements using CSS rather than graphics. ALT present on the large banner at top and photos of party members. However, the other main banner on the page has no explanatory ALT attribute. All the icons have no ALT text as they are done with CSS backgrounds, this is fine because the explanatory text would just be the header of that item.
Text based equivalent for audio No captions for YouTube video, although YouTube provide this feature. Captions feature enabled on YouTube, however no actual captions content present. N/A on homepage
Plain-text based equivalent for video No. No. N/A on homepage
Tables for data only OK. No tables used. OK. No tables used. OK. No tables used.
Semantic markup (H1, H2, P, Lists, etc) Policy areas at bottom of the page should use a list, rather than continual links without separator.
H1 tag not used for page title, but for the Latest News feature.
H2, other headings and divs inconsistently used.
Lists for main navigation are however good.
Could use a plain text header for the banner element in non-CSS mode.
H1 text reads ‘Conservatives logo’ which is odd.
Other elements are correctly marked up with use of DIVs and key element headings. Most links are within lists, though some are not. Could use a plain text header for the banner element in non-CSS mode.
Code is correctly marked up with use of DIVs and Headings. H1 is correctly offset off screen but present.
Could use a plain text header for the banner element in non-CSS mode.
Order of content in HTML (CSS-deactivated) Odd ‘X’ links at the top of the page.
Full nested list links representing the nav bar.
The list for the interactive scroll/banner has no text description and they are not links, which results in a list of random text.
Interactive elements are followed by the latest news and last by policy links and the large footer.
Access links (good). H1, search (good), short links for main navigation (including Policy/Manifesto first/second in the list).
Banner element links, changing the banner element and a button used to start video playing.
Then party support elements, followed by the plain text contract (four blocks), social elements, blog, candidate search. Finally a large number of links comprising the footer.
H1 heading now visible which is good. Order of elements: navigation, search (good that it is high up), plain equivalent of banner (though 1,2,3,4,5 links aren’t explained), Links to manifesto and policy areas, news story links, Lib Dem candidates, social networking links, site admin (access, privacy, site map, etc).
Instructions independent of visual cue (e.g. no ‘click the green button’ and no ‘read the right column’) Up/down arrows for major banner tool have alt text, but not intuitive they relate to the list of items they scroll. Correctly linked label and drop down list for ‘See our policies’ option menu. N/A
Multimedia controls YouTube – some problems with keyboard access. Clunky and require script. Accessible banner controls.
Colour is not the only conveyor of meaning No obvious problems. Banner navigation uses colour highlights. Tab navigation uses class based identifier to change background of current tab. Hidden text could be used too.
Keyboard access (no keyboard traps) Using the keyboard to navigate through the nav bar drop down menus does not reveal the drop down, making it difficult to know the tab location for a visual but non-mouse user. A lot of links to navigate through.
The banner can be tabbed through without clicking/enter to display the next item. This is a nice touch.
Tab trail goes down right column before returning to the content: news, campaign trail, etc.
Far, far ,far too many tabs required to get through all the Flickr photos.
No major traps, however use of iframe used for a large wadge of Facebook content. Thankfully the Flickr photos are limited to a handful. OK
Skip to content/skip blocks None. Full access keys at top of page and skip to links. None.
Informative page title Fighting for your future | The Labour Party The Conservative Party The Liberal Democrats – Official Website
Link navigation order Too many tabs to get to the policy links at the bottom of the page, particularly after following well over 50 links to Flickr photos.
Footer provides lots of links to key areas directly.
Good for the main navigation. However, page content order is a little mixed. Main navigation has generic Lib Dem links before the key ‘Home, What We Stand For, Who We Are, Get Involved, Our Campaigns, News, Manifesto’ navbar. This should be reversed. Also, the manifesto link should be eariler.
Descriptive links Most links are descriptive. The few ‘read more’ links are properly nested within parent elements (list/div) with an appropriate heading tag. Good. More links also descriptive, e.g. ‘View all posts’ and ‘Read the contract’ rather than ‘Read more’. Good. No ‘click here’ and no ‘more’ links, where there could be description. Links detail the page/topic that the link leads to.
W3C validation

286 errors, 45 warnings for XHTML transitional. See the report:
http://bit.ly/aogjl7

Two warnings for character encoding and DOCTYPE. No errors for XHTML transitional. One error on use of the ‘target’ attribute for XHTML strict.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.