UK Banking Accessibility Review

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee, inventor of the World Wide Web

Foreword

The topic of website accessibility received a welcome shot in the arm during the second half of 2004, due to the passing into law of Part 3 of the Disability Discrimination Act (which, in actual fact, didn’t have anything to do with websites, not that this bothered the design agencies and consultants swamped with requests). Many commercial sites scrambled to make head-or-tail of the complex guidelines published by the W3C, RNIB and other organisations, and there are many examples of poorly understood or poorly implemented “accessible” websites.

Six months on, it is time to take a look at the websites of the UK’s leading banks and building societies to see what, if any, efforts they have made to make their sites accessible to all customers. Please note that this report is not in any way an attempt to “name and shame” the companies involved; rather it is a review and commentary of accessibility compliance in the industry.

NB: All comments and site reviews are based on tests conducted in the last week of January 2005. Sites may have changed since this time.

Site Review Criteria

19 leading UK bank and building society websites were selected for review; these included the largest of the high-street banks, the five largest building societies (by assets), and several internet-only “virtual banks”:

Banks

Virtual Banks

Building Societies

The majority of the analysis focuses on the home page of each site. The rationale behind this, as well as being one of time, is that it is the most valuable piece of real-estate on the site – if the company has not spent the time to make this page accessible they are unlikely to have dealt with the rest of their site.

In carrying out these reviews, a variety of automated and manual checks were carried out.

As the de facto standard for accessibility testing worldwide, the Web Content Accessibility Guidelines (WCAG) were used to determine a baseline definition of what makes an “accessible” website; the following aspects of each site’s home page and primary sub-pages were assessed:

Any claims made by the organisation relating to accessibility were also checked and compared to the reality of their site’s performance.

While the WCAG are an extremely useful starting point for any assessment of website accessibility, it is important to note that sites have not been categorized into the WAI’s three levels of compliance: A, Double-A and Triple-A. This is because we feel that accessibility must be about making the best effort to provide an accessible experience, not an exercise in ticking boxes to achieve a certain level of compliance.

Code Validation

WCAG checkpoint 3.2 states that developers must ‘create documents that validate to formal published standards’ (Priority 2). By writing valid code, it becomes easier to eliminate errors and predict how a page will be displayed.

Performance evaluated through: Passing the web page URL through the W3C’s online validation tools – you can find them at validator.w3.org and jigsaw.w3.org/css-validator/.

Of the 19 sites tested as part of this survey:

These results are disappointing; by writing valid code (or choosing content management solutions that generate valid code) developers can greatly reduce the time spent tracking down and fixing faults, and the site’s appearance will be uniform across most browsers. Online tools like those provided by the W3C make validation an easy step to add to the development process.

Automated Accessibility Scoring

The WCAG provide 14 guidelines relating to web accessibility, together with normative checkpoints that can be used to “test” the accessibility of a website. There are several online tools available to automate this process, the most popular of which are Bobby and Cynthia Says. While these tools cannot test for certain checkpoints (e.g. the suitability of alternative text for images), they are a useful means of identifying potential failure points.

Performance evaluated through: Passing the web page URL through the online accessibility tool Cynthia Says.

Although all sites failed on at least one criteria, there were several common rules accounting for these failures:

We can perhaps forgive the use of deprecated features on sites that have not been recoded for several years, although the implications of failure on this checkpoint depend very much on which particular deprecated feature has been used; for example, declaring “border=0” for an image tag is unlikely to cause a great problem, but setting the background colour (e.g. bgcolor=”red”) of the page could be a serious obstacle for some groups of users.

However, the fact that more than two-thirds of sites failed to provide a text equivalent for non-text element (i.e. use alt text for images and provide labels or alt text for inputs) is unforgivable.

Adding alt text to images is probably the easiest step a company can take to improve basic accessibility, and to have failed to do so indicates a lack of commitment to making their site accessible, particularly when this failure occurs on the home page of the site.

CSS Dependence

Cascading Style Sheets (CSS) is a technology that is intended to be used to control the presentation of a web page. By separating the structure (HTML) from the presentation (CSS), developers can exercise much greater control over the appearance of their pages and reduce the time needed to make amendments to visual aspects of the site.

Modern design methods encourage the use of CSS to control the layout of the page, rather than the traditional use of tables. This not only benefits disabled users, but also those using alternative browsing devices such as WAP phones, etc.

Performance evaluated through: Disabling all CSS styles in the browser.

Of our 19 sites, four (21%) have made the leap to CSS-only layout (Barclays, Lloyds TSB, First Direct, Nationwide); this is encouraging, as it is only in the last year or so that this “web standards” approach to site design has gained in popularity. There remain some issues with the implementation of some of these layouts – the Barclays site layout collapses if the text is made smaller; and the Lloyds TSB site has not made good use of lists to control its navigation, with the result that it all runs together to form one long word – but these would be easy to rectify, and the organisations should be applauded for recognising the value in the correct use of technology.

Elsewhere, however, more needs to be done; many sites, although using CSS to style the main content text, rely on images for the navigation (making it difficult/impossible for users to override their appearance or resize the text), while a few display quite unexpected behaviour with CSS disabled – Coventry displays enormous lists of duplicate navigation information, while Alliance & Leicester’s layout spreads itself across the screen and adds the alternate mouseover versions of the navigation bar at the bottom of the page.

Alt Text

The ALT attribute of the IMG tag is intended to be used to provide alternative text, which is displayed to the user when the image is not present. There are many descriptions of how best to word the alt text, ranging from an exact description of the image, to a keyword-stuffed sentence. In general, the alt text should either:

The alt attribute should never be omitted, as this can create unpredictable results in different browsers and assistive technologies; some screen readers will read out the name of the image file (e.g. “blue-flower.gif” may be read aloud as “blue hyphen flower dot gif”), which would obviously be a distinct annoyance when trying to comprehend the content of a page.

Performance evaluated through: Replacing all images on a page with their ALT attributes.

Again there is quite a disparity in the results of this test. Some sites make very good use of alt text – Abbey’s image headings are replaced with the same words, as are Royal Bank of Scotland’s and Portman’s – but some display a lack of understanding of how the alt text should be used (or even whether it should be used at all):

While it may not seem important to the users within an organisation, there are many groups of users for which adequate alt text is needed. These include blind or partially-sighted users, those using text-only browsers, and those on a slow dial-up or expensive WAP connection who may have disabled images.

As mentioned above, providing alt text for all images is an extremely easy step for any organisation to make.

Javascript Dependence

With the growing problem of viruses, trojans, worms and other terms that the average computer user may not understand but of which they are nevertheless frightened, there are increasing numbers of internet users that disable Javascript on their browser (or have it disabled for them by over-zealous anti-virus software). Much assistive technology software is also blind to Javascript.

Website developers must cater for this changing behaviour by ensuring that their site will function as intended if Javascript is not
available.

Performance evaluated through: Disabling Javascript in the browser.

While most sites (12 of the 19, or 63%) are barely affected by the lack of Javascript support, there are some where quite significant
areas of functionality are changed:

Recent statistics indicate that as many as 10% of visitors are surfing with Javascript disabled) – this is a significant portion of your potential customer base to be given a sub-standard or unusable experience when they visit your website.

Text Only

There are many different types of browsers in use today. As well as the popular graphical browsers – Internet Explorer, Netscape, Firefox, Mozilla, Opera, Safari – there are various assistive technologies (JAWS, Windows Eyes), internet TVs, handheld PCs/mobile phone browsers, and text-only browsers such as Lynx for Linux.

It is useful to view a site using at least an approximation of a text-only browser, as it will provide a reasonable idea of how the page will be interpreted by many of the other non-graphical browsers.

Performance evaluated through: Passing the URL to the online Lynx viewer (www.delorie.com/web/lynxview.html).

As with previous tests, there are some good examples along with some very bad examples in our group of websites. Many are easy to comprehend in a text-only view – Abbey, Barclays, First Direct, Coventry, and in particular Nationwide all work well – but several perform poorly:

Through proper use of semantic mark-up and alt text, all of these problems could have been avoided. As it is, imagine what it would be like to access these sites using a screen reader – would you want to give this company any of your business, after they’d made you sit and listen to “star, star, star, star, star, star, star”?

Resizable Text

Another item that should be on any developer’s list of easy ways to make a site more accessible is allowing the user to control the size of text on the page. This simple feature can make all the difference to users with poor vision (or large screens).

Performance evaluated through: Resizing text in Internet Explorer.

Colour Contrast

WCAG guideline 2.2 requires that sites should use text and background colours that contrast sufficiently. There are other factors that need to be taken into consideration when thinking about colour choices, such as the various forms of colour-blindness, but ensuring a sensible level of contrast is a good start (although there are also some user groups that would prefer that contrast is not too extreme, such as dyslexics – colour theory and accessibility is a subject that requires a lot of research and thought).

Performance evaluated through: Initial visual check, online Colour Contrast Check tool.

Most of the tested sites perform reasonably well, although there are some (Egg – grey on white, dark grey on light grey; Halifax has some tabs that are quite light with white text) where there may be issues for people with poor vision. It is worth noting that some research indicates that a bright white background may cause problems for users with dyslexia.

Skip Links

Performance evaluated through: Manual code check.

While it is true that there is a fair level of debate within the accessibility community regarding whether a “skip to content” link is absolutely necessary (or indeed, how it should be worded most effectively), it remains a simple benchmark in assessing an organisation’s attention to accessibility:

Linearization

Whether we as web developers like it or not, tables have been and will continue to be used for laying out web pages for some time to come. Leaving aside the rights and wrongs of this technique, it is important to understand how assistive technology will interpret the page – table by table, and cell by cell. This linearization of content must take place in a logical order if some groups of users (e.g. those using screen readers) are to comprehend the site’s contents.

Performance evaluated through: Linearizing the page content using the Web Developer Toolbar in Firefox.

Most of the sites tested linearized in a reasonable order – exceptions included Lloyds TSB, where the primary page content appeared last. Most, however, placed substantial navigation at the top of the page – not particularly usable for mobile/small screen users, although this is not strictly an accessibility issue.

Tab Order

There are various groups of users who, for whatever reason, are unable to use a mouse to interact with web pages. For this reason it is important that a site is functional and usable when only keyboard input is possible (sites should also ideally be checked using other alternative methods of input such as speech, head wands, etc. but such tests are beyond the scope of this report).

By and large the tab order through the home pages of the surveyed sites is as the user would expect, usually traversing the primary navigation before moving through the content top to bottom, left to right, although some sites such as Abbey have attempted to make it easier for keyboard users to move to the most popular links by placing them first in the tab order. There are, however, some exceptions:

Of particular note is the fact that none of the sites provided any additional visual feedback on which link currently has focus apart from the default behaviour of the user’s browser. Providing a means of allowing keyboard-only users to orient themselves within the page (by using the CSS :focus pseudo-element to highlight the currently selected link) would greatly improve their browsing experience.

Header Tags

According to the W3C specification, the six levels of header tags, h1 to h6, “should reflect the logical structure of the document”. Many assistive technologies offer the option to only list the headings of a certain level, on the assumption that this will assist the user in determining if the content of each section is relevant to them.

Unfortunately very few of our surveyed sites are using headers correctly:

Of the rest Barclays, Cahoot, First Direct and Nationwide appear to be using heading tags as intended.

Link Text

Another function of many assistive technologies is their ability to extract just the links from a document. For this reason, it is important to ensure that the text used for those links makes sense when read out of context.

Again, there is a mixed performance among our sites. Many sites do fairly well – NatWest in particular seem to have taken great care with their link text – but others do less well:

Accessibility Claims

Of the 19 sites assessed, only six did not provide any information on either their accessibility policy or using the site.

Of the rest, the advice varied from detailed instructions on how to resize text or apply user settings in popular browsers, to simply advising users to “click Help on your browser”. Bank of Scotland did not have any accessibility information, but did provide a link entitled “Disability”, which when clicked converted to a text-only, yellow-on-black high contrast version – presumably on the assumption that this will meet the needs of all “disabled” users visiting the site (needless to say it does not). Unfortunately even that concession was only available for the home page – no other pages of the site offered the setting.

A few of the sites claim to meet criteria that, on closer inspection, they fail to meet – Lloyds TSB state that:

HTML heading tags are used to convey document structure.
H1 tags are used for main titles, H2 tags for subtitles etc. Navigation menus are marked up as HTML lists. This ensures that the number of links in the list is read out at the start and it can be skipped easily…the majority of pages achieve a Conformance Level Double-A or Triple-A

Unfortunately a quick look at the source code reveals that while headings are used they are out of order, and the primary navigation turns into one long stream of words when CSS is disabled – and with over 100 validation errors, they fall well short of “Double-A or Triple-A” conformance.

Conclusion

While it is apparent that substantial effort has been put into improving the accessibility of the websites surveyed, there is still a long way to go before the websites of the UK banking industry live up to Tim Berners-Lee’s vision of a universally accessible internet.

Nationwide takes the “Top of the Class” award, while other well-performing sites include NatWest, First Direct, Royal Bank of Scotland and Yorkshire.

One can only hope that there are widespread plans behind the scenes to rectify the most glaring errors – our own organisation’s statistics indicate that our website receives almost three times the number of visitors as an average high-street branch; but you will not find even the smallest branch that does not have adequate disabled access. Why then do we accept it when it comes to our bank’s websites?

The benefits that go hand-in-hand with having an accessible website – greater usability, better search engine performance, faster loading, improved cross-browser and -platform performance, device independence – cannot be overstated. Too often a short-sighted view – “but we don’t have any blind/disabled customers” – is taken; we must ensure that the message that accessible web design is beneficial to all continues to be
spread.

Footnote

While this report was being compiled, HSBC undertook a comprehensive redevelopment of their site. It now boasts valid XHTML, a CSS-only layout, correct header and list usage, added accessibility features such as text resizing buttons, and well-worded link text, all combined in a fresh, clean design. Go straight to the head of the class!

Additional Information

About the author

Matthew Pennell is a web design and development professional working in the financial services sector in the UK. He is a member of the Guild of Accessible Web Designers, a world-wide association of organisations and accessible web designers and developers designed to both promote and protect accessible web design standards.

Matthew writes about accessibility and other topics on his personal site, The Watchmaker Project.

Thanks to

Mel Pedley and Mike Pepper for their help and advice in reviewing this document.

Useful links