let’s build software everyone can use @KellyShuster
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
let’s build softwareeveryonecan use
@KellyShuster
@KellyShuster
are you designing for your users?
who are your
users?
1
BILLION
20%
-Victor Tsaran
Technology helped me overcome society’s
understanding, society’s
assumptions about my abilities.
Let's change the narrative"heroic disabled person overcomes obstacles"
to "society is inclusive,
all can succeed"-Haben Girma
150 million
Screenreaders
webiosandroid
web vs iosandroid
tag meaningful images
decorationvsfunction
WOCinTechChat - https://www.flickr.com/photos/wocintechchat/21910887703/
web
<!DOCTYPE html><html><body>
<img src="two_women.jpg" alt="Two programmers chat at our New York office.">
</body></html>
web
<!DOCTYPE html><html><body>
<img src="two_women.jpg" alt="">
</body></html>
ios
ios
accessibilityLabelvsaccessibilityIdentifier
android
<ImageView android:id="@+id/img_two_women" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="Two programmers chat at our New York office." />
android
<ImageView android:id="@+id/img_two_women" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@null" />
android
web
var toggleButton = document.getElementById('toggleButton')
if(isCurrentlyPaused()){ toggleButton.setAttribute('src', 'play.jpg');
toggleButton.setAttribute('alt', 'Play');}else { toggleButton.setAttribute('src', 'pause.jpg'); toggleButton.setAttribute('alt', 'Pause');}
web
var toggleButton = document.getElementById('toggleButton')
if(isCurrentlyPaused()){ toggleButton.setAttribute('src', 'play.jpg');
toggleButton.setAttribute('alt', 'Play');}else { toggleButton.setAttribute('src', 'pause.jpg'); toggleButton.setAttribute('alt', 'Pause');}
ios
if([self isCurrentlyPaused]){ [playPauseToggleButton setImage:pauseImage forState:UIControlStateNormal] playPauseToggleButton.accessibilityLabel = @"Pause";}else { [playPauseToggleButton setImage:playImage forState:UIControlStateNormal] playPauseToggleButton.accessibilityLabel = @"Play";}
ios
if([self isCurrentlyPaused]){ [playPauseToggleButton setImage:pauseImage forState:UIControlStateNormal] playPauseToggleButton.accessibilityLabel = @"Pause";}else { [playPauseToggleButton setImage:playImage forState:UIControlStateNormal] playPauseToggleButton.accessibilityLabel = @"Play";}
android
if(isCurrentlyPaused()){ mPlayPauseToggleButton.setImageResource(R.drawable.play); mPlayPauseToggleButton.setContentDescription(getString(R.string.play));}else { mPlayPauseToggleButton.setImageResource(R.drawable.pause); mPlayPauseToggleButton.setContentDescription(getString(R.string.pause));}
android
if(isCurrentlyPaused()){ mPlayPauseToggleButton.setImageResource(R.drawable.play); mPlayPauseToggleButton.setContentDescription(getString(R.string.play));}else { mPlayPauseToggleButton.setImageResource(R.drawable.pause); mPlayPauseToggleButton.setContentDescription(getString(R.string.pause));}
considerdesignpatterns
fab.setAccessibilityTraversalBefore( R.id.list_pokemon);
tools
randoma11y.com
www.AccessLint.com
AccessibilityScanner
wcag 2.0apple developer docsandroid design docs
web @marcysuttonios @mostgoodandroid @kellyshuster
The accessibility features I speak of would help huge numbers of people so why are these things
not taken into account by developers right at the
beginning?-Molly Watt
Lack of awareness
& education
@KellyShuster
thankyou!
CreditsDenver Art Museum http://davispartnership.com/projects/denver-art-museum-frederic-c-hamilton-building/
Haben Girma w/ President Obama http://appleinsider.com/articles/16/06/14/apple-invites-deaf-blind-advocate-haben-girma-to-address-developers-on-accessibility-at-wwdc16
Victor Tsaran Photohttps://www.linkedin.com/in/victortsaran
Victor Tsaran Tedx Talkhttp://tedxtalks.ted.com/video/TEDxSiliconValley-Victor-Tsaran
Grandpahttps://www.pexels.com/photo/old-man-6110/
US Maphttp://www.clipartkid.com/free-printable-maps-blank-map-of-the-united-states-Ud6ZHb-clipart/
Jillian Mercadohttp://www.allmyfriendsaremodels.com/jillian-mercado-making-waves/
Silent World of Facebookhttp://digiday.com/platforms/silent-world-facebook-video/
Amelia & Coachhttp://herohighlight.com/amelia-dickerson/
Credits, con’td.FAB designhttps://material.google.com/components/buttons-floating-action-button.html
Blurred texthttp://martinivanov.net/2010/12/23/creating-a-gaussian-blur-effect-with-css3/
Nougathttps://twitter.com/Android/status/748547400210472961/photo/1?ref_src=twsrc%5Etfw
Facebook Logohttps://www.facebookbrand.com/
Screen Zoomhttp://www.androidcentral.com/android-n-developer-preview-brings-accessibility-improvements
Accessibility Inspector iOShttps://developer.apple.com/library/ios/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityiniOSSimulatorwithAccessibilityInspector/TestAccessibilityiniOSSimulatorwithAccessibilityInspector.html
Selenium Logohttp://www.seleniumhq.org/
Appium Logohttps://testobject.com/blog/2015/10/automated-testing-in-the-testobject-cloud-getting-started-with-appium.html
Capybara Logo http://www.fsainz.com/2012/12/21/2012-improvements/
Credits, con’td.Device evolutionhttp://www.nicolasnova.net/pasta-and-vinegar/2015/6/28/some-smartphone-evolution-diagrams
Robolectrichttp://robolectric.org/
Denver Skylinehttp://www.santomarco.com/photo/denver-panoramic/denver-daytime-skyline/
Related Documents
