Embed Size (px)
Citation preview
Notable Guidelines•WCAG W3C Consortium
Version 1.0 and 2.0
• 2.0 most recent and includes Web 2.0 sites
3 Levels (level 1 = minimal)
•Section 508 U.S. Government – under revision to more
closely match WCAG
•ARIA – For Web 2.0
Anatomy of WCAG 2.0•4 Major Guidelines (POUR) Be Perceivable to all audiences
• There are subguidelines here
Be Operable for all audiences
Be Understandable to all audiences
Be Robust enough for multiple devices
•3 Levels A, AA required at Penn State
AAA optional unless required for specific user
Guideline 1: Perceivable•Guideline 1.1 (Text Equivalent) Alt text for images/multimedia
•Guideline 1.2 (Time Based Media) Time Based = audio/video
Captions/Transcriptions for hearing impaired
Description of visuals for visually impaired
•Guideline 1.4 (Distinguishable) Good color contrast of text/background
No background audio by default
ALT Text Options
•HTML <img src=“creditcard.gif” alt=“Visa, Mastercard
accepted”>
•ANGEL – Alternative Text field in upload
•Word/Powerpoint – Option in Format Picture menu
•Blogs – description in upload is ALT tag
Color Contrast
•It should be legible in black and white
•Beware Gray on gray or pale blue on white
Vivid colors together
•Luminosity Test http://juicystudio.com/services/
luminositycontrastratio.php
Wiggle room for large/bold text
Guideline 1.3 “Adaptable”
•“Content can be presented in different ways”
•Use “Semantic markup” Many tags parsed by screen readers
•Headers HTML/WYSIWYG Web Editors: H1, H2…
Word: Heading 1, Heading 2 styles
Powerpoint: Title & text areas
Tables/Forms in HTML
•HTML Tables CAPTION Tag – title of table
TH tag – marks cells as headers
SUMMARY – additional information for screen reader audience
•Forms LABEL – each form field should have
matching LABEL tag
CSS Benefits & Gotchas
•Benefits Allows for cleaner HTML
Allow content to be reformatted
Avoid some scripting
•Gotchas Absolute positioning & floats can distort
order so that screen reader order ≠ visual order
Color contrast & legibility guidelines still apply
Guideline 2: Operable
•Guideline 2.1 (Keyboard accessible) Including video players
• JWPlayer, YouTube, and standalone safest
Allow arrow keys to move objects
Use keyboard equivalents in Flash
Use sequence numbers + drag & drop
Requires scripting know-how
•Applies to motion impaired & visually impaired audiences
More Guideline 2•Guideline 2.2 (Enough Time) Allow pause of scrolling text
Gentle pace for updating text
Warn users of time limits (esp quizzes)
•Guideline 2.3 (Watch the blink tag) 3 flashes per second is max speed
Use gentle pulses
Avoid “red flash threshold” (as defined by WCAG)
Guideline 2.4: Navigation
•Simplify Navigation Frames OK, but label each frame with
meaningful title
Multiple paths to reach destination
• Search, Browse, Site Map, Breadcrumbs
Use “landmarks” in newer sites (e.g. Google Maps) – ARIA will help here.
Make cursor position highly visible
• Browser defaults not helpful
Guideline 3: Understandable
•Guideline 3.1 Understandable Mark English docs as <html “lang=en”>
• Mark changes in language
Define jargon (also more usable)
•Guideline 3.2 Predictable Consistent navigation
Don’t disable back button without warning
Warn before pop-ups, PDF links….
Separate GO/SUBMIT button on forms
• Lest you go somewhere unexpected
Guideline 3.3 Input Assistance
•Help users with forms Label fields correctly for screenreaders
(this will help everyone) Label required fields with text, not
color/formatting Provide instructions for entering
information Provide usable error messages
• Identify field with incorrect information
• Explain entry parameters
• NOT in a lightbox (not accessible yet)
Guideline 4: Robust
•Guideline 4.1: Be Compatible Use valid markup
• With semantic tagging
• Label everything in the interface
So that it works on
• A screenreader
• A smart phone
• Usable on a keyboard
It’s a little vague…
Navigating the Real WCAG
•Check for A, AA, AAA level
•For each guideline, check implementation information Some cases may be ambiguous
•Here we go to the fully defined Guideline 1.2
Key Resources•Penn State
http://accessibility.psu.edu/ (PSU Hub)
•WebAIM
http://www.webaim.org (WebAIM)
•Testing Tools http://fae.cita.uiuc.edu (FAE Evaluator)
http://firefox.cita.uiuc.edu (Firefox Plugin)
http://wave.webaim.org (Visual Evaluator)
http://juicystudio.com/services/luminositycontrastratio.php (Contrast Analyzer)
