creating
accessible
tech
@KellyShuste
@KellyShuste
web
ios
android
@KellyShuste
web vs ios
android
@KellyShuste
tag
meaningful
images
@KellyShuste
content
vs
function
WOCinTechChat - https://www.flickr.com/photos/wocintechchat/21910887703/
@KellyShuste
web
<!DOCTYPE html>
<html>
<body>
<img src="two_women.jpg" alt="Two programmers chat at our New York office.">
</body>
</html>
@KellyShuste
web
<!DOCTYPE html>
<html>
<body>
<img src="two_women.jpg" alt="">
</body>
</html>
@KellyShuste
ios
@KellyShuste
ios
accessibilityLabel
vs
accessibilityIdentifier
@KellyShuste
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." />
@KellyShuste
android
<ImageView
android:id="@+id/img_two_women"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null" />
@KellyShuste
android
@KellyShuste
@KellyShuste
web
var toggleButton = document.getElementById
('toggleButton')
if(isCurrentlyPaused()){
toggleButton.setAttribute('src', 'pause.jpg');
toggleButton.setAttribute('alt', 'Play');
}
else {
toggleButton.setAttribute('src', 'play.jpg');
toggleButton.setAttribute('alt', 'Pause');
}
@KellyShuste
web
var toggleButton = document.getElementById
('toggleButton')
if(isCurrentlyPaused()){
toggleButton.setAttribute('src', 'pause.jpg');
toggleButton.setAttribute('alt', 'Play');
}
else {
toggleButton.setAttribute('src', 'play.jpg');
toggleButton.setAttribute('alt', 'Pause');
}
@KellyShuste
ios
if([self isCurrentlyPaused]){
[playPauseToggleButton setImage:pauseImage forState:
UIControlStateNormal]
playPauseToggleButton.accessibilityLabel = @"Play";
}
else {
[playPauseToggleButton setImage:playImage forState:UIControlStateNormal]
playPauseToggleButton.accessibilityLabel = @"Pause";
}
@KellyShuste
ios
if([self isCurrentlyPaused]){
[playPauseToggleButton setImage:pauseImage forState:
UIControlStateNormal]
playPauseToggleButton.accessibilityLabel = @"Play";
}
else {
[playPauseToggleButton setImage:playImage forState:UIControlStateNormal]
playPauseToggleButton.accessibilityLabel = @"Pause";
}
@KellyShuste
android
if(isCurrentlyPaused()){
mPlayPauseToggleButton.setImageResource(R.drawable.pause);
mPlayPauseToggleButton.setContentDescription(getString(R.string.play));
}
else {
mPlayPauseToggleButton.setImageResource(R.drawable.play);
mPlayPauseToggleButton.setContentDescription(getString(R.string.pause));
}
@KellyShuste
android
if(isCurrentlyPaused()){
mPlayPauseToggleButton.setImageResource(R.drawable.pause);
mPlayPauseToggleButton.setContentDescription(getString(R.string.play));
}
else {
mPlayPauseToggleButton.setImageResource(R.drawable.play);
mPlayPauseToggleButton.setContentDescription(getString(R.string.pause));
}
consider
design
patterns
@KellyShuste
@KellyShustehttp://maagg.com/blog/with-inbox-google-dares-to-be-different
@KellyShuste
@KellyShuste
web @marcysutton
ios @mostgood
android @kellyshuster

Lightning Talk on Programming Accessible Software