Accessibility – Keyboard, ARIA & High‑Contrast

Accessibility – Keyboard, ARIA & High‑Contrast

• Keyboard navigation – ensure every interactive element is focusable (tabindex, proper <button> tags).
• Use ARIA landmarks (role="dialog", aria‑label) to describe custom components.
• Test with NVDA (Windows) or VoiceOver (macOS) to hear how the app is read.
• Electron respects the OS’s high‑contrast mode; style your UI with relative colors (currentColor, systemColor).
• Example of an accessible custom button in a renderer:

<button id="saveBtn" aria-label="Save document">💾 Save</button>

• In the main process you can query the OS’s accessibility settings:

const { systemPreferences } = require('electron');
const highContrast = systemPreferences.isHighContrastColorScheme();