1 / 23

Workshop 2 Coding an Accessible Website

Join us for a 5-day workshop on coding an accessible website. Learn about web content accessibility, multimedia, usable content, and more. Funded by BCcampus, this project is led by Natasha Boskic, Kirsten Bole, and Nathan Hapke from the University of British Columbia.

mdougherty
Download Presentation

Workshop 2 Coding an Accessible Website

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Workshop 2Coding an Accessible Website Web Content Accessibility Project Funded by BCcampus Natasha Boskic, Kirsten Bole, Nathan Hapke University of British Columbia

  2. Workshop schedule • Monday August 21Basics of Web Accessibility • Tuesday August 22Coding an Accessible Website • Wednesday August 23Accessible Multimedia • Thursday August 24Creating Usable Content • Friday August 25Disabilities & Assistive Technology

  3. The Plan • Accessibility review • Using XHTML and CSS • Structure & content • Fonts • Links & navigation • Images • Tables • Multimedia • Validators & testing

  4. What is accessibility? • Universal design for the web • Ensuring anyone with any browsing technology can access all the information on your site • People with disabilities • Handheld computers and cell phones • Dial-up modems • Need to use consistent, standard code to support as many users as possible

  5. What do I use? • Please do NOT use Word’s “Export to HTML” feature! • Beginners: Course Genie will export a valid, accessible site from Word • Intermediate: use a good WYSIWYG editor such as Dreamweaver • Expert: hand-code XHTML and CSS

  6. What to consider • Be consistentKeep navigation the same on each page • Be redundantPresenting information in multiple ways helps all learners

  7. Learning XHTML/CSS • HTML not good for complex layouts • XHTML new standard for web development • Separates content from presentation • MUCH easier to make sweeping changes! • Eliminates redundancy & bloated pages • Well-formed pages work in more browsers • Foundation for an accessible site

  8. Adapting to XHTML • Mostly the same as HTML • Stricter format • Avoid tables & “pixel shims” for layout • No more FONT, CENTER, ALIGN… • Describes the structure and content of the page, but not its appearance or presentation

  9. Quick CSS primer • Cascading Stylesheets define ONLY appearance • Define a class & apply it to a tag: .blue {color: #000099; } <p class=“blue”>This text will be blue</p> <h1 class=“blue”>This header will be blue</h1>

  10. Structure & Content • Considerations for cognitive disabilities benefit all users • Navigation must be consistent • Clear, concise directions • Group like items together • Chunk text - Web users scan rather than read • Site search & site map

  11. Font sizes • Low-vision users need to be able to increase font size • This can be done with a screen magnifier • It can also be done with the browserUNLESS font sizes are set incorrectly. • Use relative fonts (%, em) rather than absolute (px, pt) body { font-size: 90%; }

  12. Images • Assume images cannot be viewed • Use alternative text to describe image content • Meaningful & descriptive <img src=“image.jpg” width=“500” height=“281” alt=“Sunset on the lake” />

  13. Images, continued • If no description needed, set alt=“ ”:<img src=“scroll.jpg” width=“200” height=“75” alt=“ ” /> • If too complex to be described in less than 80 characters, make a page with a longer description and link to it with longdesc:<img src=“figure1.jpg” width=“400” height=“300” alt=“Figure 1: Statistical analysis of data” longdesc=“Figure1.html” />

  14. Links • “Click here” is not a meaningful link • Use title attribute to describe vague URLs • Avoid repeating the same link text • Option to skip over navigation <a href=“ht87484a.html” title=“Summarized log file analysis for January-March”>Read the full report</a>

  15. Javascript • Often inaccessible to screen readers • Pop-ups, rollovers, form validation • Many DHTML menus completely useless • Call functions from onClick instead of href • Always provide alternatives if important!

  16. Pop-up windows • Traditional to open external links in a new window • Breaks the BACK button • Confusing for many users • Let users choose how to open window • Warn if new window will be opened

  17. Labels for Tables • Tables are fordata, not layout • Think linear! • Summary • Header rowor column • More optionsavailable for complex tables <table summary=“Freight charges by sea, rail, road and air for major Australian destinations”> <caption>Freight Charges</caption> <tr><th>Perth</th>…

  18. Labels for Forms • Labels associate field with correct text • Extremely useful for screen readers • Keep fields in logical order <label for=”surname">Your Surname</label> <input type="text" name=”surname" id=”surname" size="20"/>

  19. Multimedia • Flash, Shockwave, Quicktime, etc. • Good for cognitive/learning issues • Some accessibility options in Flash • No support in text browsers • Poor support in screen readers • Provide transcripts of audio & video • Provide alternatives to important interactive content

  20. Using Validators • Use XHTML and CSS validators to make sure your code is correct • Use accessibility checker like Watchfire WebXact to look for missing pieces • Don’t rely on the accessibility checker - some things need to be human-tested

  21. Getting started • Like “curb cuts” in sidewalks, it’s always easier to build in accessibility from the start • Not too hard to modify an existing site

  22. First steps • If you’re comfortable coding by hand, get familiar with XHTML and CSS • First provide alternative text for visuals - photographs, charts, graphs • Let users control the font size • Keep an eye on your link text • Labels for tables and forms • Alternatives for multimedia

  23. Thank you for coming! • Join us tomorrow for Accessible Multimedia - 12 pm PST • Natasha Boskic (natasha.boskic@ubc.ca) • Kirsten Bole (kirsten.bole@ubc.ca) • Nathan Hapke (nhapke@interchange.ubc.ca)

More Related