class: center, middle # Accessibility in one sprint .small[[@PMK Potluck Lightening Talk](https://publicmediakitchen.github.io/toolkit/public-media-potluck-june-2018.html) | Fri, June 15, 2018] Daigo Fujiwara, .small[Web Developer, WBUR, http://wbur.org @DaigoFuji] --- class: center, middle, white ## *Caveat You should spend more than one sprint on web accessibility. --- class: center, middle, white, big-img ![Trello card](img/trello.png) --- class: center, middle ## **Americans with Disabilities Act** ("ADA") and **Section 508 of the Rehabilitation Act** --- class: center, middle, white, big-img ![Velma](img/velma.gif) --- class: center, middle # Make the website **NOT inaccesible** --- class: center, middle, inverse # Assistive Technology Screen Reader (blind), Zoom (low vision), Closed Captioning (deaf) etc. --- class: middle ## Screen Reader landscape - Apple Safari + [Voice Over](https://www.apple.com/accessibility/mac/vision/) - Windows IE + [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS) - Windows IE + [NVDA](https://www.nvaccess.org/) - [Orca](https://wiki.gnome.org/Projects/Orca) --- class: center, middle, white, big-img ## Apple Voice Over ![vo](img/voiceover.jpg) --- class: center, middle, white, big-img Turning it on ![vo](img/accessibility-panel.png) Settings > General > Accessibility --- class: center, middle, white, big-img ![bur](img/screenreader-wbur.png) --- class: middle ## VoiceOver Useful keys: VO key is "Control-Option" by default - VO-left/right/up/down: Navigate - VO-A: Read - VO-B: Read from beginning - Control: Pause reading - VO-D: Dock - VO-Z: repeat what was just read --- class: middle, inverse # Roter? - VO-U --- class: center, middle, white, big-img
Your browser does not support the video tag.
--- class: center, middle # WCAG 2.0 [Web Content Accessibility Guidelines](https://www.w3.org/WAI/WCAG20/quickref/) --- class: center, middle, big-img ## Alt tag ![Alt tag is important](img/) --- class: middle ### Accessible Rich Internet Applications (ARIA) - aria-required - aria-invalid - aria-describedby (Use id on a page) - aria-labeledby - aria-label --- class: middle ## Resources -W3C [Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/Overview.html) - Microsoft's [Inclusive Design](https://www.microsoft.com/en-us/design/inclusive) - Google [Accessibility](https://www.google.com/accessibility/for-developers.html) - [Perkins School for the Blind](http://www.perkins.org/get-involved/events/achieving-web-accessibility-make-sure-your-online-presence-works-for-everyone) --- class: middle, white ##In conclusion * Don't be afraid * Responsive Design and Mobile First approach helps Accessibility * Turn VoiceOver and check your site out --- class: middle, center, white, big-img
https://github.com/daigofuji/a11y-in-one-sprint @DaigoFuji on