NASA x ARISA Eclipse Soundscape


This is a NASA Science Activation funded project with ARISA Lab that aims to create eclipse maps accessible for individuals with visual impairments and color blindness and create a more inclusive experience overall.

The current map design presents overwhelming information and confusing navigation guidance, which impacts the accessibility and usability of the map for a variety of users. A significant portion of users are excluded from accessing and utilizing the map, resulting in a limited user experience.


NASA Science Activation

My Role

UX Designer
UX Researcher


Regine Gilbert (Instructor)
Trang Hien Nguyen




How might we enhance the accessibility of the map to provide an intuitive and inclusive user experience, ensuring that all users, regardless of their visual abilities, can easily utilize the map?


Redesign the eclipse map website follow the WCAG 2.1 guidelines at the AA or AAA level
Enable users to lookup information about annular and total solar eclipse based on their location


Revamp and improve the accessibility and legibility of the eclipse soundscape, with a focus on enhancing screen reader compatibility and providing alternative options for individuals with visual impairments.

Understanding Eclipse Map and Accessibility Guidelines

Initial Research on Maps

We started the research on understanding the Web Content Accessibility Guidelines (WCAG) and doing a competitive analysis of current solar eclipse maps. Our evaluation focused on key accessibility features, including color contrast, keyboard navigation, screen reader compatibility, and labels and legends.

Identifying Map Issues with
Accessible Audit

We conducted an accessibility analysis with the best-performed map (Time and Date) and ES:CSP website with WAVE Web Accessibility Evaluation Tools and identified
the following key issues:
1. Low color contrast
2. Lack of alternative text
3. Unclear label and legends
4. Inefficient keyboard navigation

Identifying Website Issues

We also conducted an research on the current website of ARISA Lab's Eclipse Soundscapes Project and identify two main issues:
1. Low color contrast on text
2. Low legibility due to long text blocks

Optimizing Brand Consistency and Accessibility
Branding & UI Considerations

Color Choice for ES:CSP

We use the existing brand color palette for the map design to keep the consistency with their brand. To guarantee the legibility and accessibility of the map design for all users, we conduct tests to address color contrast, grayscale compatibility, and color blindness.

Accessibility Consideration 1

Color Contrast Test

To ensure the text legibility, we did the color contrast test based on the WCAG and make sure all of the color we choose pass all the requirements for AA and AAA accessibility level.

Accessibility Consideration 2

Color Blindness Simulations

We created both light mode and dark mode for the map. To ensure the legibility, we conducted thorough color contrast tests on various map elements and carried out three different types of color blindness simulations for each mode.

The light mode passes all the tests and ensures the accessibility for all individuals regardless of their color vision capabilities.
The dark mode aligns more with the brand and website colors, but is not accessible enough under the monochromatic view.
Accessibility Consideration 3

Accessibility Guidelines

We redesigned the website's information architecture to establish a well-defined content hierarchy for developers and engineers to ensure screen reader compatibility and seamless keyboard navigation. We incorporated alt text for icons to provide clearer context and easier navigation.

Final Solutions

1. Keyboard Navigation

For accessibility consideration, the navigation structure of this website has been redesigned to prioritize accessibility, with a specific focus on ensuring compatibility with screen readers.

2. Zoom In & Out Function

To facilitate users to explore the eclipse path in finer detail, the map design incorporates a zoom-in and out feature, enabling thorough analysis of the path, selection of viewing spots, and assessment of visibility and its impact across different areas.

3. Light Mode & Dark Mode

The eclipse map is developed with two versions: a light mode and a dark mode, allowing user to choose based on their preference.


1. This project enhanced my understanding of accessible design and accessibility guidelines. It deepened my awareness of the challenges and requirements encountered by individuals with visual impairments when navigating digital interfaces and maps, encouraging me to explore inclusive design solutions in the future.

2. The experience of collaborating with engineers to integrate screen readers was valuable. It improved my ability to work effectively with other teams by delivering designs with clear instructions and hierarchies.