Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

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

Mina Huh, Amy Pavel

TL;DR

This paper addresses the challenge BLV web developers face in assessing visual design by introducing DesignChecker, a Chrome extension that provides Design Issue Summaries, Design Comparisons against guidelines, reference sites, or trends, and Design Suggestions that map issues to actionable CSS fixes. The authors derive design opportunities from formative interviews with BLV developers and a design analysis of 20 BLV-created websites, guiding a pipeline that uses HTML/CSS/OCR data and GPT-4 to generate concrete recommendations. In a within-subjects user study (N=8), DesignChecker improved detection and resolution of visual-design issues, reduced user frustration, and increased confidence compared to participants’ usual workflows, with all participants expressing intent to reuse the tool. The work demonstrates a latent demand for accessible design-feedback tooling and suggests directions for integrating such tools into broader authoring workflows, learning resources, and multi-modal design guidance. Overall, DesignChecker provides concrete, non-visual feedback and context-rich guidance to help BLV developers create visually effective and accessible websites.

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.

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

TL;DR

This paper addresses the challenge BLV web developers face in assessing visual design by introducing DesignChecker, a Chrome extension that provides Design Issue Summaries, Design Comparisons against guidelines, reference sites, or trends, and Design Suggestions that map issues to actionable CSS fixes. The authors derive design opportunities from formative interviews with BLV developers and a design analysis of 20 BLV-created websites, guiding a pipeline that uses HTML/CSS/OCR data and GPT-4 to generate concrete recommendations. In a within-subjects user study (N=8), DesignChecker improved detection and resolution of visual-design issues, reduced user frustration, and increased confidence compared to participants’ usual workflows, with all participants expressing intent to reuse the tool. The work demonstrates a latent demand for accessible design-feedback tooling and suggests directions for integrating such tools into broader authoring workflows, learning resources, and multi-modal design guidance. Overall, DesignChecker provides concrete, non-visual feedback and context-rich guidance to help BLV developers create visually effective and accessible websites.

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.
Paper Structure (35 sections, 9 figures, 7 tables)

This paper contains 35 sections, 9 figures, 7 tables.

Table of Contents

  1. Introduction
  2. Related Work
  3. Accessible Authoring
  4. Accessible Programming
  5. Design Feedback
  6. Web Design Prototyping Tools
  7. Formative Work
  8. Interview
  9. Design Opportunities
  10. Website Design Analysis
  11. DesignChecker
  12. Interface
  13. Pipeline
  14. Style Property Evaluation
  15. Style Property Comparison
  16. ...and 20 more sections

Figures (9)

  • Figure 1: When activated, DesignChecker overlays a popup where users can select the options for Design Comparison: a reference website and website trends.
  • Figure 2: DesignChecker is a browser extension that helps BLV developers to review and improve their web design. Design Issue Summary (A) provides the overview of issues in the current design. Design Comparison (B) enables users to assess their current design using 3 different resources: visual web design guidelines (default), a reference website of their choice, and a trend of similar websites. Design Suggestions (C) provides the list of elements that failed (Issues) or fulfilled (Passes) the requirements of design guidelines. Each Design issue (D) identifies the specific HTML elements causing the issue and suggests CSS changes.
  • Figure 3: To improve color harmony, DesignChecker first extracts the primary color from the original web design and generates a color palette for pre-defined roles (e.g., surface, outline) MaterialsColor. Using the definitions of color roles and the generated palette, GPT-4 suggests colors for UI elements.
  • Figure 4: Pipeline of DesignChecker that generates Design Comparison and Design Suggestions from the user's website. From the input website, DesignChecker extracts HTML and CSS and groups HTML elements that share the same CSS classes. Identified issues and the relevant guideline suggestions are presented in Design Suggestion. DesignChecker compares the current website's evaluation results with the recommended values in the guidelines, the reference website, and the website trends. The summary of the comparison is presented in Design Comparison.
  • Figure 5: BLV developers' websites edited using DesignChecker (Top: original, Bottom: edited). DesignChecker increased the color contrast of text (A-B, D), introduced more whitespace to separate and align UI elements (A, C-D), and improved color harmony (A-E).
  • ...and 4 more figures