How do you make content that is inherently visual accessible? There are a multitude of ways you can help your wayfinding and other visual content be more accessible for all of your visitors. After all – they need to be able to find you too.

1. Accessible Wayfinding:
It’s Not Uncharted Territory
Aaron Knight & Nikki Massaro Kauffman
#dpa5

2. Nikki Massaro Kauffman
nikkimk@psu.edu
@nikkimk
Aaron Knight
acknight@esf.edu
@farktal Sonya Woods
szw151@psu.edu
@sonya4access
#dpa5

3. ColorsAssistive
Technology
Keyboard
Navigation
Description
Introduction Layers

4. Introduction

5. Once upon a
Fienen in
Memphis…
Introduction

6. ● Vision: blind, low-vision, color blind
● Hearing: Deaf, hard of hearing
● Mobility: Parkinson’s, broken arm*
● Cognitive: ADHD, ASD, dyslexia
● Social: depression, anxiety
Introduction

7. ● We had several campus maps tested for accessibility.
● No one map was perfect. Most had some good
features as well as some problems.
● Disclaimer: Some campus maps are abysmal. We will
not shame the worst of them.
Introduction

8. Description

9. ● Find a partner.
● One of you will describe a map.
● The other cannot see it.
Description
Description Challenge

11. Where is the library cafe?
a. Next to the elevators
b. Next to the staff workroom
c. North of the stacks
d. In the western corner
Description

12. In an emergency, how would you exit the Library
Classroom?
a. Use the door to the left
b. Use the door to the right
c. Head to the west toward the cafe
d. Head to north to the elevators
Description

13. Where is the library cafe?
a. Next to the elevators
b. Next to the staff workroom
c. North of the stacks
d. In the western corner
Description

15. In an emergency, how would you exit the Library
Classroom?
a. Use the door to the left
b. Use the door to the right
c. Head to the west toward the cafe
d. Head to north to the elevators
Description

17. Consider use cases:
● What ___ are near ___?
● How do I get from ___ to ___?
● How far is ___ from ___?
Description

18. ● How do I get from my dorm to downtown?
● What bookstores are near the library ?
● How far is each bus stop from my classes?
Description

19. Use an ordered list to give directions:
1. From the bus stop, head northwest along the parking
lot toward Broadway.
2. At the intersection of Broadway and 1st Street, turn
right...
Description

20. Use an unordered list to describe what’s nearby:
● Campus North: student housing, stadium, tennis
courts…
● Campus East: library, student union…
Description

21. Consider a table to convey distances:
Description
Book Store Downtown Library Student
Housing
Book Store N/A 0.5 mi. 2 mi. 0.25 mi.
Downtown 0.5 mi. N/A 2.25 mi. 0.5 mi.
Library 2 mi. 2.25 mi. N/A 1.5 mi.
Student Housing 0.25 mi. 0.5 mi. 1.5 mi. N/A

22. Description http://www.dyc.edu/admissions/visit/
campus-map-and-tour.aspx

23. Colors

24. ● Check foreground & background with
https://webaim.org/resources/contrastchecker/
● Oranges and greens are hard. Use sparingly.
● Avoid text on images or text with semi-transparent
backgrounds.
Colors

25. Colors

26. Colors

27. Where are the fraternities and sororities
on the following map?
a. Toward the top
b. Upper left corner
c. Lower right corner
d. Not shown
Colors

28. Colors

29. Where are the fraternities and sororities on
the map?
a. Toward the top
b. Upper left corner
c. Lower right corner
d. Not shown
Colors

30. Colors

31. If you are using color-coding, always pair it with...
● Textures
● Shapes
● Text
Colors

32. Colors
http://accessibilitymap.
missouri.edu/

33. Layers

34. Layers Traffic:
https://www.google.com/maps

35. ● Think big picture.
● What might your visitors need?
Layers

36. Layers A11y: http://accessibilitymap.missouri.edu/

37. Layers Student Parking:
http://www.uta.edu/maps

38. ● What might your visitors to campus need to
be able to find quickly?
Layers

39. Layers Pizza: http://www.bu.edu/maps/

40. Layers A11y: http://accessibilitymap.missouri.edu/

41. Keyboard
Navigation

42. Keyboard
Challenge

43. Using a keyboard only...
1. Go to Google maps.
2. Enter your campus address.
3. Zoom 4 times.
4. Switch to satellite view.
5. Pan one full screen to the left.
Keyboard Navigation

44. Keyboard Checklist:
✓ Can you use the tab key?
✓ Does the tab order make sense?
✓ Can you see what has the focus?
✓ Can you zoom and pan?
Keyboard Navigation

45. Keyboard Navigation

46. ● Use “role=button” & “tabindex=0” for clickable items.
● Add arrow & 10-key keyup events to pan maps.
● Add events for click & enter/tab/spacebar keyup.
● Add events for mouseover/mouseout & focus/blur.
● Add CSS for :hover & :focus.
Keyboard Navigation

47. http://bit.ly/heweb17dpa5
Keyboard Navigation

48. <g id="Pan_South" aria-label="Pan
South" tabindex="0" role="button"/>
Keyboard Navigation

49. <g id="Pan_South" aria-label="Pan
South" tabindex="0" role="button"/>
Keyboard Navigation

50. <g id="Pan_South" aria-label="Pan
South" tabindex="0" role="button"/>
Keyboard Navigation

51. $('#Pan_North').click(function(){
pan(false,true);
}).keyup(function (e){
if (e.keyCode === 0 || e.keyCode === 13 ||
e.keyCode === 32) { pan(false,true); }
});
Keyboard Navigation

52. $('#Pan_North').click(function(){
pan(false,true);
}).keyup(function (e){
if (e.keyCode === 0 || e.keyCode === 13 ||
e.keyCode === 32) { pan(false,true); }
});
Keyboard Navigation

53. $('.row').keyup(function (e){
if (e.keyCode === 37 || e.keyCode === 52 ||
e.keyCode === 100) {
pan(true,true);
} else if ...
});
Keyboard Navigation

54. $('.row').keyup(function (e){
if (e.keyCode === 37 || e.keyCode === 52 ||
e.keyCode === 100) {
pan(true,true);
} else if ...
});
Keyboard Navigation

55. svg:focus,
svg:hover {
outline: 1px solid blue;
}
Keyboard Navigation

56. svg:focus,
svg:hover {
outline: 1px solid blue;
}
Keyboard Navigation

57. Assistive
Technology

58. Assistive Technology Talking GPS Technology

59. Assistive Technology BlindSquare App
Uses Foursquare & Open Street Map

60. Assistive Technology Touch Mapper
Uses Open
Street Map

61. Open Street Maps…
● Used for Facebook, Apple Maps, Foursquare,
Craigslist
● No real moderation.
● Free tiles = heavily used in smaller mapping projects
and products... including assistive technology!
Assistive Technology

62. Assistive Technology http://www.openstreetmap.org

63. Thank You!
Aaron Knight
acknight@esf.edu
@farktal
Nikki Massaro
Kauffman
nikkimk@psu.edu
@nikkimk
Sonya Woods
szw151@psu.edu
@sonya4access
#dpa5