View
250
Download
1
Category
Tags:
Preview:
Citation preview
Digital Accessibility
The forgo)en component every developer should know
3/14/2015 @joedevon -‐ Midwest PHP 1
Accessibility StaIsIcs
• How many people are disabled? 57M in US 1B Worldwide
• What’s the breakdown? Hearing impaired: 360M Vision impaired: 285M CogniIve: 194M Physical impairment: 13M Other (Depression, Alcohol, DemenIa): 148M
3/14/2015 @joedevon -‐ Midwest PHP 2
Accessibility StaIsIcs conInued
• Baby Boomers geYng older • Myth of Minority. 54% have some form of disability (PEW internet project)
• $200 Billion in disposable income • Gartner says it’s in the Trillions • 9 out of 10 websites are inaccessible
3/14/2015 @joedevon -‐ Midwest PHP 3
The Story of
From web developer to co-‐founder of a global movement
3/14/2015 @joedevon -‐ Midwest PHP 4
One day, I stumbled upon a video by Yahoo! programmer Victor Tsaran
3/14/2015 @joedevon -‐ Midwest PHP 5
Play Videos
• Victor Tsaran Video: h)ps://www.youtube.com/watch?v=izrC4R7SsH4
• ChrisIne Ha Video: h)ps://www.youtube.com/watch?v=_OO9w_oK6dQ
• Fullspeed screen reader: h)ps://soundcloud.com/freecodecamp
3/14/2015 @joedevon -‐ Midwest PHP 6
Road to accessibility
• Victor’s video percolated in the back of my mind
• Freelance Dev in NY • Big tech scene. Lots of
meetups
3/14/2015 @joedevon -‐ Midwest PHP 7
Moved to Los Angeles
Got a gig @ AmericanIdol.com. Unfortunately, no tech scene in L.A.!
3/14/2015 @joedevon -‐ Midwest PHP 8
Dad @ JPL Speaker of 10 languages. Survivor of Auschwitz & Dachau. He lost much of his hearing & eyesight.
3/14/2015 @joedevon -‐ Midwest PHP 9
3/14/2015 @joedevon -‐ Midwest PHP 11
Guess who winds up speaking at 1st GAAD event in Los Angeles?
Victor Tsaran
Success of GAAD, Year One
• GAAD made my hometown paper • Gov’ts & Corps ran events, blogged & tweeted • Appeared in podcasts, magazines Alas, next year wouldn’t be so easy
3/14/2015 @joedevon -‐ Midwest PHP 12
GAAD Year 2
• Mindy designed a new logo… which made the front cover of .Net Magazine
• FCC blogs & tweets #GAAD for 24 hours • #GAAD had a tweet a minute! • More engagement than we could have ever imagined
• I guess we hit on something
3/14/2015 @joedevon -‐ Midwest PHP 14
GAAD Year 3
• The Paciello Group created #ID24 • #GAAD approached two tweets a minute • Gaming companies spoke about a11y games • ArIcles in PHP Architect, Sitepoint, A List Apart & more
3/14/2015 @joedevon -‐ Midwest PHP 16
GAAD comes full circle
Remember the bank whose unusable interface inspired my post?
Twist of Fate 3/14/2015 @joedevon -‐ Midwest PHP 18
Which major tech company is known for being the most accessible?
A.
B.
C.
D.
3/14/2015 @joedevon -‐ Midwest PHP 21
Play more videos
• iPads ease of use: h)ps://www.youtube.com/watch?v=la6vK6hI7rM
3/14/2015 @joedevon -‐ Midwest PHP 23
Accessibility & “The Law”
• SecIon 508 requires that all Federal website content be accessible to people with disabiliIes.
• ADA or Americans with DisabiliIes Act signed into Law in 1990
• More regulaIons are coming… • Don’t do a11y for the Law…do it because it’s right…and it’s good for you & your users
3/14/2015 @joedevon -‐ Midwest PHP 24
Companies that have sued or se)led
• H&R Block: JusIce Department got involved, sending a strong message to businesses
• Se)lements with companies such as Bank of America, State of Texas, American Cancer Society, Northwestern University, Target, Neulix and more
• Others were more proacIve, e.g. eBay, Monster.com, Travelocity & Ticketmaster
3/14/2015 @joedevon -‐ Midwest PHP 25
DisabiliIes & Web Browsing Part I
VISUAL IMPAIRMENT: • Blind people don’t even have a screen to look at
• Blind people can’t use a mouse • Color contrast is important for low vision and people w/ color blindness
• Screen Magnifiers • Screen Readers read out web pages 3/14/2015 @joedevon -‐ Midwest PHP 26
Play wordpress Video
• Trying to get permission to publish. Will update this deck if I get a “yes”.
3/14/2015 @joedevon -‐ Midwest PHP 27
Accessibility in Wordpress
• 65% of the top 1M sites running Wordpress • 4 of 1,747 themes in Wordpress accessible • UnIl @accessiblejoe started the CiIes project • Inaccessible admin? Don’t disabled people have valuable content to share?
• WP-‐Accessibility plugin h)ps://wordpress.org/plugins/wp-‐accessibility/
3/14/2015 @joedevon -‐ Midwest PHP 28
Mobile Accessibility
• The iPhone changed the game • Apple’s focus on accessibility really opened the world to a lot of people
• Siri, a SemanIc Web company, took things to another level. Speak to your phone!
• Other smartphones have been following suit • Apps suffer from a11y issues too though
3/14/2015 @joedevon -‐ Midwest PHP 29
Play Tommy Videos
• Tommy Edison uses Facebook: h)ps://www.youtube.com/watch?v=MtE2NfFZK2g
• Tommy Edison uses Instagram: h)ps://www.youtube.com/watch?v=P1e7ZCKQfMA , h)ps://www.youtube.com/watch?v=0i1k3srHKAA
3/14/2015 @joedevon -‐ Midwest PHP 30
DisabiliIes & Web Browsing Part II
DEAF USERS: • Audio w/ no wri)en component locks deaf users out
• Videos can become useless • Unless you capIon your videos! • Don’t rely on Audio Captchas!
3/14/2015 @joedevon -‐ Midwest PHP 31
Another Tommy Video
• Tommy interviews Yahoo Accessibility: h)ps://www.youtube.com/watch?v=1C9Cbu2bPBA
3/14/2015 @joedevon -‐ Midwest PHP 32
DisabiliIes & Web Browsing Part III
COGNITIVE ISSUES, MOTOR IMPAIRMENT: • Organizing your content in a well laid out manner can be helpful to those with cogniIve impairment
• There are other disabiliIes like Quadriplegics who use other assisIve technology like Puff & Sip controllers.
• Motor DisabiliIes
3/14/2015 @joedevon -‐ Midwest PHP 33
Play Sip and Puff Videos
• Jared: h)ps://www.youtube.com/watch?v=Bhj5vs9P5cw
• Big Launcher and Tecla Shield: h)ps://www.youtube.com/watch?v=SJDICSMy7z0
3/14/2015 @joedevon -‐ Midwest PHP 34
A word about WAI-‐ARIA
• ARIA is a W3C spec for Accessible Rich Internet ApplicaIons
• Framework of a)ributes to help w/ user interacIon, define current state,
• Make custom widgets available to AT (AssisIve Technology)
• Makes problemaIc controls accessible • Meant to provide AT w/ addiIonal informaIon
3/14/2015 @joedevon -‐ Midwest PHP 35
Takeaways
• Standards are good • Learn about WCAG, a W3C IniIaIve • Making things semanIc under the hood lets computers “understand” the content
• Good for Screen Readers & Search Engines • Perform user tesIng for accessibility
3/14/2015 @joedevon -‐ Midwest PHP 36
Play a Cat Video
• Obligatory Cat Video: h)ps://www.youtube.com/watch?v=PU7hPOY8n_Y
3/14/2015 @joedevon -‐ Midwest PHP 37
Links
• h)p://globalaccessibilityawarenessday.org • h)p://www.secIon508.gov/ • h)p://www.ada.gov/ • h)p://www.w3.org/WAI/intro/wcag • h)p://webaim.org/standards/wcag/checklist • h)p://w3c.github.io/aria-‐in-‐html/ 3/14/2015 @joedevon -‐ Midwest PHP 39
Recommended