Klaviyo cover

HathiTrust

HathiTrust

This case study highlights one of the many projects I contributed to as the first UX Designer on the team - an accessibility audit initiative. For more details about this project, please refer to our related blog post.

This case study highlights one of the many projects I contributed to as the first UX Designer on the team - an accessibility audit initiative. For more details about this project, please refer to our related blog post.

Project Context

Timeline: June - Aug 2022 (12 week internship)

Responsibilities

Design Research Intern User Research: Surveys, User Interviews, Usability Testing

Tools

Figma

Usertesting.com

Qualtrics

Project Context

Timeline: Apr-Aug 2024

Core team:

  • 1 UX Designer (me)

  • 1 Front end developer

  • 1 UXR Manager

Timeline: Apr-Aug 2024

Core team:

  • 1 UX Designer (me)

  • 1 Front end developer

  • 1 UXR Manager

Timeline: Apr-Aug 2024

Core team:

  • 1 UX Designer (me)

  • 1 Front end developer

  • 1 UXR Manager

Responsibilities

  • WCAG evaluation

  • UX design

  • Design QA & testing

  • WCAG evaluation

  • UX design

  • Design QA & testing

Tools

  • Figma

  • Deque axe Auditor

  • GitHub

  • Figma

  • Deque axe Auditor

  • GitHub

About HathiTrust

About the A11y Audit

What we found

Highlights

Key Takeaways

About HathiTrust

HathiTrust is a non-profit digital library & online scholarly resource platform, aimed at preserving & sharing the cultural record by providing lawful access to 18+ millions of digitized books, journals, and other materials from academic and research institutions worldwide.

The organization offers reading access to the fullest extent allowable by U.S. and international copyright law, text and data mining tools for the entire corpus, and other emerging services based on the combined collection. They provide services such as the HathiTrust Digital Library, Accessible Text Request Service, Emergency Temporary Access Service and more.

About HathiTrust

HathiTrust is a non-profit digital library & online scholarly resource platform, aimed at preserving & sharing the cultural record by providing lawful access to 18+ millions of digitized books, journals, and other materials from academic and research institutions worldwide.

The organization offers reading access to the fullest extent allowable by U.S. and international copyright law, text and data mining tools for the entire corpus, and other emerging services based on the combined collection. They provide services such as the HathiTrust Digital Library, Accessible Text Request Service, Emergency Temporary Access Service and more.

About HathiTrust

HathiTrust is a non-profit digital library & online scholarly resource platform, aimed at preserving & sharing the cultural record by providing lawful access to 18+ millions of digitized books, journals, and other materials from academic and research institutions worldwide.

The organization offers reading access to the fullest extent allowable by U.S. and international copyright law, text and data mining tools for the entire corpus, and other emerging services based on the combined collection. They provide services such as the HathiTrust Digital Library, Accessible Text Request Service, Emergency Temporary Access Service and more.

About HathiTrust

HathiTrust is a non-profit digital library & online scholarly resource platform, aimed at preserving & sharing the cultural record by providing lawful access to 18+ millions of digitized books, journals, and other materials from academic and research institutions worldwide.

The organization offers reading access to the fullest extent allowable by U.S. and international copyright law, text and data mining tools for the entire corpus, and other emerging services based on the combined collection. They provide services such as the HathiTrust Digital Library, Accessible Text Request Service, Emergency Temporary Access Service and more.

About the A11Y Audit

  • HathiTrust had a major website redesign in July 2023 (a few months before I joined the team) which involved updating brand colors & logos, migrating to Wordpress and rebuilding components.

  • As part of the organization's commitment to accessibility and the massive redesign, the organization partnered with Deque to conduct an accessibility audit to identify a11y issues.

About the A11Y Audit

  • HathiTrust had a major website redesign in July 2023 (a few months before I joined the team) which involved updating brand colors & logos, migrating to Wordpress and rebuilding components.

  • As part of the organization's commitment to accessibility and the massive redesign, the organization partnered with Deque to conduct an accessibility audit to identify a11y issues.

About the A11Y Audit

  • HathiTrust had a major website redesign in July 2023 (a few months before I joined the team) which involved updating brand colors & logos, migrating to Wordpress and rebuilding components.

  • As part of the organization's commitment to accessibility and the massive redesign, the organization partnered with Deque to conduct an accessibility audit to identify a11y issues.

About the A11Y Audit

  • HathiTrust had a major website redesign in July 2023 (a few months before I joined the team) which involved updating brand colors & logos, migrating to Wordpress and rebuilding components.

  • As part of the organization's commitment to accessibility and the massive redesign, the organization partnered with Deque to conduct an accessibility audit to identify a11y issues.

What we found

We discovered 96 unique a11y issues and quickly worked on the most critical issues, for instance:

For more details, please view our related press release!

What we found

We discovered 96 unique a11y issues and quickly worked on the most critical issues, for instance:

For more details, please view our related press release!

What we found

We discovered 96 unique a11y issues and quickly worked on the most critical issues, for instance:

For more details, please view our related press release!

What we found

We discovered 96 unique a11y issues and quickly worked on the most critical issues, for instance:

For more details, please view our related press release!

Highlights

As the UX Designer, I primarily worked on issues related to 2 key accessibility concerns:

  • color contrast (eg. due to the brand's orange color)

  • screenreader and keyboard navigation (due to major website redesign and Wordpress issues)

Highlights

As the UX Designer, I primarily worked on issues related to 2 key accessibility concerns:

  • color contrast (eg. due to the brand's orange color)

  • screenreader and keyboard navigation (due to major website redesign and Wordpress issues)

Highlights

As the UX Designer, I primarily worked on issues related to 2 key accessibility concerns:

  • color contrast (eg. due to the brand's orange color)

  • screenreader and keyboard navigation (due to major website redesign and Wordpress issues)

Highlights

As the UX Designer, I primarily worked on issues related to 2 key accessibility concerns:

  • color contrast (eg. due to the brand's orange color)

  • screenreader and keyboard navigation (due to major website redesign and Wordpress issues)

Color contrast

The color contrast between background and foreground content (that is, usually text) should be high enough to ensure legibility.

WCAG 1.4.3. Contrast (Minimum) - Level AA The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: large-text (should be atleast 3:1), incidental or decorative texts or images of text, logos.

  • i.e. Ensuring text (heading, body), links have sufficient contrast on different backgrounds across the website

WCAG 1.4.11. Non-text Contrast - Level AA Ensure there is a minimum of 3:1 color contrast ratio for user interface components and states and graphical objects that convey meaningful information.

  • i.e. Ensuring the focus indicator design has sufficient contrast on different backgrounds across the website.

Color contrast

The color contrast between background and foreground content (that is, usually text) should be high enough to ensure legibility.

WCAG 1.4.3. Contrast (Minimum) - Level AA The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: large-text (should be atleast 3:1), incidental or decorative texts or images of text, logos.

  • i.e. Ensuring text (heading, body), links have sufficient contrast on different backgrounds across the website

WCAG 1.4.11. Non-text Contrast - Level AA Ensure there is a minimum of 3:1 color contrast ratio for user interface components and states and graphical objects that convey meaningful information.

  • i.e. Ensuring the focus indicator design has sufficient contrast on different backgrounds across the website.

Color contrast

The color contrast between background and foreground content (that is, usually text) should be high enough to ensure legibility.

WCAG 1.4.3. Contrast (Minimum) - Level AA The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: large-text (should be atleast 3:1), incidental or decorative texts or images of text, logos.

  • i.e. Ensuring text (heading, body), links have sufficient contrast on different backgrounds across the website

WCAG 1.4.11. Non-text Contrast - Level AA Ensure there is a minimum of 3:1 color contrast ratio for user interface components and states and graphical objects that convey meaningful information.

  • i.e. Ensuring the focus indicator design has sufficient contrast on different backgrounds across the website.

Color contrast

The color contrast between background and foreground content (that is, usually text) should be high enough to ensure legibility.

WCAG 1.4.3. Contrast (Minimum) - Level AA The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: large-text (should be atleast 3:1), incidental or decorative texts or images of text, logos.

  • i.e. Ensuring text (heading, body), links have sufficient contrast on different backgrounds across the website

WCAG 1.4.11. Non-text Contrast - Level AA Ensure there is a minimum of 3:1 color contrast ratio for user interface components and states and graphical objects that convey meaningful information.

  • i.e. Ensuring the focus indicator design has sufficient contrast on different backgrounds across the website.

Focus Indicator (redesign)

Focus indicators are visual indicators to highlight the “focused” element, that helps keyboard users identify elements that they’re interacting with through keyboard navigation (eg. by pressing the tab key).

Problem

The previous focus indicator designed had a pale orange with an opacity, that did not pass color contrast requirements.

Solution

By collaborating with the team, I designed a universal focus indicator that included a blue and white combination outline, so that it can be applied across various components and different backgrounds for a more accessible experience.

Focus Indicator (redesign)

Focus indicators are visual indicators to highlight the “focused” element, that helps keyboard users identify elements that they’re interacting with through keyboard navigation (eg. by pressing the tab key).

Problem

The previous focus indicator designed had a pale orange with an opacity, that did not pass color contrast requirements.

Solution

By collaborating with the team, I designed a universal focus indicator that included a blue and white combination outline, so that it can be applied across various components and different backgrounds for a more accessible experience.

Focus Indicator (redesign)

Focus indicators are visual indicators to highlight the “focused” element, that helps keyboard users identify elements that they’re interacting with through keyboard navigation (eg. by pressing the tab key).

Problem

The previous focus indicator designed had a pale orange with an opacity, that did not pass color contrast requirements.

Solution

By collaborating with the team, I designed a universal focus indicator that included a blue and white combination outline, so that it can be applied across various components and different backgrounds for a more accessible experience.

Focus Indicator (redesign)

Focus indicators are visual indicators to highlight the “focused” element, that helps keyboard users identify elements that they’re interacting with through keyboard navigation (eg. by pressing the tab key).

Problem

The previous focus indicator designed had a pale orange with an opacity, that did not pass color contrast requirements.

Solution

By collaborating with the team, I designed a universal focus indicator that included a blue and white combination outline, so that it can be applied across various components and different backgrounds for a more accessible experience.

Screenreader & keyboard navigation

Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display (from the American Foundation for the Blind). eg: JAWS, NVDA, ZoomText for Windows and VoiceOver for Apple products.

WCAG 4.1.2. Name, Role, Value - Level A For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

  • i.e. This meant testing whether the screenreader announcements made sense for the overall screenreader user experience, to ensure an experience similar to that of a visual user.

Screenreader & keyboard navigation

Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display (from the American Foundation for the Blind). eg: JAWS, NVDA, ZoomText for Windows and VoiceOver for Apple products.

WCAG 4.1.2. Name, Role, Value - Level A For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

  • i.e. This meant testing whether the screenreader announcements made sense for the overall screenreader user experience, to ensure an experience similar to that of a visual user.

Screenreader & keyboard navigation

Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display (from the American Foundation for the Blind). eg: JAWS, NVDA, ZoomText for Windows and VoiceOver for Apple products.

WCAG 4.1.2. Name, Role, Value - Level A For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

  • i.e. This meant testing whether the screenreader announcements made sense for the overall screenreader user experience, to ensure an experience similar to that of a visual user.

Screenreader & keyboard navigation

Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display (from the American Foundation for the Blind). eg: JAWS, NVDA, ZoomText for Windows and VoiceOver for Apple products.

WCAG 4.1.2. Name, Role, Value - Level A For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

  • i.e. This meant testing whether the screenreader announcements made sense for the overall screenreader user experience, to ensure an experience similar to that of a visual user.

Key Takeaways

Key Takeaways

Key Takeaways

Key Takeaways

Lessons learned

  • Audit work is hard! There is a lot of labor and rigor to track, audit and fix these issues.

  • Start with accessibility: As Kat Holmes mentions in the book Mismatch, "Building accessibility in from the beginning ensures that no one gets left out". This is something I keep in mind while working to establish the first UX design system for the team.

  • Design 🤝 Development: By working closely with team, we collaborated, critiqued and eventually came up with designs that were user-friendly and accessible and achievable through code. Having this trust and relationship is definitely key for an overall good user experience.

Lessons learned

  • Audit work is hard! There is a lot of labor and rigor to track, audit and fix these issues.

  • Start with accessibility: As Kat Holmes mentions in the book Mismatch, "Building accessibility in from the beginning ensures that no one gets left out". This is something I keep in mind while working to establish the first UX design system for the team.

  • Design 🤝 Development: By working closely with team, we collaborated, critiqued and eventually came up with designs that were user-friendly and accessible and achievable through code. Having this trust and relationship is definitely key for an overall good user experience.

Lessons learned

  • Audit work is hard! There is a lot of labor and rigor to track, audit and fix these issues.

  • Start with accessibility: As Kat Holmes mentions in the book Mismatch, "Building accessibility in from the beginning ensures that no one gets left out". This is something I keep in mind while working to establish the first UX design system for the team.

  • Design 🤝 Development: By working closely with team, we collaborated, critiqued and eventually came up with designs that were user-friendly and accessible and achievable through code. Having this trust and relationship is definitely key for an overall good user experience.

Lessons learned

  • Audit work is hard! There is a lot of labor and rigor to track, audit and fix these issues.

  • Start with accessibility: As Kat Holmes mentions in the book Mismatch, "Building accessibility in from the beginning ensures that no one gets left out". This is something I keep in mind while working to establish the first UX design system for the team.

  • Design 🤝 Development: By working closely with team, we collaborated, critiqued and eventually came up with designs that were user-friendly and accessible and achievable through code. Having this trust and relationship is definitely key for an overall good user experience.

-----------------------------------