Upload
ted-drake
View
629
Download
0
Tags:
Embed Size (px)
Citation preview
#A11y@Ted_Drake, Intuit Accessibility Girls Who Code 2015 - Intuit
This presentation was created for the Girls Who Code summer camp 2015, hosted by Intuit. https://girlswhocode.com/programs/Photo: sitting volleyball practice on Flickr: https://www.flickr.com/photos/thedcms/7850755374/
What is AccessibilityWheelz Fotheringham
Aaron “Wheelz” Fotheringham https://www.youtube.com/watch?v=iI_N5T3pmxQ Accessibility is about removing barriers and providing assistance when needed. This video shows Wheelz pulling off the first double backflip.
BlindnessThere are many levels of visual disabilities, from color blindness, low-vision, tunnel vision, occlusions, to complete blindness.http://www.webmd.com/eye-health/keratomalacia - vitamin A deficiency related blindnessphoto: Twelve year old girl blind from vitamin A deficiency by Community Eye Health: https://www.flickr.com/photos/communityeyehealth/5492473278/
DeafnessGallaudet University has been the foundation for deaf society in the United States. https://www.gallaudet.edu/These children are learning to communicate with American Sign Language.Photo: learning sign language by David Fulner https://www.flickr.com/photos/daveynin/4469841629/
CognitiveWhile Down Syndrome is the most recognized variation of cognitive disabilities, there is a large spectrum of learning and developmental disorders. http://www.ndss.org/Down-Syndrome/What-Is-Down-Syndrome/ Photo: Happiness is a ray of sunshine by Andrea https://www.flickr.com/photos/sheepies/3371004234/
PhysicalIndividuals with physical disabilities may not be able to use a mouse or even a keyboard. They may use customized switches that give access to their phones, computers, chairs, and games.http://webaim.org/articles/motor/assistive photo: RHS Wisley - Oct 2011 - Caring Candid - Sharing a Joke by Gareth Williams https://www.flickr.com/photos/gareth1953/6235050671/
Invisible DisabilitiesDoes she have a disability?
• Short term memory loss• Autism• Dyslexia• Chronic Fatigue• Epilepsy• Non Communicative• ADHD• Depression/psychological
Invisible DisabilitiesDoes she have a disability?
I sprained my ankle
Not all disabilities are permanent. There’s a popular term: temporarily abled Everyone is disabled at some point:• Lack of sleep• Driving a car and can’t use your hands• Temporary injuries• Lost your glasses• Exiting the dark movie theater into the sunlight
Universal design: http://www.universaldesign.com/ Can you spot the equipment built for somebody with a disability? The Magical Bridge Playground represents universal design. Which means designing for everyone, regardless of their physical or cognitive ability. http://www.magicalbridge.org/
Blind Photography?Tommy Edison, the Blind Film Critic
Tommy Edison shows how Instagram allows him to take photos and share with friends.http://blindfilmcritic.com/
P.O.U.R.
Perceivable
Operable
Understandable
Robust
http://webaim.org/articles/pour/Perceivable: I can find the information, it’s readable, it’s not locked into an image or blockedOperable: I can interact with the element, regardless of my device/input typeUnderstandable: Don’t use strange styles, justified layout, grandiloquence, etc. Use easy to understand language.Robust: The app works across all devices, browsers, connections, AT
<button>
Code This
</button>
Mozilla coding guide for buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
<button disabled>
Not Yet
</button>
Mozilla coding guide for buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
I’m an image of a Rocket Scientist
photo: DF-ST-83-03895 by Expert Infantry on flickr https://www.flickr.com/photos/expertinfantry/5467528352/
<img
src=“/shelton.jpg”
alt=“Rocket Scientist”>
Mozilla coding guide for images: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
•Valentina Tereshkova •Sally Ride •Judith Resnik •Mae Jemison
I’m a list of Astronauts
•Chiaki Mukai •Kalpana Chawla •Julie Payette •Anousheh Ansari
<ul> <li> Valentina Tereshkova </li> <li> Sally Ride </li> <li> Judith Resnik </li> <li> Mae Jemison </li> </ul>
Mozilla coding guide for lists: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
The W3C sets the standards for how we build web sites. Your job is to use those standards to create a web app that a browser can predictably reproduce.The browser’s job is to use the standards to display the content and pass information to the assistive technologyAssistive Technology’s job is to interface predictably with the user.
Introducing VoiceOver
Let’s try using a screen reader. It only takes a minute or so to set up and you’ll be an expert in 15 minutes.
Fix Safari
Safari:
1. Preferences >
2. Advanced >
3. Press Tab to highlight each item on a webpage
The default tab behavior on a mac can be confusing and lead to frustration while trying to test your product. You will need to modify the preferences to enable full tab support. This will bring your mac to the same functionality as a PC. This article also explains how to toggle this if needed: https://developer.yahoo.com/blogs/ydn-blog/enabling-full-keyboard-access-mac-090053716.html
VoiceOverTurn on/off: [ command ] + [ f5 ]
QuickNav on/off: [ ] + [ ]
QuickNav rotor: [ ] + [ ]
QuickNav via headers: [ ]
Sequentially: [ tab ] or [ ]
More information on QuickNav and keyboard shortcuts: http://developer.yahoo.com/blogs/ydn/quick-navigation-mode-voiceover-screen-reader-mac-101957388.html