Usable Design and Accessible Web Sites

Institutional Web Managers’ Workshop 2002, Strathclyde University

Wednesday 19th June, 4.00 – 5.30pm

David Sloan

Digital Media Access Group, University of Dundee



tel: (01382) 345598



Workshop Schedule

4.00 – 4.10 Introduction, Workshop Aims, and Background to Web Usability and Accessibility

4.10 – 4.45 Web Usability for Non Linear, Non Graphic browsing environments

4.45 – 5.20 Usability of Search Facilities and Forms

5.20 – 5.30 Sum-up and Close


§          Awareness of the need to design web resources with accessibility in mind has never been higher.

§          But users with disabilities may encounter serious usability problems even in a technically accessible web page: W3C WCAG compliance does not guarantee usability!

§          Today’s workshop – looking at some aspects of site design which can cause disabled users (and others) usability problems.

2 sessions:

1.        Usability and non-graphic, non-visual browsing environments

2.        Usability of forms – focus on site search facilities

Background materials

§           Nielsen Norman Group – Web Usability Guidelines for Disabled Users

§           Keith Instone – Site Usability Heuristics for the Web.

About the Presenter

David Sloan is Project Lead of the Digital Media Access Group, a Web accessibility research and consultancy group based in the Division of Applied Computing at the University of Dundee. The group have provided Web accessibility audits and advice to a number of clients in the HE, commercial and public sectors. David previously worked with the Disability and Information Systems in Higher Education project (DISinHE), the predecessor to TechDIS.

Usability of Non-Graphic, Non-Linear Web Browsing Environments

1.    Many usability problems stem from the translation of a graphical web page into a non graphical non linear version of the page:

§          Text-only browsers, audio based browsing environments

2.    Information flow logic which relied on position of one page element with respect to another is lost when page is linearised.

3.    Automatic generation of text-only versions of graphical pages may not make any difference to this problem

4.    Information flow may be further obstructed by:

§          inappropriate ALT text

§          inappropriate link titling

§          inadequate internal page navigation


Choose a web page with a reasonable mix of visual and textual content (your own or other, suggested:;,,,

With reference to Instone’s web usability heuristics (attached), provide a quick assessment of a page of the site’s usability.

Now use the Lynx emulator[1] to see a non-graphic, linearised version of the page.

Comment on the information flow presented to you:

§          How many lines before the first important content appears?

§          Is there Alt text for graphics? If so, does it aid or obstruct information flow?

§          Any information or feature aiding usability/accessibility? If so, where is it – easy to find or hidden away? Does this information actually help?


What makes a site usable in a non-graphic, non linear browsing environment?

Usability of Forms – Focus on Search Facilities

1.        Many web sites in HE/FE contain a large amount of information –the quickest way of accessing the information users need may be through submitting data via a form:

§          Site Search facility to take you to the correct page

§          Asking for restricted access data (may require submission of personal details as well as details of information required)

2.        Site search facility may be particularly useful for disabled users – but frequently present serious usability problems

3.        WAI guidelines discuss making forms operable via the keyboard, and coding forms to make them comprehensible when heard through a text-to-speech device. But how do we make a usable accessible form? How do we optimise usability and accessibility of a site search facility for users with disabilities?


Find a Site search form; evaluate it for usability and accessibility: Again, look at it in a graphic/non-graphic browser. Feel free to use your own site, or perhaps one of the previously suggested sites.

Things to consider: How easy is it to find the main text entry edit box (e.g. on every page, or is there a specific Search link)? How many additional components are offered? Where is the Submit button? Is the labelling of buttons and other components clear? Is the form still understandable in a non-graphic, non-linear environment? How easy is keyboard-only access?

Also evaluate the results display, and error handling. What information is provided by the results display? Is it easy to modify a search? How does one navigate between pages of results? How does the facility cope with a blank search or misspelled terms? Is there context-sensitive help? If so, how is it shown?


What makes search facilities and other forms accessible and usable?

[1] Lynx emulator: