DesignChecker: Visual Design Support for Blind and Low Vision Web Developers

Mina Huh,Amy Pavel
DOI: https://doi.org/10.1145/3654777.3676369
2024-07-25
Abstract:Blind and low vision (BLV) developers create websites to share knowledge and showcase their work. A well-designed website can engage audiences and deliver information effectively, yet it remains challenging for BLV developers to review their web designs. We conducted interviews with BLV developers (N=9) and analyzed 20 websites created by BLV developers. BLV developers created highly accessible websites but wanted to assess the usability of their websites for sighted users and follow the design standards of other websites. They also encountered challenges using screen readers to identify illegible text, misaligned elements, and inharmonious colors. We present DesignChecker, a browser extension that helps BLV developers improve their web designs. With DesignChecker, users can assess their current design by comparing it to visual design guidelines, a reference website of their choice, or a set of similar websites. DesignChecker also identifies the specific HTML elements that violate design guidelines and suggests CSS changes for improvements. Our user study participants (N=8) recognized more visual design errors than using their typical workflow and expressed enthusiasm about using DesignChecker in the future.
Human-Computer Interaction
What problem does this paper attempt to address?
The paper attempts to address the issue that blind and low vision (BLV) web developers face when designing websites: the challenges of visual design. Although these developers can create highly accessible websites, they struggle to assess the usability of their designs for sighted users and encounter difficulties in identifying unreadable text, misaligned elements, and discordant colors using screen readers. To help these developers better evaluate and improve their website designs, the authors propose a browser extension tool called DesignChecker. ### Main Issues 1. **Difficulty in evaluating visual design**: BLV developers find it challenging to assess the visual design of their websites using existing tools (such as screen reader plugins), especially regarding issues with text, layout, and color. 2. **Challenges in obtaining feedback**: While BLV developers can recruit sighted users for design feedback, understanding and processing this feedback remains challenging. 3. **Adherence to design standards**: BLV developers want their websites to be not only user-friendly for sighted users but also to adhere to the design standards of other websites. ### Solution DesignChecker is a browser extension tool designed to help BLV developers review and improve the visual design of their websites. Specific features include: - **Design comparison**: Users can evaluate whether their current design meets standards by comparing it with visual design guidelines, selected reference websites, or trends from similar websites. - **Design suggestions**: The tool identifies specific HTML elements that violate design guidelines and provides specific CSS change suggestions to help developers address the issues. ### Research Contributions - **Design opportunities**: Through formative research, identified design opportunities to make visual web design more accessible. - **DesignChecker system**: Developed a system that supports accessible web design through design comparison and suggestions. - **User research**: Demonstrated how BLV developers use DesignChecker to review and improve their website designs, as well as the tool's effectiveness and user satisfaction.