1 / 122

INDATA Web Accessibility Training for Developers

This training covers accessibility basics, guidelines, laws, disability types, assistive technologies, business case, and practical techniques for creating inclusive web experiences.

joshn
Download Presentation

INDATA Web Accessibility Training for Developers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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" />

More Related