Designing Accessibly: 10,000 Cents
Digital Accessibility
Responsive Design
Keyboard Navigation

Creating an Accessible Multisensory Exhibit

Product description:
This project reimagines 10,000 Cents, an interactive digital art piece at Cooper Hewitt, as an inclusive, multisensory experience. Through thoughtful UX design, we integrated sound, touch, and accessible navigation to ensure visitors of all abilities could engage fully. The result is a richer, barrier-free interaction that brings the artwork to life for everyone.
Goal: To develop an accessible version of the 10,000 Cents project that enables non-visual users to engage meaningfully with its content, while preserving the artistic intent and integrity of the original work.

‍Role: UI/UX Designer, Visual Designer
‍
Tool: Figma
SKIP TO THE GOOD PART

Key Accessibility Concerns

CURRENT VERSION OF 10,000 CENTS
Lack of text alternatives for each image in the project
WCAG 1.1 - Text Alternatives
Programmatically unclear purpose 
for image ‘cells’
WCAG 1.3.6- Identify Purpose
Small Cursor Size. Less than the recommended 24 by 24 pixel size
WCAG 2.5.8 Target Size (Minimum)
Red cursor selector on green background. Inaccessible for red-green colorblind users.
WCAG 1.4.11- Non-text Contrast

My Role

As the visual and UI/UX designer, I led the design of functional mockups and served as the primary visual designer for the user interface and client presentations. I collaborated closely with the team to develop accessible solutions for Cooper Hewitt's exhibit, with a focus on non-visual users.
ACCESSIBLE SOLUTION

Making the Experience Non-Visual Friendly

The accessible UI includes features like a screen reader–friendly title, randomizer, accessible visualizations, project and accessibility info, audio guide, and a toggle between accessible and original views.

“Randomizer” Cell Selector

A randomizer that selects a cell at random and reads aloud the image's alt description.
Enables non-visual users to:
  • Explore the project with the same sense of curiosity as visual users by randomly selecting cells.
  • Navigate faster and easier through efficient tab-based selection.
Click to enlarge

If cells are selected randomly, how might the low resolution of the cell size impact the results?

Click to enlarge
Improving Low-Resolution Visuals to Meet Cooper Hewitt’s Exhibit Standards:
The low-resolution visuals aren’t caused by screen resolution, but rather by the website rendering separate SVG images and a corresponding video.
Recommendation:
  • Increase SVG pixel dimensions to enhance image clarity.
  • Adjust JavaScript logic to support higher-resolution images.
Input Size Consideration:
  • Switch from fixed pixel dimensions to relative units (em, %) for responsive scaling.
  • This adjustment ensures mobile optimization and future-proofs the project.
FURTHER RECOMMENDATIONS

Using tab-index to Support Keyboard Accessibility

Click to enlarge
Guiding Users with Effective Focus Order:
Adding tabindex to the project's HTML enables keyboard navigation, supporting compliance with WCAG 2.1, ADA Title III, and Section 508. It also offers users a more accessible and versatile way to interact with the content.
Click to enlarge
Enables non-visual users to:
  • Move through content in a logical, predictable order
  • Reach and interact with hover-triggered content using the keyboard
  • Use screen readers and assistive tech more effectively
  • Access custom elements like <div> via keyboard focus

What Did We Achieve?

Creating Tab Index
that supports clicking into content for all users
Improved Cursor Contrast and Size
that enhances navigation for all users
Increase User Engagement
with the project through alt text creation
Clarify Context
that helps make the experience accessible and engaging for all users
TAKEAWAYS

Making Cents of It All

This project was well received by the Cooper Hewitt team, who appreciated our innovative approach to making the original work more accessible while honoring its integrity in a meaningful way. I especially valued the opportunity to collaborate with a diverse academic team from Library Science and Media Studies. Our interdisciplinary perspectives led to rich brainstorming sessions and creative solutions for translating the project's context to non-visual and keyboard-only users.

The Value of Accessibility
Accessibility is a core principle of UX design—designing for the user means designing for all users. Creating accessible experiences is not only ethical (and the law), but it also opens up new, meaningful ways to expand the original project. While the initial goal of this project was to transform 10,000 Cents into an accessible exhibit, the Cooper Hewitt team was especially excited by our multisensory approach, which allowed visitors of all abilities to engage with the work in inclusive and interactive ways.

Ways I Can Improve
While this project was both fun and innovative, there are still opportunities to improve accessibility.
‍
How might blind and deaf users engage more fully with the exhibit?
How can we expand alt text and the curator narration to support multiple languages (besides English and Spanish)?

These are important questions the Cooper Hewitt or other teams could explore further to make the exhibit even more inclusive in the future.

Explore More!

The Poseidon Project / Usability Case Study
Shedd Aquarium / Eye Tracking Test
Beyond the Horizon / Interactive Infographic
10,000 Cents / Accessible Exhibit Design
GenAI Survey / Research Study