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.
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
Role: UI/UX Designer, Visual Designer
Tool: Figma
SKIP TO THE GOOD BIT
Cooper Hewitt’s Efforts to Make Digital Exhibits Inclusive
"10,000 Cents" is a digital art project by Aaron Koblin and Takashi Kawashima, where 10,000 individuals were each paid one cent via Amazon Mechanical Turk to draw a tiny portion of a $100 bill. The final artwork highlights the power of crowdsourcing and questions concepts of value, labor, and authorship in the digital age.
Key Accessibility Concerns
After reviewing 10,000 Cents and evaluating it against WCAG 2 guidelines, we identified several accessibility concerns within the project:
Lack of text alternatives for each image in the project
Programmatically unclear purpose
for image ‘cells’
Small Cursor Size. Less than the recommended 24 by 24 pixel size
Red cursor selector on green background. Inaccessible for red-green colorblind users.
As one of the Visual and UI/UX Designers...
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.
Click to enlarge
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
Key Accessibility Concerns
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.
Using tab-index to Support Keyboard Accessibility
Click to enlarge
Guiding Users with Effective Focus Order:
Adding tab index 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.
Adding tab index 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
These updates made the exhibit more accessible by
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.
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.