360 likes | 579 Views
UsabilityNews Accessibility Project (UNAP). Dave Clarke, Ann Light and Claire Paddison. Agenda. Introduction and project goals The survey Heuristic evaluation of the present design Design modifications Testing the new design Conclusions. 1. Introduction and project goals. Dave Clarke
E N D
UsabilityNews Accessibility Project (UNAP) Dave Clarke, Ann Light and Claire Paddison HCI 2003, September 2003
Agenda • Introduction and project goals • The survey • Heuristic evaluation of the present design • Design modifications • Testing the new design • Conclusions HCI 2003, September 2003
1. Introduction and project goals Dave Clarke Visualize Software Ltd HCI 2003, September 2003
Introduction • UsabilityNews was launched in September 2001 by the British HCI group • http://www.usabilitynews.com • Content includes general news, job, paper calls and events • Contributions from various usability professionals around the globe • Fully edited content (editor Ann Light) • Bi-weekly email based “opt in and confirm” newsletter • News headline service for syndication HCI 2003, September 2003
The first design • Site was first developed on “near zero” budget • Originally “just an idea” proposed to the British HCI Group to fill a gap in the field • Site was developed “over the Summer of 2001” in spare(!) time • ASP, SQL Server and HTML 3.2 based • Little time available for detailed analysis of requirements, target audience or indeed accessibility issues. • A common situation in industry, where restricted budgets and tight timescales prevail • Seems to be getting more and more common… HCI 2003, September 2003
UNAP project • Came as a result of ideas/discussions at HCI 2002 • Disability Discrimination Act (DDA) October 2004 and Disability Rights Commission (DRC). • Aims: • To make UN more accessible - take a practical, business focused approach • carefully consider time, resources and money invested, versus the benefits that would be gained. • Did not want to compromise the “subjective” graphical “feel” • Overall: “Is it relatively easy to make a web site accessible after it is live, with minimal investment of time and money?” HCI 2003, September 2003
UNAP project • Consisted of: • A web-based survey – questions “opened up” to include non-accessibility issues • Heuristic evaluation – identify, categorise and prioritise changes required • Design modifications (limited time and effort available) • Test the new design • Draw some conclusions from the project HCI 2003, September 2003
2. The survey Claire Paddison IBM UK, Warwick HCI 2003, September 2003
Survey • Web-based survey consisting of 22 questions • Sent to existing and potential user population • Aim: • To gather general feedback about visitors to the site, for example, understand which areas are most useful • To gather specific accessibility feedback, for example, to find out about users assistive technology devices • To gather feedback related to mobile device use, for example, to understand whether mobile access to the site would be useful HCI 2003, September 2003
Survey • 151 responses • UK (45%), America (26%) and Europe (18%) • General feedback • “Keep up the good work” • Ability to comment on news articles • “I did not know you had a newsletter!” HCI 2003, September 2003
Survey • Accessibility feedback • 5% some form of vision impairment • 2% some physical disability which impaired their use of a keyboard or mouse • 4% learning or literacy difficulties HCI 2003, September 2003
Survey • Mobile device feedback • 24% used a mobile device (other than a laptop) to access web sites • Only 6% said they would be interested in using such a device to access UsabilityNews HCI 2003, September 2003
3. Heuristic evaluation of the present design Claire Paddison IBM UK, Warwick HCI 2003, September 2003
Heuristic evaluation • Conducted using IBM Heuristic Evaluation Database (HEDB) • Simplifies the management of a heuristic evaluation • Works well as a collaboration tool • Used the IBM Accessibility Heuristics plus one ‘catch-all’ usability heuristic • Heuristics developed from W3C, Section 508 and various other guidelines • Heuristics highlight which tasks users will have difficulties performing by inaccessible areas • Helps web site developers plan which areas of the site to make accessible first HCI 2003, September 2003
Heuristic evaluation • A task-based inspection with a team of six evaluators from a range of disciplines • “You are interested in jobs outside the UK. Use UsabilityNews to see if there are any suitable job vacancies.” • Each finding independently rated against a severity • Severities are used to assess the degree of difficulty a design feature is likely to give a potential user • Prioritised findings presented to the UN team • Findings will be presented in context of solutions HCI 2003, September 2003
4. Design modifications Dave Clarke Visualize Software Ltd HCI 2003, September 2003
Modifications • Recap: Aim of project was to make UN more accessible • A full redesign was not an option (but would have been nice!) • IBM’s Heuristic report was extremely useful: • Clearly broke down the various problematic areas • Helped us prioritise what was important and what was “nice to have”. • Some issues would have to wait for UN “version 2” • Report also made suggestions as to how the problems could be rectified HCI 2003, September 2003
Examples of modifications • Visibility of ALT text and font size (before) HCI 2003, September 2003
Examples of modifications • Visibility of ALT text and font size (after) HCI 2003, September 2003
Examples of modifications • “Skip to main content” added: • Example HTML: <a href="#maincontent"><img src="/images/tiny.gif" width="1" height="1" alt="Skip to main content " title= "skip to main content" border="0"></a> • Not seen on the page but read out by “most” screen readers. HCI 2003, September 2003
Examples of modifications • Control and label associations added • Explicitly relates a control to a label • Example HTML: <input TYPE="TEXT" id="txtHeadline" NAME="txtHeadline" SIZE="50" MAXLENGTH="100" VALUE=""> HTML formatting here etc… <label for="txtHeadline">Headline:</label> • Assists screen readers and provides a larger target for those using a mouse HCI 2003, September 2003
Examples of modifications • Physical placement of text (before) HCI 2003, September 2003
Examples of modifications • Physical placement of text (after) HCI 2003, September 2003
Comments on modifications • Overall original design was not a bad starting point • Left the design “essentially” as HTML 3.2 • Effort required: • One single development day (including reading report etc) • A few hours graphical design work • Less than 1.5 “man-days” in total • A lot of the modifications could have been pre-empted by using good accessibility design practice from the beginning. HCI 2003, September 2003
5. Testing the new design Claire Paddison IBM UK, Warwick HCI 2003, September 2003
User evaluation • Tested with six people with special accessibility needs • Range of visual impairments, for example, blindness or tunnel vision, plus one RSI sufferer • Also tested with six people with no special accessibility needs who acted as a ‘control group’ • Objective: • To determine whether the UsabilityNews web site is accessible and usable HCI 2003, September 2003
Combined results • 91% participants felt that the site was effective • 91% participants agreed that they could complete tasks in a reasonable amount of time • 72% participants found the site easy to use • 55% participants found the site satisfyingto use;19% participants did not find the site satisfying to use. • 36% participants agreed that the site navigation was intuitive and well structured; 36% participants disagree that the site navigation is intuitive and well structured HCI 2003, September 2003
Search edit box • Screen reader users were unaware what the ‘Search’ field was for in the top right hand corner – the screen reader only read out “edit box.” • One user guessed it was the search edit box while another thought it was for submitting their email address. • “Again, there is a box there which purpose I don’t know, and then there is a link to advanced search as well. My reader cannot read what the box is.” • When screen reader users carried out a word search on the page they were only able to find ‘Search’ at the bottom of the page which means that the search button was not labelled correctly. HCI 2003, September 2003
Advanced search checkboxes • Users using an increased font size found the checkboxes visually difficult to scan. • “I hadn’t realised at all that the advanced search categories were organised in an alphabetical order.” • Checkboxes were also organised alphabetically from left to right rather than top to bottom. HCI 2003, September 2003
White space • Participants found the black text on a white background easy to read… • I am sure that white background is good and that’s right. It’s clearly… the articles are clearly there with headings. First thing I will do is to read the headings, and then abstracts, and then decide whether I want to read further • …but too much white space increases the amount of time it takes to find information. • “I don’t like lot of white space, because it makes scrolling longer, but you have the right amount of white space, that’s fine”. HCI 2003, September 2003
Links • ‘Show all…’ is not an accessible link. • Links should be labelled in context, for example, ‘Show all jobs’, ‘Show all events’. • Important information should be positioned at the top of any list • For example, ‘Show all’ was positioned at the bottom of the list of ‘Jobs’ therefore participants were unsure whether it was a list of all jobs or just a partial list. • Also no information is provided explaining what the partial list is showing, for example, are they the most recent jobs submitted to the site? • “How do we know that this is a complete list of conferences?” HCI 2003, September 2003
Error messages: • After submitting an article to UsabilityNews, the form was returned with errors on empty fields. • The participant became frustrated as the screen reader was unable to pick up fields marked as incomplete. • Another participant using a similar screen reader was able to correctly identify the fields containing the errors • This participant was very impressed with the alt tags used to identify the incorrect fields HCI 2003, September 2003
6. Conclusions Dave Clarke Visualize Software Ltd HCI 2003, September 2003
Conclusions • Question: “Is it relatively easy to make a web site accessible after it is live, with minimal investment of time and money?” • In our experience, Yes - took one and a half days to make accessible • However, this was mainly due to having the Heuristics report to refer to • Tweaking an existing design IS possible. It is now more accessible • Full redesign (UN version 2) would provide a more complete “purist” solution • Overall design would consider accessibility from the beginning • Utilise CSS, XHTML, RSS… • Take into account the rest of the survey feedback • Add new functionality and refine current (e.g. Search engine) HCI 2003, September 2003
Any questions? HCI 2003, September 2003