#a11y

#web

#WCAG 2.1

#UXDesign

GoNoise Accessibility Evaluation & Redesign

GoNoise Accessibility Evaluation & Redesign

GoNoise Accessibility Evaluation & Redesign

GoNoise Accessibility Evaluation & Redesign

GoNoise Accessibility Evaluation & Redesign

GoNoise Accessibility Evaluation & Redesign

Led a UX Design-focused A11y Test, handling pre-test a11y requirements following WCAG guidelines and suggested the changes needed to make the website more inclusive.

Led a UX Design-focused A11y Test, handling pre-test a11y requirements following WCAG guidelines and suggested the changes needed to make the website more inclusive.

Led a UX Design-focused A11y Test, handling pre-test a11y requirements following WCAG guidelines and suggested the changes needed to make the website more inclusive.

Led a UX Design-focused A11y Test, handling pre-test a11y requirements following WCAG guidelines and suggested the changes needed to make the website more inclusive.

Led a UX Design-focused A11y Test, handling pre-test a11y requirements following WCAG guidelines and suggested the changes needed to make the website more inclusive.

Led a UX Design-focused A11y Test, handling pre-test a11y requirements following WCAG guidelines and suggested the changes needed to make the website more inclusive.

View Presentation

November 2022

Duration

UX Design & Research

Role

Wave, Andi, Figma

Tools

November 2022

Duration

UX Design & Research

Role

Wave, Andi, Figma

Tools

Overview

Overview

Identified accessibility issues and redesigned selective pages of an online store web interface (gonoise.com). Focused on ensuring Alt-text and Contrast compliance with WCAG AA standards, the evaluation process was both rigorous and meticulous.

Identified accessibility issues and redesigned selective pages of an online store web interface (gonoise.com). Focused on ensuring Alt-text and Contrast compliance with WCAG AA standards, the evaluation process was both rigorous and meticulous.

Research Objectives & Goals

Research Objectives & Goals

1

Evaluate the overall usability of the online store web interface through a holistic accessibility standards.

2

Ensure Alt-text and Contrast compliance with WCAG AA standards across selective screens, addressing potential barriers for users with disabilities.

3

Pinpoint specific design elements requiring improvement based on accessibility standards, facilitating design enhancements.

4

Generate corrected mockups for design elements that do meet accessibility standards.

Glimpse of Final Designs

Glimpse of Final Designs

Conclusion

Conclusion

1

The color contrast and alt-text issues identified in the primary buttons, labels, in-page navigation, FAQ text, product images, and social media icons underscore the critical importance of prioritizing accessibility in digital design.

2

The in-page navigation labels, primary button, a crucial element, falls short in contrast, affecting users with visual impairments. The FAQ text's contrast deficiency hampers readability for those with low vision.

3

Additionally, the absence of alt text in product images impedes understanding for visually impaired users, while missing alt text for social media icons limits access for screen reader users.

In addressing these specific issues through color adjustments and the addition of descriptive alt text, I see it as more than just a corrective measure; it is my commitment to creating a more inclusive online environment. This experience reinforces the imperative for me, as a designer, to consistently integrate accessibility considerations, ensuring that digital interfaces cater to diverse needs and abilities. It’s about fostering an environment where everyone, regardless of their abilities, can engage seamlessly with the content and functionalities provided.

Built in Framer · Made by Krish Pabani · ©2024

Built in Framer · Made by Krish Pabani · ©2024

Built in Framer · Made by Krish Pabani · ©2024

Built in Framer · Made by Krish Pabani · ©2024