« Previous | Main | Next »

Homepage Accessibility

Post categories:

Jonathan Hassell | 11:16 UK time, Tuesday, 25 March 2008

Following the launch of the new BBC Homepage in February, it was great to read this blog post on Unintentionally Blank (The BBC Does Web 2.0 accessibly and validly).

I thought it might be worth a few words here to talk about how we made the new homepage work for disabled users.

The accessibility team in BBC FM&T is looking at new approaches to accessibility, which truly put usability for disabled users at the heart of everything we do, but also help usability for non-disabled users.

The idea that the new Homepage should be a widgetised page - like Facebook, iGoogle and Netvibes - presented a challenge. How could Ajax and JavaScript be used to make the page dynamic and customisable, without causing a disastrous user experience for access technology users and alike?

Firstly, we looked at ways to make the page friendly to users with motor, cognitive and visual impairments.

For example, we ensured that font sizes and the use of colour met our Accessibility Standards & Guidelines, and that links were not too spaced out (for screen-magnifier-users), too close together, or too small (for those with motor impairments).

But the main challenge was going to be for screenreader-users. They are often confused by dynamic content changes on a page because they are not aware that a part of the page's content has changed. In many cases, it is down to the user to go through the frustrating process of trial and error, in order to become familiar with the specific behaviour of a website.

To identify the full extent of any potential problems for disabled users, we invested heavily in a process of regular user testing with participants with various cognitive, motor and visual impairments. To ensure against problems with screenreaders and dynamic content we also commissioned AbilityNet to test the site against several screenreaders, including: Jaws (versions 9.0.552, 8.0.2173 and 7.10.500), Hal (v8.03), Window-Eyes (v6.1), Thunder (v1.0.25) and WebbIE (v3.3.5).

As predicted, the main issues arose with the customisable content section.

For example, un-focusing a link visually (when a button is clicked on by a user it changes appearance to show it has been activated) normally sends screen readers to the top of the page.

After much experimenting with Jaws 8 and JavaScript, our developers managed to find a solution that worked for screenreaders and that worked visually. We eventually managed to send the focus to the new content for screenreaders using JavaScript, and then added more JavaScript to unfocus the link when a user released the mouse button, based on the assumption that screenreader users will be using a keyboard to navigate the page.

Using the results of our user-testing we made semantic markup of the page a priority, ensuring that each panel of the homepage design could be treated and navigated consistently. For example, the H3 heading always applies to the title of the content panel whether the content is in a table, a list or paragraph, and a logical structure of headings follow underneath.

[NB: H3 headings are those with the +- at the end of them on the homepage. For example: "More Top Stories" in the News Panel; "Most Popular" in the iPlayer panel.]

Another interesting lesson that we took away from the testing was the use of visual labels to signify changes in the state of content boxes. Originally the content boxes featured links labelled "Collapse this box". We realised that "collapse" and "expand" hold little meaning to blind users and so relabelled them to "Open the News box" and "Close the News box" etc.

We are delighted that because of all that we learned on this project, our disabled users will get a better experience of using the BBC homepage.

Credit needs to go to the homepage developers and designers, and the accessibility team in User Experience & Design which focuses on research, testing and policy creation across all of the BBC's web, mobile and interactive TV services, encouraging a culture where accessibility is a given.

But it's not just disabled users who'll benefit from this work.

The fact that the BBC Homepage is customisable without JavaScript (it's the only page "within the dynamic website arena" that we know does this) ensures that choosing content boxes, customising content, and changing the page colour are all possible for users with mobile devices and older browsers too.

Jonathan Hassall is Acting Head of Audience Experience & Usability, BBC Future Media & Technology.


    This post is closed to new comments.

    More from this blog...

    BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

    This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.