Let's Build Software Everyone Can Use (Denver Startup Week 2016)

66
let’s build software everyone can use @KellyShuster

Transcript of Let's Build Software Everyone Can Use (Denver Startup Week 2016)

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/