Web Access Centre

UK Online case study - Web Access Centre

Summary: How Sapient made the UK Online website accessible.

• UK Online objectives
• Overview of technology
• Overview of process
• Tips
• Benefits

---

The central government portal www.UKOnline.gov.uk was re-launched in 2003 having undergone a site redesign by Sapient. The RNIB Webaccess team worked closely with Sapient through this process and the site was awarded, for the second year running, the RNIB See it Right accessible website logo. The UK Online site is the first site in the UK to be awarded the logo two consecutive years running.

The case study below, contributed by UK Online outlines the solutions that Sapient used regarding layout in the site.

Please note that the new Directgov portal www.direct.gov.uk now supersedes UK Online. Directgov are working with the RNIB Webaccess team on making this site more accessible.

UK Online objectives

There were several requirements surrounding extensibility, maintainability, and accessibility that the UKO website (UK Online) had to incorporate. In the previous version of UKO there were two distinct channels of the site to accommodate visual browser and alternative browser users. The main difference between these two channels was the structure of the content. Content in the “Easy Access” channel was structured so that main article/body content appeared first, followed by related links and then main navigation. This helped sharpen the process of having pages read aloud by screen readers and speech browsers.

The current incarnation of UKO is designed to take the best of both of those channels and create a layout system that adjusts to the needs of the user. Articles and body copy are still read first on the page, colours and font sizes are adjustable, and the page is displayed in a graphically complex column layout.

Overview of technology

UKO layouts employ CSS2 (cascading style sheets) and CSS-P (cascading style sheet positioning) to position elements of the page. These technologies allow for content to be structured within the flow of the page separately from the display within the browser. For example, the main logo on the UKO page is displayed on the top of the page so that users have brand recognition and a link to click to return to the homepage. However, within the XHTML of the page the image is structured at the bottom of the code. This means that when a screen reader is viewing pages within UKO the user is not forced to hear the description of the image/link of the logo; they can simply go straight to the content.

Overview of process

The creation of CSS based layouts involves a detailed upfront prototyping, discussion with graphic designers, and information architects. Here are a few simple steps to ensure that your layouts perform and remain solid.

• Discuss grid patterns and layout needs with graphic design.
• Discuss the strategy for content within the layouts to determine the level of flexibility that needs to be built in.
• Prototype layouts as frequently as possible.
• Test vigorously in the various supported browser scenarios.

Tips

• Test thoroughly on all the browsers you intend to support.
• Be persistent with your attempts at creating your CSS layouts.
• Prototype, prototype, prototype during the visual design concepting.
• Understand the content needs of the layout. This will ensure your layouts don’t break with different levels of content.

Benefits

• Smaller page weight, and less bandwidth load on servers.
• Pages that degrade gracefully on different browsers (device independence).
• Easy maintenance, as layouts are controlled in a central location.
• Cleaner HTML.

• Back to case studies

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41