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.
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.
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.
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
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
.png)
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.
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.
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.
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.
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.