Web Site Accessibility

Ian SeniorNovember 2003

Aim of talk

To give an overview of the problem To describe the legal situation To show some good and bad practice To point to some help

What is Accessibility?

Web content can be obtained and understood by as many potential viewers as possible, regardless of the user agent they employ or the constraints under which they operate. University of Buffalo NY State.

The problem

1 in 10 visitors is disabled in some way. Access is impeded by not allowing for people:

with forms of colour-impaired vision slow modems and lines turning off graphics who find it hard to read long sentences

The problem

who only have a 640 x 480 monochrome screen unable to read small fonts who prefer to use Linux who cannot use a mouse who cannot hear properly oh, yes, and people who cannot see!

Ways to use the web

Remember that viewing sites with IE is not the only way to use the web. Think of technologies like: Synthetic speech (screen reader) Paper printout Dynamic braille Keyboard only Text-mode browsers Web-enabled cars Mobile phones and PDAs

The legal situation

The 1995 Disability Discrimination Act (DDA) is relevant.

Since 1st September 2002, the Special Educational Needs and Disability Act (SENDA) has been in force. This act became part IV of the DDA and bring higher and further education under the protection of this legislation.

What does SENDA say?

SENDA makes it unlawful to:

Treat disabled people less favourably than their non-disabled peers, for a reason relating to their disability

Fail to provide reasonable adjustments for disabled students.

SENDA

SENDA seeks to provide disabled students with access to all the facilities and services of FE/HE organisation.

SENDA is an anticipatory Act, meaning organisations have to adjust their working practices for disabled people regardless of whether they are presently at the organisation or not.

This means web sites have to be accessible to all visitors and not just registered users.

Australian legal case

Maguire vs Sydney Olympic Games Failed to provide accessible site Defence of ‘unjustifiable hardship’ rejected $20,000 fine

Case could be used in UKThere have been no legal test cases in the

UK so far.

Poor excuses for non-compliance

Sorry, I am not interested We don't have any disabled people We don't have the time or expertise It's not my problem, I'll wait until everyone else

does something My system won't let me No-one else is fixing their sites I don't know what to fix

How not to help your visitors…

Who’s page is that?

Web Standards

World Wide Web Consortium (W3C). They develop interoperable technologies to:

‘Lead the web to its full potential as a forum for commerce, information, communication and collective understanding’

Web Accessibility Initiative (WAI)

W3C programme to: Ensure web technologies support accessibility Developing guidelines for accessibility Developing tools to evaluate and facilitate

accessibility Conduct education and outreach Co-ordinating web design with R & D

WAI checkpoints

WAI have produced a list of checkpoints for web content accessibility guidelines (WCAG) 1.0

This is a hierarchical structure consisting of three priority levels

Priority 1 (level A)Priority 2 (level AA)Priority 3 (level AAA)

Priority 1

This is the minimum level of accessibility web developers should be working towards. While this removes some accessibility barriers, many disabled students would still be excluded from using a site.

e.g Use Alt tags on images

Priority 2

Achieving this level will remove more barriers to accessibility although some students will still be excluded.

e.g. Link form elements with their labels

Priority 3

Satisfying this highest level will provide access for the vast majority of disabled people.

e.g. separate adjacent links with more than white space

Aim high

What priority level should we achieve?FE/HE institutions should regard priority 1

as the starting point for a web site. Priority 2 is the standard level expectedPriority 3 is the ideal level

Basic web design issues

It is not hard to get the simple things right: 1. Be realistic: don't make technology assumptions 2. Don't be lazy and do it all with images 3. Don't use non-intuitive navigation aids 4. Make your site consistent 5. Use simple language 6. Provide text versions 7. Leave control of appearance to CSS8. Structure your web pages correctly (H1 tags etc.)

Make consistency rules

Make house rules and stick to them. Keep your pages consistent.

Create a visual identity that holds all your pages together. This will help everyone.

Decide on a technology and make everyone use it. Don't mix Flash and XML and PDF in the same small site.

Dyslexia and cognitive disabilities

Write short sentencesUse consistent layoutDon't flash at people or use multi-coloured

backgroundsKeep sentences below 20 wordsUse white spaceSay one thing at a time

HTML 4.01

Current standard for HTML Comes in 3 versions:

Strict document type definition (DTD) Transitional DTD Frameset DTD

The strict DTD will produce a web site that complies to all three priority levels, the other two make compliance very difficult above level 1

Tools to aid compliance

Evaluation tools analyse pages and produce a report

Repair tools Identify and help to fix page problems

Filter and transformation tools Assist web users by modifying a page or

supplement assistive technology or browser

Opera browser features

When developing a site it is helpful to see how accessible your new site is. A very quick way is to use Opera. This has accessibility options:

• Linearize tables• Turn on/off graphics• Turn on/off CSS author & user versions• Zoom in on text• Turn on/off JavaScript

WAVE software

Allows you to add a button to the links bar of your browser.

Clicking the button opens up WAVE which examines the page for accessibility.

WAVE home page

WAVE in action – good site

WAVE in action – poor site

HTML – Standard page

Give DOCTYPE DTDState document languageIf table used in page design use the

summary tag & ‘layout table’ textInclude ‘skip navigation’ linkUse headers for structure only – style

through CSS if necessaryConsider a CSS approach to page layout

More HTML

TITLE attributedescribe a link

Acronym elementAbbreviation elementACCESSKEYTABINDEX attribute

cycle logically through links

Graphics

Use ‘alt’ attribute on all imagesSpacer image used in design only alt=“”Graphics used as bullets alt=“*”Information graphics should have sensible

alt textUse longdesc attribute for complex images

e.g. graphs, detailed images. Alternatively link image via ‘D’ text

HTML - Tables

Make your table as simple as possible Add summary of information for data tables Associate table column & row headings with

cells Attributes include: TH, ID, headers, scope THEAD, TBODY, TFOOT also available

Give your table a caption Check readability when linearized using Lynx or

Opera

HTML Forms

Use clear language Use form accessibility tags:

For, ID, name, label, Group related items together

fieldset, optgroup and legend Add hints to text boxes Make PDF documents more accessible using

Acrobat 6+

Cascading style sheets

Allow for - font family: serif, sans-serif, cursive - font size: tiny or huge - colour, background and foreground - white space around objects - what links look like - borders around things - to be controlled in one place- allow the user to override it.

Not all browsers implement CSS properly (Netscape 4).

With CSS

Without CSS

What are we doing?

We use XML to mark up our pages We can deliver pages in different forms: PDF,

print ready, XML, HTML We are developing a method to allow users

to select their own colour schemes We provide a text only selection We are developing an automatic accessibility

XSLT style sheet.

What are we going to do?

Make our tables more accessible Make our forms more accessible Try to future proof our site as much as

possible

Conclusions

Accessibility is all about people being able to obtain information from the web.

Legal requirement through SENDA Write W3C compliant code Use HTML 4.01 strict DTD as your starting level Aim for at least priority 2 standard Use CSS for site styles

Use the validation tools from W3C and others to check site compliance.

Useful sites

Web Accessibility Initiative http://www.w3c.org/WAI/

W3 Consortiumhttp://www.w3c.org

TechDis (JISC Funded)http://www.techdis.ac.uk/

More sites

http://www.rnib.org.uk/digital/ The RNIB's practical take on web access

http://www.useit.com/ Industry commentary on useability of web sites

http://vischeck.com/ Check your understanding of colour blindness

Validators & other tools

Site Viewing Tool http://www.anybrowser.com/siteviewer.html

HTML Tidy Tool http://www.w3c.org/People/Raggett/tidy/

HTML Validatorhttp://validator.w3.org/

CSS Validator http://jigsaw.w3.org/css-validator/

Checking tools

Wave http://www.wave.webaim.org/index.jsp

Bobby http://bobby.watchfire.com/bobby/html/en/index.jsp

Aprompthttp://aprompt.snow.utoronto.ca/

Vischeck http://www.vischeck.com/vischeck/vischeckURL.php

Lifthttp://www.usablenet.com/

Talk found at

This talk is downloadable from:

http://users.ox.ac.uk/~ian/

PDF and PowerPoint versions available