Download Accessible web page content - Birkbeck, University of London

Birkbeck University of London
Business Workshop
Web Accessibility
Accessible web page content
© 2001-2007 Copyright Janet Billinge
Adapted 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


Units



Relative (not fixed size)
ems (relative to the containing element)
Colours


sans-serif (e.g. Arial, Helvetica, Verdana)
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



Images used as links



alt=""
Screen readers list by alt attribute (or name of linking file)
Images conveying complicated information


Descriptive and meaningful
Empty for decorative images
alt="web"
alt="Spiders web:analogy
for World Wide Web"
Link to other document for description

The longdesc attribute

[D] link
Contrasting colours
Specify height and width
Tables



DO NOT USE tables for layout
Identify row and column headings using <th>
Identify data cells with header

Simple Tables (1D or 2D)


Complex Tables (3D)






Use scope to describe content for screen reader
Avoid where feasible
Use id and headers
Provide table title using <caption>
Provide a table summary
Use relative sizing
Avoid spanning cells
Tables

Screen readers read along rows. Design tables that
make sense if read along each row.
<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>..
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


Usually a combination of


for most users particularly those with learning and cognitive
disabilities
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


Closed captions



Creates synchronised captions
Export for SAMI (Windows Media Player), SMIL (RealPlayer),
QuickTime (QuickTime)
Transcripts



Separate text track, uses functionality of media player
Free tools e.g. MAGpie (Media Access Generator)
ncam.wgbh.org/webaccess/magpie


Encoded into video or audio
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





Problematic
Audio controls in movie


Jaws and Window Eyes
Internet Explorer
Flash 6 movies
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)
<object ...>
<param name="wmode" value="opaque">
<embed wmode="opaque" ...>
</embed>
</object>

Tab order



By default, distance from top left hand corner
Specify using ActionScript
Screen reader detection

By ActionScript
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 correctly
www.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.