Last Updated: 4/8/2026

Accessibility Features

“Where Did They Go?” is designed to be accessible to students and educators with diverse needs. This article describes the accessibility features and design commitments built into the application.

Current Accessibility Features

Visual Design

High-Contrast Color Choices — Data layers use distinct, high-contrast colors to ensure visibility against the map background. For example, railroads appear in green, interstates in blue, rivers in light blue, and cities as red dots.

Color-Coded Symbols — Healthcare facilities use both color and letter symbols (H for Hospital, P for Pharmacy, etc.) to convey information through multiple visual channels, supporting users who have difficulty distinguishing colors.

Scalable Interface — The map uses SVG (Scalable Vector Graphics) rendering, which maintains visual clarity when zoomed or when users adjust browser zoom settings.

Readable Text Labels — City names and population numbers in County View use sans-serif fonts at sizes designed for readability. Text labels are positioned to minimize overlap with other map elements.

Interactive Elements

Large Click Targets — Counties are clickable across their entire area, providing large target zones for users with motor control challenges. The play button measures 50×50 pixels, exceeding minimum touch target size recommendations.

Hover Tooltips — Information boxes appear when hovering over schools and healthcare facilities, providing detailed context without requiring additional clicks. Tooltips are positioned near the cursor to minimize eye movement.

Filter Checkboxes — The filter panel uses standard HTML checkbox inputs with text labels, ensuring compatibility with assistive technologies and providing familiar interaction patterns.

Smooth Transitions — Map zoom transitions occur over 750 milliseconds with easing, giving users time to track the viewport change. Layer fade-in and fade-out animations use 200-500 millisecond durations to provide visual feedback without causing disorientation.

Timeline Controls

Keyboard-Accessible Slider — The timeline slider is implemented as an HTML range input, which supports keyboard navigation using arrow keys. Users can increment or decrement the year without using a mouse.

Play/Pause Button — The timeline playback button provides clear visual feedback, with distinct play (triangle) and pause (double bars) icons that transition smoothly when clicked.

Visible Year Label — The current year is displayed as large text below the timeline controls, ensuring users always know which time period they’re viewing.

Accessibility Commitments and Future Work

The development team has identified several accessibility goals that are planned or in progress:

Status: In Progress

Goal: Ensure that screen reader users can navigate the map interface, understand the current state (zoom level, selected year, active filters), and access the information displayed in hover tooltips.

Current limitations: The SVG map elements do not currently include ARIA labels or descriptions. Tooltip information is displayed visually but may not be announced to screen readers.

Logical Tab Order

Status: In Progress

Goal: Establish a logical keyboard navigation order through interactive elements: timeline slider → play button → filter checkboxes → map (for county selection).

Current limitations: Tab order has not been explicitly tested or optimized for keyboard-only users.

Colorblindness-Safe Visuals

Status: Partially Implemented

Goal: Ensure that all information conveyed through color is also available through other visual means (symbols, patterns, or text labels).

Current implementation: Healthcare facilities use both color and letter symbols. However, some data layers (railroads, interstates, rivers) rely primarily on color for identification.

Future work: Add pattern fills or line styles to distinguish infrastructure layers without relying solely on color.

Drag-and-Drop Element Sizes

Status: Not Applicable

Note: The current application does not include drag-and-drop interactions. If future versions add draggable elements (such as a movable legend or resizable panels), these will follow accessibility guidelines for minimum target sizes (44×44 pixels or larger).

Using the App with Assistive Technologies

For Keyboard Users

Use Tab to move between interactive elements (timeline slider, play button, filter checkboxes)
Use Arrow keys on the timeline slider to change the year
Use Space or Enter to activate the play button or toggle filter checkboxes
Use Click (via keyboard activation) to select counties (mouse click currently required for county selection)

For Screen Magnifier Users

The SVG-based map scales cleanly when using browser zoom or screen magnification software. Text labels remain crisp at high zoom levels, and interactive elements maintain their click targets.

For Users with Motor Control Challenges

Large click targets (entire county areas, 50×50 pixel button) reduce the precision required for interaction. The play button provides automatic timeline progression, eliminating the need for repeated slider adjustments.

Evaluating Accessibility for Your School

Educators evaluating whether “Where Did They Go?” meets their school’s accessibility requirements should consider:

Current features provide basic accessibility support for visual and motor needs
Screen reader support is planned but not yet fully implemented
Keyboard navigation works for timeline controls and filters, but county selection currently requires mouse interaction
Color-based information is partially redundant (healthcare symbols) but not fully redundant across all layers

For specific accessibility requirements or to report accessibility barriers, please contact the development team through the project repository.

What’s Next

County View – Learn how to navigate the map and access detailed local data
Data Layers Reference – Understand what information each data layer provides
System Architecture – For developers: explore how accessibility features can be extended in the codebase