Web Accessibility

1
Web Accessibility What Not To Do.

• Presented by Lori Bailey
• Web Accessibility Center
• www.wac.ohio-state.eduE-mail webaccess_at_osu.edu

2
Accessibility Guidelines Knowing v Understanding

• Listen to this example from an OSU college web
  site.
• Can you tell what guideline/s have been
  misinterpreted?

3
What Do Sighted Users See?
4
What Does Bobby Say?
If the Section 508 issues listed below do not
apply to your page, then it qualifies as Bobby
Section 508 Approved and you are entitled to use
the Bobby Section 508 Approved icon. To obtain
the icon and learn how to place it in your page,
visit the Icon Guidelines page on the Watchfire
web site.
5
Validators YES!

• Bobby 5.0 (used by the WAC)
• Full version does entire site
• Free version online (single pages only)
• WAVE 3.0 from WebAIM
• Handy toolbar for on-the-fly checking
• Returns pictorial results within the page
• A-Prompt
• Available from OIT site licensed software
• Helps you correct pages
• Must be installed locally

6
Validators The Myth and The Facts

• Myths
• If the site validates, it must be accessible.
• Manual checks cover only low-priority issues.
• It doesnt matter which validator you use.

• Facts
• Different validators are good at checking
  different things.
• Most validators will find the most significant
  accessibility errors.
• Many high priority issues cannot be checked by a
  validator.

7
Validators Arent Users
Canadian Innovation Centre

• Except for two missing ALT tags (which should be
  empty) this page passes Bobby. However
• Mystery meat navigation
• Navigation does not work
• Scripted menus not likely to work with assistive
  technology
• Uses spacer images that override relative sizes
• Text not scaleable

8
Issues Validators Cant See.

• Bad ALT tags (e.g. Engineering)
• Text as images.
• Script events and the Longdesc.
• Invisible help and skip navigation.
• Layout versus Data tables.
• Flash good v bad.

9
Situation 1The Art of the ALT
With images turned on.
With images turned off.
10
ALT Dos and Donts

• Dont use ALT tags for spacer or purely
  decorative images.
• Keep it short not over 64 characters (use
  LONGDESC).
• Avoid descriptions, focus on purpose.
• Dont use cryptic ALT tags (alt
  cwindexbtn-1go)

YES View our help page.
NO Image of small bug holding folder with
question mark above its head. Click to get
information about this site or to find out more
about what we offer.
ALT is empty ALT tag for decorative elements.
11
Situation 2 Text As Images

• Problem Want to control how text is displayed.
• Bad Solution Make images of specially formatted
  text.
• Good Solution Use style sheets and accept some
  difference.
• Reason Images do not zoom/enlarge well, cannot
  be cut and pasted, add extra verbiage, and
  require higher baud rates.

Sample site cota.com
12
Use Style Sheets / Avoid Deprecated Code

• Formatting with style sheets
• Redefine existing HTML tags (e.g., ltPgt, ltH1gt,
  ltH2gt, ltULgt, etc.).
• Create new styles for special characters (e.g.,
  Excerpt boxes, announcement text, borders,
  additional spacing.
• Allows users to turn-off styles and view
  plain-text or customized version of your page.

• Deprecated code overrides user choices
• ltFONTgt no longer used for font-size, font-weight,
  or font-style (name)
• ltCENTER.gt, ltBgt, ltIgt replaced with ltP
  aligncentergt, ltstronggt, ltemgt
• ltBLOCKQUOTEgt has specific functions dont use
  for indenting (create an indent style).

13
Situation 3 Longdesc for Script Events

• Problem Mouse-activated text on a page.
• Bad Solution Ignore this text or add invisible
  descriptions.
• Good Solution use the Long Desc attribute.
• Reason Provide the same content for all users,
  but dont be obtrusive to users of assistive
  technology.

Sample site va.gov
14
The Bad of Longdesc

• IMAGE DESCRIPTIONS FOR THE VETERANS BENEFITS
  SERVICES HOME PAGE
• Header Selectable Image The image shows a
  health care provider taking a person's blood
  pressure. The text next to it reads, "Health
  Benefits and Services" The image links to the
  Health page. That page contains information about
  eligibility for care, locations of health care
  facilities, forms, frequently asked questions,
  hot topics and press releases, general
  information about the Veterans Health
  Administration, and an e-mail contact.
• Return
• Header Selectable Image The image shows a
  cemetery. The text next to it reads, "Burial and
  Memorial Benefits" The image links to the Burial
  and Memorial Benefits page. That page contains
  information on cemeteries, headstones and
  markers, presidential memorial certificates, and
  state cemetery grants program.
• Return

See the GOOD example.
15
Situation 4Invisible Help

• Problem Want to direct helpful information to
  assistive technology users and not disrupt the
  design.
• Bad Solution Create multiple invisible text
  entries that target screen reader users.
• Good Solution Create a prominent accessibility
  link with instructions visible to all users.

VAs Text Only page addresses message to
screen-reader users. Can only reach the page
through invisible link.
16
Other Examples of Invisible Help

• Long descriptions in table summaries
• Use caption or link to descriptive page.
• Invisible GIFs with helpful ALT tags
• Screen readers cannot skip over this information
• Often would be just as useful to non-screen
  reader users.
• Multiple Skip Navigation entries
• Assumes users rely on links to navigate page
• Often unclear (headlines, stories, events)
• Good for frames, links pages, multi-column pages

17
Situation 5 Layout and Data Tables

• Layout tables
• Content randomly placed in any cell.
• Do not include any special markup
• May include very short summary, but not necessary
• Data tables
• Content in same column has shared relationship
• Must include summary and header markup

Is this a layout or a data table?
18
Use Table Headers

• Using ltTHgt with the ltscopegt attribute will allow
  cells to be crossed referenced. Even better
  headers and ID.

See the HTML that correctly created this table
JAWS reading bad table (no signposts).
JAWS reading good table.
19
Situation 6 To Flash or Not to Flash
Where are the links? Can you guess?
20
Flash The Myth and The Facts

• Myths
• Flash makes pages better.
• Flash is cool everyone likes Flash.
• If it doesnt have Flash, the site looks static
  and boring.
• Flash is never accessible.

• Facts
• Flash done well adds depth and content.
• Most Flash adds little to a web page while making
  it less useful to a greater number of users.
• Accessible Flash is possible but must be part
  of the initial design process, not an
  afterthought.

21
Tips for Good Flash

• No Flash for navigation.
• Stop animations after x time or loops. (See
  Campus Chemical Instrument Center)
• Use empty ALT tags for decorative Flash.
• Offer alternate formats for content rendered in
  Flash (including Flash videos).
• Learn ways to develop accessible Flash
• Macromedias Accessibility Center
• Upcoming WAC workshop on Flash

22
Conclusions

• Use validators as a step in your process, not as
  the only measure of accessibility.
• Learn the purpose as well as the technical how-to
  for standards.
• Look at your site from the users point of view.
• Consider accessible design beyond the screen
  reader.
• Do this and you can avoid . . .

23
TheDysfunctional Site
Dont break navigation with pop-ups or other
techniques.
How much of the page dedicated to information?
Is navigation simple and intuitive?
Is navigation simple and intuitive?
24
Resources

• WAC web site www.wac.ohio-state.edu
• Includes tutorials from WAC, WebAIM, and
  Macromedia
• Links to the best accessibility tools
• Bobby online bobby.watchfire.com
• Free site validation using either 508 or WCAG
• Tip validate as you go dont wait until design
  is finished to check accessibility
• WAC site reviews webaccess_at_osu.edu
• Send us your URL and tell us what level of
  compliance you are hoping for (basic, advanced,
  OSU minimum)
• Currently offering a one- to two-week turnaround.

25
More WAC Workshops

• Intelligent STEPs to Redesign and Retrofit. --
  WAC Presentation
• Date Wednesday, May 12th.Time 430 p.m. - 530
  p.m. Location Parks Hall , Room 111.
• Cascading Style Sheets (CSS) - If You Use It, It
  Will Transform. -- WAC Hands-on Workshop.
• Date Wednesday, May 26th.Time 230 p.m. - 330
  p.m. Location Ramseyer, Room 009.

26
The End
27
Table Code
lttable width"90" border"2" id"datatable"
summary"This table contains information on
student programs. Each row lists the student
name, academic level completed to date, and
current program enrolled."gtlttrgtltth
scope"col"gtltpgtStudentlt/pgtlt/thgtltth
scope"col"gtltpgtAcademic Levellt/pgtlt/thgtltth
scope"col"gtltpgtCurrent Programlt/pgtlt/thgtlt/trgtlttr
class"smallertxt"gtltth scope"row"gtltpgtLori
Badialt/pgtlt/thgtlttdgtltpgtM.A. completedlt/pgtlt/tdgtlttdgt
ltpgtPh.D. Englishlt/pgtlt/tdgtlt/trgtlttr
class"smallertxt"gtltth scope"row"gtltpgtSusan
Baileylt/pgtlt/thgtlttdgtltpgtB.S. completedlt/pgtlt/tdgtlttd
gtltpgtM.B.A.lt/pgtlt/tdgtlt/trgtlttr class"smallertxt"gt
ltth scope"row"gtltpgtAlicia Bakerlt/pgtlt/thgtlttdgtltpgtB.
A., in progresslt/pgtlt/tdgtlttdgtltpgtDept. of
Educationlt/pgtlt/tdgtlt/trgtlt/tablegt
RETURN
28
Good LongDesc

• Health Benefits and Services page contains
  information about eligibility for care, locations
  of health care facilities, forms, frequently
  asked questions, hot topics and press releases,
  general information about the Veterans Health
  Administration, and an e-mail contact.
• Return

ALT Health Benefits and Services
29
The End