Make every window work with a keyboard and a screen reader

How to do it

WCAG applies to desktop software too, as the W3C's WCAG2ICT guidance explains. Native controls from the platform's own toolkit come with names, roles and keyboard support. Custom-drawn controls have none until you add them through the platform's accessibility API. In Electron and Tauri, the window is a web page, so the web rules apply in full. Start with make everything work by keyboard and always show where focus is. Desktop apps add a menu bar, keyboard shortcuts and several windows. Give every menu command a shortcut or a menu path, and move focus into each new window or dialog. Follow the system's high contrast, text size and reduced motion settings.

Examples

JavaScript example

// Electron end-to-end test: scan every open window with axe-core
import AxeBuilder from '@axe-core/playwright';

for (const window of electronApp.windows()) {
  const { violations } = await new AxeBuilder({ page: window }).analyze();
  expect(violations).toEqual([]);
}

Python example

# The same scan from a Python end-to-end suite
from axe_playwright_python.sync_playwright import Axe

for window in electron_app.windows:
    results = Axe().run(window)
    assert results.violations_count == 0, results.generate_report()

How to check

For each release, a tester completes the 3 main tasks on each shipped platform with the keyboard alone and with the screen reader on. In an Electron or Tauri app, an automated accessibility scan such as axe-core runs on every window in CI and reports no violations.

Sources

• W3C, Guidance on applying WCAG 2 to non-web ICT (WCAG2ICT)
• Electron, Accessibility

Related rules

• AXS-11 Make everything work by keyboard in Accessibility
• AXS-13 Always show where focus is in Accessibility