Homepage Accessibility
Following the launch of the new ´óÏó´«Ã½ Homepage in February, it was great to read this on ().
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 ´óÏó´«Ã½ 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 ised page - like , and - presented a challenge. How could and 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 -users), too close together, or too small (for those with motor impairments).
But the main challenge was going to be for -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 to test the site against several screenreaders, including: (versions 9.0.552, 8.0.2173 and 7.10.500), (v8.03), (v6.1), (v1.0.25) and (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 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 ´óÏó´«Ã½ 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 ´óÏó´«Ã½'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 ´óÏó´«Ã½ Homepage is customisable without JavaScript (it's the only page "within the 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, ´óÏó´«Ã½ Future Media & Technology.
Comments