Birkbeck University of LondonBusiness Workshop

Web Accessibility Accessible web page content

© 2001-2007 Copyright Janet BillingeAdapted from Accessible Page Content

© Netskills, Quality Internet Training, University of Newcastle

Accessible web page content Text

Images and image maps Data tables Forms Dynamic content Multimedia Flash MS Word, MS PowerPoint Adobe PDF

Text Font

sans-serif (e.g. Arial, Helvetica, Verdana) Units

Relative (not fixed size) ems (relative to the containing element)

Colours Contrasting colours (e.g. not red on green)

Language Specify change to natural language<p lang="fr" xml:lang="fr">C'est la vie</p>

Choose a style sheet In the browser (Netscape 6 only) In the document (JavaScript and cookies)www.w3.org/StyleSheets/Core/preview

Writing text for the web Users scan Use clear, simple, concise, consistent

language Break into small chunks Enable users to skip chunks Use standalone text for headers, links No scrolling or flashing text "How Users Read on the Web"

(Jakob Nielsen)www.useit.com/alertbox/9710a.html

Images and Image Maps All images and hot spots

Set alt attribute Descriptive and meaningful Empty for decorative images

Images used as links Screen readers list by alt attribute (or name of linking

file) Images conveying complicated information

Link to other document for description The longdesc attribute [D] link

Contrasting colours Specify height and width

alt="web"alt="Spiders web:analogy for World Wide Web"

alt=""

Tables DO NOT USE tables for layout Identify row and column headings using <th> Identify data cells with header

Simple Tables (1D or 2D) Use scope to describe content for screen reader

Complex Tables (3D) Avoid where feasible Use id and headers

Provide table title using <caption> Provide a table summary Use relative sizing Avoid spanning cells

Tables

<table summary="Table charting popular holiday sporting activities in European Countries"><caption>Holiday activities</caption><tr><th scope="col">Activity</th><th scope="col">Destination</th></tr><tr><th scope="row">Ski-ing</th><td>France</td></tr>..

Screen readers read along rows. Design tables that make sense if read along each row.

Forms and Form Elements Organise form logically

Text next to form elements <label> every element

Group related elements using <fieldset> Provide <legend> for each fieldset No reliance on JavaScript

No Jump menus Validation bypass Submission using buttons

Forms in Action<form action="">

<div>

<label for="name">Full name</label>

<input type="text" id="name"

name="process_name" />

</div>

<fieldset>

<legend>Chose a favourite sport</legend>

<input type="radio" id="netball" name="radiobutton" />

<label for="netball">Netball</label><br />

<input type="radio" id="curling" name="radiobutton" />

<label for="curling">Curling</label><br />

<input type="radio" id="tiddly" name="radiobutton" />

<label for="tiddly">Tiddly winks</label><br />

</fieldset>

</form>

Dynamic Content Generated server-side

From database, using templates? Browsers handle output only Ensure output is accessible

Generated client-side Will be inaccessible to some browsers Is it necessary? Provide alternative content using <noscript>

Multimedia HTML is the most accessible format Supplemental multimedia will enhance access

for most users particularly those with learning and cognitive disabilities

Usually a combination of Sound, motion (animation), video, advanced

interactivity Formats

Audio/Video played using plug-ins: QuickTime, RealPlayer, Windows Media Player

Also Flash, Shockwave, Java

Accessible Multimedia Synchronised captions

Open captions Encoded into video or audio

Closed captions Separate text track, uses functionality of media player

Free tools e.g. MAGpie (Media Access Generator)ncam.wgbh.org/webaccess/magpie

Creates synchronised captions Export for SAMI (Windows Media Player), SMIL

(RealPlayer), QuickTime (QuickTime) Transcripts

Not necessarily verbatim of dialogue Additional information using [D] link or longdesc attribute

Audio description for video

Flash Dynamic, interactive 98% of web users have the Flash plug-in BAD reputation for poor accessibility OK for accessibility

Multiple media: graphics, text, audio Scalability: Vector graphics Keyboard only access Engaging

Inherently not very accessible Time-based Visual Adobe advice on using Flash to create accessible

web resources

Accessible Flash (1) Follow general accessibility guidelines Text equivalents

Make Flash content accessible to screen reader Uses third party bridging software:

Microsoft Access Accessibility Only works with most recent versions of

Jaws and Window Eyes Internet Explorer Flash 6 movies

Problematic Audio controls in movie

No need for screen reader Text alternative

Same content, not same experience

Accessible Flash (2) Keyboard access

Focus Flash movies receive and hold focus from browsers

(will return to screen readers) Make movie invisible to keyboard and screen reader

(also inaccessible)

Tab order By default, distance from top left hand corner Specify using ActionScript

Screen reader detection By ActionScript

<object ...><param name="wmode" value="opaque"><embed wmode="opaque" ...></embed></object>

MS Word HTML is the most accessible format Write a structured document (use Word Styles) alt text for images Convert to HTML

Office XP: Save as Web Page, filtered Office 200?: Download MS HTML filter

office.microsoft.com/downloads/2000/Msohtmf2.aspx Older versions: Save as Web Page

Clean up HTML using a third party? Dreamweaver: Clean up Word HTML HTML TIDY

www.w3.org/People/Raggett/tidy

MS PowerPoint Some screen readers can access PowerPoint

to some degree Not truly accessible

Need alternative format Convert to HTML

Office 200? and Office XP Tool from University of Illinois MS Office Web Publishing Accessibility Wizard www.rehab.uiuc.edu/office/

Older versions Save as Web Page Complicated frameset No alt tags for images Netscape interprets as a single image Inaccessible to screen readers

Adobe PDF Provide a HTML alternative? Follow general accessibility guidelines Screen reader users

Users must have Acrobat Reader 5.0+ JAWS or Window Eyes for Windows

Developers Ensure real text (not scanned) Create tagged PDF format

Acrobat 5.0 (with Make Accessible Plug-In) or Acrobat 6.0 Document marked up correctlywww.adobe.com/products/acrobat/access_book_appendixa.html

www.adobe.com/products/acrobat/pdfs/CreateAccessibleAdvanced.pdf

Summary Writing for the web is not the same as

for paper HTML has some tags and attributes to

support accessible documents HTML is the most accessible format Include supplemental multimedia Design multimedia, Word documents

and PDF files with accessibility in mind For MS products, using Save as Web Page is not a reliable or efficient option.