Accessible Wayfinding:

It’s Not Uncharted Territory

Aaron Knight

Colors

Assistive

Technology

Keyboard

Navigation

Description

Introduction

Layers

Introduction

Once upon a time in Memphis…

​

ACCESSIBLE MAPS?

Types of Disability:

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

Models of Disability:

• Medical: how medical condition affects ability
• Functional: how disability limits function
• Social: how barriers prevent people with disabilities from participating

Models of Disability:

• Medical: how medical condition affects ability
• Functional: how disability limits function
• Social: how barriers prevent people with disabilities from participating

Who benefits from accessibility?

Everyone.

• We reviewed 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.

Description

• Find a partner.
• One of you will describe a map.
• The other cannot see it.

Description Challenge

Where is the library cafe?

• Next to the elevators
• Next to the staff workroom
• North of the stacks
• In the eastern corner

In an emergency, how would you exit the Library Classroom?

• Use the door to the left
• Use the door to the right
• Head toward the cafe
• Head toward the elevators

Where is the library cafe?

• Next to the elevators
• Next to the staff workroom
• North of the stacks
• In the eastern corner

In an emergency, how would you exit the Library Classroom?

• Use the door to the left
• Use the door to the right
• Head toward the cafe
• Head toward the elevators

Describing maps is hard.

Describing maps is critical.

Map Use Cases:

• Directions: How do I get from my dorm to downtown?
• Nearby: What bookstores are near the library ?
• Distances: How far is each bus stop from my classes?

To give directions, use an ordered list:

1. From the bus stop, head northwest along the parking lot toward Broadway. There will be a construction detour at this intersection.
2. At the intersection of Broadway and 1st Street, turn right...

To describe what’s nearby, use an unordered list:

• Campus North: student housing, stadium, tennis courts…
• Campus East: library, student union…

To convey distances use a table:

https://cdn-map1.nucloud.com/uploads/map/24/static/stops/489.html

Describing maps is hard, but it is also critical.

• To give directions, use an ordered list.
• To describe what’s nearby, use an unordered list.
• Consider conveying distances in a table format.

Colors

Contrast checkers are your friend.

• WebAIM: https://webaim.org/resources/contrastchecker/
• Color Contrast Analyzer for Chrome
• WCAG Contrast Checker for Firefox
• View→Proof Setup→Color Blindness in Photoshop

Nothing rhymes with orange.

Almost nothing contrasts with it.

Use challenging colors sparingly:

• Decorative elements (like borders and logos)
• Large text (>= 14pt bold or >= 18pt)

https://maps.syracuse.edu

Where are the fraternities and sororities on the following map?

Colors Challenge:

Where are the fraternities and sororities on the following map?

• Toward the top
• Upper left corner
• Lower right corner
• Not shown

Where are the fraternities and sororities on the following map?

• Toward the top
• Upper left corner
• Lower right corner
• Not shown

Always pair color-coding with...

• Textures
• Shapes
• Text

http://accessibilitymap.

missouri.edu/

• Color contrast checkers are your friend.
• Oranges and greens are hard. Use sparingly.
• Pair color-coding, with shapes, text and/or patterns.

Layers

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

• Think big picture.
• What might your visitors need?

A11y: http://accessibilitymap.missouri.edu

Student Parking: http://maps.syracuse.edu

What might your visitors need to be able to find quickly?

Pizza: http://maps.bu.edu/

A11y: http://accessibilitymap.missouri.edu

• Think big picture.
• Give options, but use reasonable default views.

Keyboard

Navigation

Keyboard Challenge

Using a keyboard only...

1. Go to Google maps.
2. Enter your office address.
3. Zoom 4 times.
4. Switch to satellite view.
5. Pan one full screen to the left.

https://maps.duke.edu

http://bit.ly/eduiwayfinding

Keyboard Checklist:

• Can you use the tab key?
• Does the tab order make sense?
• Can you zoom and pan?
• Can you see what has the focus?

Assistive

Technology

Talking GPS Technology

BlindSquare App

Uses Foursquare & Open Street Map

Touch Mapper touch-mapper.org

Uses Open Street Map

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!

http://www.openstreetmap.org

• It’s worth consulting your visitors on what they use
• Pay attention to OpenStreetMaps.

Thank

You!

Aaron Knight

acknight@esf.edu

@farktal

​

Nikki Massaro

Adobe

​

Sonya Woods

Penn State