This presentation was created for the Girls Who Code Summer Camp at Intuit in June, 2015. It introduces the topic of accessibility, what does it mean to have a disability, and how coders can make their applications available to all users, regardless of their physical or cognitive ability.

1. #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/

2. What is Accessibility
Wheelz 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.

3. Disabilities

4. Blindness
There 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 blindness
photo: Twelve year old girl blind from vitamin A deficiency by Community Eye Health: https://www.flickr.com/photos/communityeyehealth/5492473278/

5. Deafness
Gallaudet 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/

6. Cognitive
While 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/

7. Physical
Individuals 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/

8. Invisible Disabilities
Does she have a disability?
• Short term memory loss
• Autism
• Dyslexia
• Chronic Fatigue
• Epilepsy
• Non Communicative
• ADHD
• Depression/psychological

9. Invisible Disabilities
Does 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

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

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

12. So what makes it
accessible?

13. 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 blocked
Operable: I can interact with the element, regardless of my device/input type
Understandable: Don’t use strange styles, justified layout, grandiloquence, etc. Use easy to understand language.
Robust: The app works across all devices, browsers, connections, AT

14. I’m a button that says
“Code This”
<button>Code This</button>

15. <button>
Code This
</button>
Mozilla coding guide for buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

16. I’m a disabled button
that says “Not Yet”
<button disabled>Not Yet</button>

17. <button disabled>
Not Yet
</button>
Mozilla coding guide for buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

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

19. <img
src=“/shelton.jpg”
alt=“Rocket Scientist”>
Mozilla coding guide for images: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

20. •Valentina Tereshkova
•Sally Ride
•Judith Resnik
•Mae Jemison
I’m a list of Astronauts
•Chiaki Mukai
•Kalpana Chawla
•Julie Payette
•Anousheh Ansari

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

22. The Handshake
How Standards Work
http://cheezburger.com/580840704

23. 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 technology
Assistive Technology’s job is to interface predictably with the user.

24. When using standards, you don’t need to worry about compensating for the other components.

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

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

27. VoiceOver
Turn 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

28. @Ted_Drake
Follow Me on Twitter