Ramiro Puentes

Project Overview

Developed a Chrome extension named "Web Enhancer" designed to improve web accessibility for users with disabilities. The extension enhances the browsing experience by automatically correcting text contrast, adding image alt tags in a selected language, inserting ARIA labels into form elements, and updating HTML tables for accessibility.

Project duration July 2024 - August 2024

My role within this project is that of a Lead UX designer, UX Researcher, UX Tester and Developer.

Tools & Technologies: JavaScript, HTML, CSS, Chrome APIs, ARIA standards, Web Accessibility, i18n, DOM Manipulation

User Research

Conducted extensive user research and testing focused on web and app accessibility to ensure compliance with accessibility standards (WCAG 2.1). This involved identifying and addressing barriers for users with disabilities, including those with visual impairments, motor impairments, and cognitive disabilities.

Identified Points of Interest

WebAIM's Million Report, which consistently highlight that low contrast text, missing alt text, and unlabeled form fields are among the most common accessibility issues found on the web.
Studies, such as the WebAIM Million Report, consistently show that the most frequent accessibility failures on the web include low contrast text, missing alt text, and unlabeled form fields. This extension directly targets these widespread issues to improve overall accessibility
By addressing core accessibility issues, this extension significantly improves the user experience for individuals with disabilities. Research highlights that inaccessible websites force users to abandon pages due to frustration, preventing them from fully participating in online activities.
Providing alternative text for images is essential for users who rely on screen readers, enabling them to understand visual content. The inclusion of alt text functionality in this extension ensures that websites comply with this critical accessibility requirement.
Properly labeled forms are essential for users who navigate with assistive technologies. Unlabeled form fields create barriers, making it difficult for users to complete tasks. This extension ensures all form elements are properly labeled, improving usability for everyone.

Pain Points

Low Contrast Text

Text does not have sufficient contrast with its background, making it difficult to read for users with visual impairments, such as color blindness or low vision

Missing Alt Text

Many images lack alt text, making it impossible for screen reader users to understand the content of those images

Unlabeled Form Fields

Form input fields are missing associated labels, causing confusion for screen reader users who cannot determine what information is required

Prototypes

User flow to show the submission process from both the user perspective as well as the Administrator.

Extension

Take Aways

Rocket Launch Logo

Impact

The "Web Enhancer" Chrome extension has the potential to significantly improve web accessibility and inclusivity by automating best practices such as adjusting text contrast, adding alt text, and enhancing form and table accessibility. This tool empowers developers and content creators, lowering the barrier to creating accessible websites even for those without extensive knowledge of accessibility standards. By ensuring websites comply with global regulations like WCAG and ADA, the extension helps organizations mitigate legal risks while reaching a broader audience, including users with disabilities and non-English speakers.

Beyond the technical benefits, the extension promotes a culture of inclusivity in the digital space by making accessibility improvements simple and widespread. As more websites adopt these practices, users with disabilities will enjoy a better browsing experience, leading to increased engagement and participation in the digital world. The extension's global reach, combined with its ability to raise awareness of accessibility issues, can contribute to a more equitable and inclusive internet for all.

What I Learned

Building the "Web Enhancer" Chrome extension provided valuable insights into web accessibility and user-centered design. It deepened my knowledge of WCAG and ARIA standards while honing my skills in Chrome extension development, frontend design, and internationalization. The project emphasized the importance of automating accessibility improvements to reduce barriers for developers and users alike. It also highlighted the need for balancing usability with performance, handling sensitive data securely, and ensuring cross-browser compatibility. Ultimately, this project reinforced my commitment to creating more inclusive digital experiences.