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)