INDATA Web Accessibility Training for Developers

1. INDATAWeb Accessibility Trainingfor Developers Presented by Dennis LembréeDecember 2014

2. Agenda 1/2 • About @DennisL • About You • Intro to Accessibility • Disability & AT • Business Case • Guidelines & Law • POUR • Web Dev Foundations • 4 Layers • Semantics & Order • Other • Techniques • Layout/Structure • Images/Alt Text • Headings • Forms • Links • Keyboard Access • Tables • Audio & Video • About Flash • About Validation • JavaScript • ARIA

3. Agenda 2/2 • Writing • Testing • Checklists • Tools • Manual Techniques • Screen Readers • High contrast mode • More Tips • Resources • Contact Details • Questions

4. About @DennisL • Author of Easy Chirp. • Author of Web Axe. • Day job at PayPal eBay accessibility team. • Presented at CSUN, AHG, HTML5 DevConf, CSS DevConf, AccessU. • Presented webinars for EASI and Hadley School for the Blind.

5. About You • Number attending? • How many a developer? A designer? Other? • Years of experience?

6. About Accessibility • Disability & AT • Business Case • Guidelines & Law • POUR

7. About Accessibility – Disability & AT • Visual • Blindness, low vision, colorblindness • Audio • Deafness, HOH • Motor • Limited ability to use a mouse or keyboard, slow response time, limited fine motor control • Cognitive • Learning disabilities, distractibility, reading level, impaired memory • Neurological • Prone to seizures due to flashing

8. About Accessibility – Disability & AT • Other considerations and situational disabilities: • Main language is non-native for user. • Broken equipment (mouse, speakers). • Temporary disability (hand in cast). • Environment (sunlight, library). • Low-band connection (unusable with video, bloated JavaScript, multiple images). • Large fingers (need large hit area).

9. About Accessibility – Disability & AT • 2 videos: • Computers and People with Sensory Impairments • Computers and People with Mobility Impairments Homework!

10. About Accessibility – Disability & AT • Assistive Technology (AT) - Visual • Eye glasses • High-contrast mode • Screen magnifier • Screen reader • Braille output

11. About Accessibility – Disability & AT • Assistive Technology - Audio • Hearing aid • Transcriptions, captions • CART (live transcription)

12. About Accessibility – Disability & AT • Assistive Technology - Motor • Alternative keyboard • Onscreen keyboard • Alternative mouse • Switch • Mouth stick • Head stick

13. About Accessibility – Disability & AT • Assistive Technology - Cognitive • Speech recognitionEx: Dragon NaturallySpeaking • Alternative and Augmentative Communication (AAC)Ex: Proloquo2Go • Word prediction • Talking calculators

14. Check on Learning • What are the 5 types of disability? • What are some examples of assistive technology?

15. About Accessibility – Disability & AT • Video demos • JAWS Screen Reader - Hear an Example • How screen readers speak a simple HTML5 page Homework!

16. About Accessibility – Disability & AT • Simulation exercises: • Take off glasses or wear wrong prescription. • Put rubber band on your off-hand and use with mouse. • Wear mittens/gloves. • Set very fast mouse pointer. • Set very high browser zoom. • For multimedia, turn off audio.

17. About Accessibility – Disability & AT • Simulation exercises: • Keyboard only; put away your mouse!

18. About Accessibility – Business Case • Increases potential customer base. • Creates usability benefits for people with and without disabilities, including the increasing aging population. • Reduces development and operational costs (server load, bandwidth, and maintenance). • Improves cross-device browsing, including mobile phones, interactive television, and other delivery channels. (Robust)

19. About Accessibility – Business Case • Avoids possible legal ramifications of not implementing web accessibility. • Creates ocial acceptance; corporate social responsibility. • Eliminates need to provide alternative webpage and media formats (braille, large print, CD, etc). • Case studies, statistic, and figures covering return on investment from web accessibility.

20. About Accessibility – Guidelines & Law • WCAG 1 (1999) • WCAG 2 (2008) • Technology-agnostic. • Warning: already becoming outdated. • WebAIM’s WCAG 2.0 Suggestions • WebAIM's WCAG 2.0 Checklist

21. About Accessibility – Guidelines & Law • U.S. • Americans with Disabilities Act (ADA) 1990 • Rehabilitation Act Amendments of 1998, Section 508 (part of Rehabilitation Act of 1973) • Enforceable in June 2001 • Horribly outdated • Refresh said to be similar to WCAG 2.0 AA • Telecommunications Act of 1996 • +Court cases and agreements (Target, Peadpod)

22. About Accessibility – Guidelines & Law • UK • The Disability Discrimination Act 1995 (DDA) • Special Educational Needs and Disability Act 2001 • PAS 78 – guide by British Standards Institution (BSI) & Disability Rights Commission (DRC) • Australia • Disability Discrimination Act 1992 • Canada • Canadian Human Rights Act of 1977 • World policies

23. Check on Learning • What are some business reasons for providing web accessibility? • Is Section 508 up to date?

24. About Accessibility – POUR • Perceivable • Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.) P

25. About Accessibility – POUR • Perceivable • Provide text alternatives for images, etc. • Provide captions and transcripts for video and audio. • Present content in different ways. • Design with proficient color contrast. • Avoid movement and distractions on page. P

26. About Accessibility – POUR • Operable • Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device. • [Also important for mobile devices!] O

27. About Accessibility – POUR • Operable • All functionality is available from the keyboard. • Users have control over timing and limits. • Do not cause seizures (don’t flash content ~> 3x per sec). • Provide multiple ways to help users navigate, find content, and determine where they are. O

28. About Accessibility – POUR • Understandable • Content is clear and limits confusion and ambiguity. U

29. About Accessibility – POUR • Understandable • Economical and plain use of language. • Text supplemented with illustrations, videos, and other formats where appropriate (i.e., use good Universal Design) • Navigation, information structure are obvious and consistent. • Make pages operate in predictable ways. • Help users avoid and correct mistakes. U

30. About Accessibility – POUR • Robust • A wide range of technologies (including old and new user agents and assistive technologies) can access the content. R

31. About Accessibility – POUR • Robust • Functional across various technologies. • Providing a name, role, and value for non-standard user interface components. • Adhering to W3C standards ensures future compatibility • Use semantic markup. • Use progressive enhancement (PE)! • Validate your code - validator.w3c.org R

32. Check on Learning • What does POUR stand for?

33. Foundations • 4 Layers • Semantics & Order • Other

34. Foundations – 4 Layers • HTML – be POSH! • Plain Ol’ Semantic Html • CSS – style • JavaScript – to enhance behavior • ARIA – accessibility helper • CSS for JavaScript? • 5 Layers of Web Accessibilityby Dirk @Ginader

35. Foundations – 4 Layers

36. Foundations – Semantics & Order • Semantics • Use HTML element that describes the content (not presentation) • Good for: • Accessibility • Graceful degradation • Future-proofing • Easier to maintain (standard, consistency) • SEO

37. Foundations – Semantics & Order • Content Order = Source Order = Tab Order

38. Foundations – Other • Strong, em (meaning) vs. b, i (presentation) • Never use an element for its design: • blockquote to indent • headings to bold • Label attribute of select optgroup treated differently in screen readers. • Forms: • If one selection required, use radio, not checkbox. • Avoid multiple-select elements; use checkboxes instead.

39. Check on Learning • What are the 4 layers of accessibility? • Content Order = Source Order = ?

40. Techniques • Layout/Structure • Images/Alt Text • Headings • Forms • Links • Keyboard Access • Tables • Audio & Video • About Flash • About Validation • JavaScript • ARIA

41. Techniques – Layout/Structure • Visually consistent • The main areas of the page—such as the banner, navigation, and sidebar—should be in the same place throughout the site. • Consistent markup • The areas should also be marked up consistently, such as using the same heading structure. • Good usability and benefits those with cognitive impairments and those who use AT.

42. Techniques – Images/Alt Text • Provide alternative text for images that have with meaningful content. • Fundamental but complex! • Needed badly on infographics, graphical charts, and comics. Alt text? [Poll]

43. Techniques – Images/Alt Text • If decorative, use alt=“” (but better to use CSS) • If same content exists in page text, use alt=“” • If image linked, alt text should describe purpose of link • Be accurate and succinct. • Don’t use phrases like “image of…” • Avoid text in images • Consider using CSS3 instead of an image

44. Techniques – Images/Alt Text

45. Techniques – Images/Alt Text • HTML5 • alt optional with figure/figcaption • aria-describedby vs longdesc • My 2-part article Longdesc & Other Long Image Description Solutions

46. Techniques – Images/Alt Text <figure> <img src="shadows.jpg" /> <figcaption>Shadow like figures and a graffiti tag drawn on the walls of a partially demolished building, illuminated by the light from a street lamp (photo). </figcaption> </figure> <img src="shadows.jpg" alt="shadow figures" longdesc="description.html" />

47. Techniques – Headings • Use one H1 per page. • Brief, succinct text. • Nicely nested. • Use a heading with <section> element. • Wrong: <span style="font-size:2em"><b>My Page Title</b></span> • Right: <h1>My Page Title</h1>

48. Techniques – Headings

49. Techniques – Forms • Labels • Fieldset/legend • Messages (errors, required information)

50. Techniques – Forms • Labels • All form elements must have a label. • Other methods such as title and placeholder are NOT robust. <label for="firstname">First Name</label> <input name="firstname" id="firstname" type="text" />