hci 2003, september 2003© british hci group 2003 usabilitynews accessibility project (unap) dave...

HCI 2003, September 2003© British HCI Group 2003

UsabilityNews Accessibility Project (UNAP)

Dave Clarke, Ann Light and Claire Paddison


Agenda

1. Introduction and project goals

2. The survey

3. Heuristic evaluation of the present design

4. Design modifications

5. Testing the new design

6. Conclusions


1. Introduction and project goals

Dave Clarke

Visualize Software Ltd


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


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…


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?”


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


2. The survey

Claire Paddison

IBM UK, Warwick


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


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!”


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


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


3. Heuristic evaluation of the present design

Claire Paddison

IBM UK, Warwick


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


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


4. Design modifications

Dave Clarke



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


Examples of modifications

• Visibility of ALT text and font size (before)



• Visibility of ALT text and font size (after)



• “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.



• 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



• Physical placement of text (before)



• Physical placement of text (after)


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.


5. Testing the new design

Claire Paddison

IBM UK, Warwick


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


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 satisfying to

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


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.


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.


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”.


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?”


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


6. Conclusions

Dave Clarke



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)


Any questions?

hci 2003, september 2003© british hci group 2003 usabilitynews accessibility project (unap) dave...

Documents

british hci group http

project slide

usabilitynews slide

warwick slide

useful slide

common slide

syndication slide

design site