Birkbeck University of London Business Workshop Web Accessibility Accessible web page content ©...
-
Upload
bruno-lawson -
Category
Documents
-
view
215 -
download
0
Transcript of Birkbeck University of London Business Workshop Web Accessibility Accessible web page content ©...
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.