Workshop 2 Coding an Accessible Website - PowerPoint PPT Presentation

1 / 23
About This Presentation
Title:

Workshop 2 Coding an Accessible Website

Description:

XHTML new standard for web development. Separates content from presentation ... If you're comfortable coding by hand, get familiar with XHTML and CSS ... – PowerPoint PPT presentation

Number of Views:48
Avg rating:3.0/5.0
Slides: 24
Provided by: kirste7
Category:

less

Transcript and Presenter's Notes

Title: Workshop 2 Coding an Accessible Website


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 Words 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
  • ltp classbluegtThis text will be bluelt/pgt
  • lth1 classbluegtThis header will be bluelt/h1gt

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
  • ltimg srcimage.jpg width500 height281
    altSunset on the lake /gt

13
Images, continued
  • If no description needed, set alt ltimg
    srcscroll.jpg width200 height75 alt
    /gt
  • If too complex to be described in less than 80
    characters, make a page with a longer description
    and link to it with longdescltimg
    srcfigure1.jpg width400 height300
    altFigure 1 Statistical analysis of data
    longdescFigure1.html /gt

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
  • lta hrefht87484a.html titleSummarized log
    file analysis for January-MarchgtRead the full
    reportlt/agt

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

lttable summaryFreight charges by sea, rail,
road and air for major Australian
destinationsgt ltcaptiongtFreight
Chargeslt/captiongt lttrgtltthgtPerthlt/thgt
18
Labels for Forms
  • Labels associate field with correct text
  • Extremely useful for screen readers
  • Keep fields in logical order
  • ltlabel forsurname"gtYour Surnamelt/labelgt
  • ltinput type"text" namesurname" idsurname"
    size"20"/gt

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
  • Dont rely on the accessibility checker - some
    things need to be human-tested

21
Getting started
  • Like curb cuts in sidewalks, its always easier
    to build in accessibility from the start
  • Not too hard to modify an existing site

22
First steps
  • If youre 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_at_ubc.ca)
  • Kirsten Bole (kirsten.bole_at_ubc.ca)
  • Nathan Hapke (nhapke_at_interchange.ubc.ca)
Write a Comment
User Comments (0)
About PowerShow.com