Meye Browser Extension.
An accessibility tool for colour-vision-deficiency
Project Overview
For my final year university project, I chose accessibility as the theme, focusing on designing a browser extension to improve web page accessibility, rather than a traditional web or mobile application. This decision was driven by the challenge and the potential impact of enhancing accessibility. I specifically addressed colour-vision-deficiency (CVD), a type of visual impairment, by conducting extensive research on the condition and how it affects web usage for individuals with CVD.
The project began with an in-depth review of secondary sources to understand CVD better and a technology review to examine existing solutions for CVD users. This revealed a gap in technologies allowing for extensive customisation to meet CVD users' needs, highlighting customer feedback on issues similar to those found in secondary research. Recognising a market opportunity, I used primary research to validate findings and explore potential enhancements for web accessibility for CVD users. This comprehensive research approach informed the development of the browser extension, aiming to offer broader customisation and inclusivity.
Year
Duration
2023
1 year
Technology
HTML / CSS / JavaScript
Project Aim & Objectives
Explore the factors affecting CVDIs as it relates to web accessibility.
Investigate the use and functionality of existing CVD assistive tools.
Collect primary data from CVDIs to devise a list of pain points when browsing the web and using CVD assistive tools.
Analyse and compare the data collected from the literature (secondary data) and research participants (primary data).
Develop a user-friendly BE using data gathered from secondary and primary data sources.
Project Aim
The primary aim of the project was to develop a browser extension designed to enhance web accessibility for color-vision-deficient individuals (CVDIs). The goal was to enable these users to apply appropriate color schemes to web applications, thereby aligning with their specific level of color deficiency and improving their overall web browsing experience.
Project Objectives
Introduction
The project addresses the issue of color vision deficiency (CVD) in web accessibility, focusing on developing a browser extension to aid color-vision-deficient individuals (CVDIs). Approximately 16% of the world's population exhibits some form of disability, with 1 in 12 men and 1 in 200 women affected by CVD. The project aims to improve web accessibility for this significant portion of the population, as many websites currently fail to meet Web Content Accessibility Guidelines (WCAG), particularly in areas such as contrast text.
Research
The secondary research phase began with a comprehensive literature review. This review explored various aspects including assistive technology, the definition and range of disabilities, inclusive design principles, and specific details about color-vision deficiency (CVD). The purpose was to establish a foundational understanding of the challenges faced by individuals with disabilities, especially CVDIs, in web navigation. Topics such as assistive technologies' role, inclusive design's importance, the prevalence of various forms of CVD, and the web design flaws that hinder CVDIs' web experience were covered in detail.
Secondary Research
68 Participant Responses
5 One-to-One Interviews
Following the secondary research, primary research activities were conducted, which included a questionnaire and interviews. The questionnaire phase focused on gathering personal experiences of CVDIs regarding their condition and its impact on their web usage. The interview phase involved A/B testing with prototypes, where participants evaluated different versions of the browser extension. This phase provided direct user feedback, revealing preferences for aspects like layout (popup vs. sidebar) and feature organization (list vs. tabs layout). This user feedback was crucial in guiding the development of a mid-fidelity prototype, combining user preferences and allowing for feature scalability
Primary Research
1 in 12 men and 1 in 200 women have CVD
Deuteranomaly affects 4.9% of men and 0.38% of women
Key Findings
Awareness of Condition
Questionnaire data revealed that 39% of the participants did not know their type of CVD.
72% of participants stated their biggest issue whilst using the web was viewing text on backgrounds of a similar colour.
Top Accessibility Issue
When asked about their familiarity with assistive technology (AT), 70% of participants were not aware of AT such as built-in Windows and Apple accessibility settings.
Assistive Technology
Design
The design process for the browser extension involved an iterative approach. Initial concepts, influenced by questionnaire data, focused on sketching various layout and functionality ideas. This was followed by A/B testing during interviews, where participants evaluated different versions (popup vs. sidebar, list vs. tabs layouts). Feedback from these sessions informed the development of a mid-fidelity prototype, integrating preferred design elements. Continuous refinements were made to this prototype, balancing user preferences with practical considerations for usability and feature scalability.
Iterative Design Approach
Initial Concept
A/B Testing - Layout Options
Contrast testing on the mid-fidelity prototype was a critical part of the design process, particularly for ensuring accessibility for color-vision-deficient individuals (CVDIs). This testing focused on evaluating the visibility and readability of text and visual elements under various conditions. This was accomplished using the A11y Contrast Checker Figma plugin.
Following testing, a set of colours was carefully selected to ensure sufficient contrast between colour options as well as between text and coloured backgrounds.
Mid-fidelity Prototype
Development
In the development of the browser extension, web technologies HTML, CSS, and JavaScript were utilised. These technologies were selected for their compatibility with the WebExtensions framework, a standard cross-browser architecture, to ensure functionality across various web browsers. The architecture of the extension followed this framework, incorporating components like the Background Page, UI Pages, and Content Scripts for effective interaction with the web page's Document Object Model (DOM) and browser APIs. The implementation of features was guided by insights from the research phase, with a strong emphasis on creating UI elements tailored to the needs of color-vision-deficient individuals, such as high contrast ratios and adjustable color schemes.
WebExtensions Framework
During the learning stage of building the browser extension, I engaged in a deep dive into the technical and design aspects of web development. This phase was characterised by exploring the intricacies of HTML, CSS, and JavaScript, and understanding how these technologies integrate within the WebExtensions framework to create a functional and cross-browser compatible extension. Through this journey, I gained valuable insights into the technological aspects of creating digital solutions that are accessible and user-friendly.
Learning the Basics
Evaluation
In the evaluation phase of the browser extension project, a thorough assessment was conducted to gauge both its technical functionality and user experience. This stage involved extensive user testing with color-vision-deficient individuals (CVDIs), providing critical feedback on the usability and effectiveness of the extension in real-world scenarios.
Usability Testing
3 Moderated and 1 unmoderated usability tests
Complementing user feedback, heuristic evaluations by experts in user interface (UI) and user experience (UX) design were carried out, focusing on ensuring that the extension adhered to best practices and accessibility standards. An essential part of the evaluation was reviewing how well the extension met the initial research objectives, particularly in addressing the identified pain points of CVDIs such as indistinguishable links, low-contrast ratios, and reliance on colour to convey information.
Expert Heuristic Evaluation
4 Expert evaluations
The feedback gathered from both user testing and expert evaluations was instrumental in refining the design and functionality of the extension, allowing for continuous improvement and adaptation to better serve the needs of CVDIs. This comprehensive evaluation process was key in validating the effectiveness of the browser extension and pinpointing opportunities for further enhancements.