TechPrufer
Get started
GitHub
GitHub logoGitHub · Feature trail

Automated Accessibility Checks for Alt Text

1 post · Jul 2024 – Aug 2026

What this trail covers

This feature thread tracks the evolution of automated accessibility checks, specifically focusing on improving the quality and effectiveness of alt text for images. Initially, the focus was on basic checks for the presence of alt text. This post details the development of an alt text plugin for the GitHub Accessibility Scanner, introducing deterministic rules for identifying common alt text issues (e.g., filenames, placeholders, generic descriptions, repetition) and an opt-in, model-backed rule. The team also developed a one-dimensional drag-and-drop component with enhanced accessibility features, addressing challenges with screen reader navigation, NVDA event simulation, rapid movement announcements, first-time user experience, and voice control in scrollable containers. This includes the strategic use of `role='application'`, dual HTML elements for keyboard/mouse events, debounced `aria-live` announcements with `aria-live='assertive'`, an instructional dialog for keyboard users, and a 'move dialog' for voice control users.

All GitHub trails
  1. Your alt text passes automated checks. That doesn't mean it's any good.This post details the development of an alt text plugin for the GitHub Accessibility Scanner. It introduces five deterministic rules for identifying common alt text issues (e.g., filenames, placeholders, generic descriptions, repetition) based on string analysis alone. It also describes an opt-in, model-backed rule that uses page context (headings, captions, surrounding prose, link status) and image content to provide more nuanced feedback. Key technical details include using Playwright for DOM traversal, a layout-based check for repeated alt text using bounding box comparisons, and a decision procedure for the model-backed rule to ensure consistent verdicts. Privacy considerations like URL redaction and untrusted input handling are also discussed.
  2. Considerations for making a tree view component accessibleThis post details the engineering effort behind GitHub's tree view component accessibility, focusing on mapping to familiar user patterns (Windows File Explorer), semantic HTML foundations, composite widgets, landmark regions, roving tabindex, ARIA enhancements, and support for expected navigation techniques (keyboard, middle-clicking). It also covers handling states like loading and provides specific keyboard navigation behaviors.
  3. Exploring the challenges in creating an accessible sortable list (drag-and-drop)This post details the engineering challenges and solutions for creating an accessible one-dimensional drag-and-drop component. Key contributions include: overriding screen reader arrow key navigation using `role='application'` scoped to the drag-and-drop trigger and dynamically applied/removed; separating keyboard and mouse event handling by using a Primer IconButton for keyboard and an invisible overlay for mouse events to manage NVDA's simulated mouse events; implementing a 100ms debounce with `aria-live='assertive'` for rapid movement announcements to prevent lag and disorientation; providing an instructional dialog with a 'don't show again' option for keyboard users unfamiliar with the pattern; and introducing a 'move dialog' as an alternative interaction mode for voice control users in scrollable containers, which also proved beneficial for other users.