1. 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

2. Accessible web page content Text Images and image maps Data tables Forms Dynamic content Multimedia Flash MS Word, MS PowerPoint Adobe PDF

3. 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 C'est la vie Choose a style sheet In the browser (Netscape 6 only) In the document (JavaScript and cookies) www.w3.org/StyleSheets/Core/preview

4. 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

5. 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=""

6. Tables DO NOT USE tables for layout Identify row and column headings using 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 Provide a table summary Use relative sizing Avoid spanning cells

7. Tables Holiday activities Activity Destination Ski-ing France.. Screen readers read along rows. Design tables that make sense if read along each row.

8. Forms and Form Elements Organise form logically Text next to form elements every element Group related elements using Provide for each fieldset No reliance on JavaScript No Jump menus Validation bypass Submission using buttons

9. Forms in Action Full name <input type="text" id="name" name="process_name" /> Chose a favourite sport Netball Curling Tiddly winks

10. 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

11. 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

12. 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

13. 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 Adobe advice

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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.