Kate Bronstad

1
Accessibility

• Kate Bronstad
• INF 385E
• Information Architecture and Design I
• November 2nd, 2006

2
Overview

• Accessibility Disability
• Why Accessbility is important
• Web Guidelines Standards
• Accessible practices you can adopt
• Resources
• References

3
What is (web) Accessibility?

• Web resources are accessible if people with
  disabilities can use them as effectively as
  non-disabled people

-UT Accessibility Institute, www.utexas.edu/resea
rch/accessibility
4
Types of disabilities

• Visual
• - blind, low vision, and color blind
• Motor/Physical
• Auditory
• Cognitive Learning

5
Why accessibility matters

• Human rights
• Good business practice
• Legality
• -section 508
• -TX HB 2819
• -ADA?

6
Target vs. the Blind

• Judge rejected Targets argument that ADA only
  applied to physical spaces. The case will
  proceed.

7
Accessibility for others

• Slow Internet Connection
• Old Browser
• Missing Plugins
• No Speakers
• Small Display (pda, mobile phone)
• Eyes busy / Hands busy
• Noisy Environment

Sourcehttp//www.utexas.edu/learn/accessibility/d
isability.html
8
Web Accessibility Guidelines

• WCAG 1.0
• -official W3C recommendation
• -WCAG 2.0 in draft
• Section 508 checkpoints
• -based on WCAG 1.0

9
WCAG 2.0 Principle 1

• Content must be perceivable
• Give text descriptions for all non-text (but
  still meaningful) content
• For multi-media content, provide synched
  alternatives
• Distinguish content from presentation
• Make distinction between foreground information
  and background obvious

10
WCAG 2.0 Principle 2

• Interface components in the content must be
  operable
• Everything functional by keyboard
• Allow for user-controlled time limits
• If your content could cause a photosensitive
  person to have a seizure, at least find a way to
  guard them from it.
• Give the user easy ways to understand, navigate,
  and orient themselves in the page
• Reduce ways users could make mistakes, and make
  it easy for them to correct mistakes.

11
WCAG 2.0 Principles 3 4

• Content and controls must be understandable
• Make text content readable and understandable
• Make the placement and functionality of content
  predictable
• Content should be robust enough to work with
  current and future user agents (including
  assistive technologies)
• Support compatibility with current and future
  user agents (including assistive technologies)
• Ensure that content is accessible or provide an
  accessible alternative

-Source http//www.w3.org/TR/WCAG20/
12
WCAG 2.0 POUR

• Perceivable
• Operable
• Understandable
• Robust

-Source http//www.w3.org/TR/WCAG20/
13
What is accessible?

• Transformability
• Presenting and structuring information so that it
  can be perceived in multiple ways

14
Small things big difference

• Alt use in moderation
• Skip navigation links
• Semantic structure

15
Best ltaltgt practices

• Accurately represent the same information and
  function as the image
• If the image is decorative, or part of a link,
  use alt
• If image is within a form, use alt to describe
  the function (ex. alt submit search)
• Dont use image of or link to when coding
  makes this apparent

16
Skip navigation links

• Add a skip navigation link at the top of the
  page
• Visible or invisible (with CSS - keyboard focus)

Sourcehttp//www.webaim.org/techniques/skipnav/
17
Semantic structure

• Convey meaning that doesnt rely on context of
  presentation
• Use hierarchical heading structure (ex. h1 is
  most important)
• Use ltstronggt for bold and ltemgt for italics
• Use lists correctly

18
Semantic structure

• In non-layout tables, use ltthgt to define rows and
  columns,plus headers and ids for more
  complicated tables
• For layout tables, use CSS
• With forms, use ltlabelgt to describe the
  information the user should enter
• Also use ltlabelgt in pull-down menu to describe
  what user can choose to do

19
Other basic points

• Avoid pull-down menus for navigation, provide
  alternative if needed.
• Make text of hyperlinks comprehensible on their
  own, not just click here
• Use ltacronymgt and ltabbrgt when called for.
• If site has site map, have link on every page

20
Accessibility and Web 2.0

• User generated content and AJAX complicate
  things.
• If use JavaScript/AJAX, do so with caution

21
Ways to check your website

• Turn off the images and sound
• Tab through site
• Use screen reader emulator like FANGS
• Use online tools like WAVE,
• http//wave.webaim.org/index.jsp

22
Links to Resources

• UT
• Accessibility Institute
• http//www.utexas.edu/research/accessibility/
• Designing Accessible Websites
• http//www.utexas.edu/learn/accessibility/
• WCAG
• Web Content Accessibility Guidelines
• http//www.w3.org/TR/WAI-WEBCONTENT/

23
Links to Resources

• TOOLS AND SAMPLE CODE
• http//accessify.com/
• http//webaim.org/
• WAVE
• http//wave.webaim.org/index.jsp
• Adobe Accessibility http//www.adobe.com/accessib
  ility/index.html
• W3C Accessibility Tools
• http//www.w3.org/WAI/ER/tools/

24
References

• Appropriate use of alternative text.WebAIM
• http//webaim.org/techniques/alttext
• Attractive, Accessible Websites,
• http//accessify.com/features/articles/good-looker
  s/
• Creating Semantic Structure. WebAIM
• http//www.webaim.org/techniques/semanticstructure
  /
• The future of web accessibility,
• http//www.webcredible.co.uk/user-friendly-resourc
  es/weaccessibility/future.shtml

25
References

• Skip navigation Links, webAIM
• http//www.webaim.org/techniques/skipnav/
• Sutel, Seth. Blind web surfers sue for
  accessibility. AP. Retrieved from
• http//biz.yahoo.com/ap/061024/business_of_life.ht
  ml 10/24/06
• UT Accessibility Institute,
• http//www.utexas.edu/research/accessibility/resou
  rce
• Web Content Accessibility Guidelines 2.0
  Checklist, W3C,
• http//www.w3.org/TR/2005/WD-WCAG20-20050630/check
  list-linear.html