1. Understanding WCAG Elizabeth J. Pyatt, Ph.D. (ejp10@psu.edu) Information Technology Services

2. 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

3. 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

4. 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

5. ALT Text Options HTML  ANGEL – Alternative Text field in upload Word/Powerpoint – Option in Format Picture menu Blogs – description in upload is ALT tag

6. 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/luminosityco ntrastratio.php http://juicystudio.com/services/luminosityco ntrastratio.php  Wiggle room for large/bold text

7. 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

8. 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

9. 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

10. 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

11. 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)

12. 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

13. Guideline 3: Understandable Guideline 3.1 Understandable  Mark English docs as 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

14. 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)

15. 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…

16. 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 Guideline 1.2

17. Key Resources Penn State  http://accessibility.psu.edu/ (PSU Hub) http://accessibility.psu.edu/ WebAIM  http://www.webaim.org (WebAIM) http://www.webaim.org Testing Tools  http://fae.cita.uiuc.edu (FAE Evaluator) http://fae.cita.uiuc.edu  http://firefox.cita.uiuc.edu (Firefox Plugin) http://firefox.cita.uiuc.edu  http://wave.webaim.org (Visual Evaluator) http://wave.webaim.org  http://juicystudio.com/services/luminositycont rastratio.php (Contrast Analyzer) http://juicystudio.com/services/luminositycont rastratio.php