Introduction to Accessibility for Girls Who Code Summer Camp 2015 at Intuit

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

Disabilities

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/

So what makes it accessible?

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

I’m a button that says “Code This”

<button>Code This</button>

<button>

Code This

</button>

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

I’m a disabled button that says “Not Yet”

<button disabled>Not Yet</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 HandshakeHow Standards Work

http://cheezburger.com/580840704

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.

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

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

@Ted_DrakeFollow Me on Twitter