Requests &amp; features specific to accessibility and ease of use by users with varied needs.

Backlog

Next up

In Progress

Done

Accessibility

<ul><li>Live regions use aria-live where needed (e.g. form validation, async updates)</li><li>Modals use role="dialog" and aria-modal="true"</li><li>ARIA roles, states, and properties are used appropriately (but not overused)</li><li>Tooltips, dropdowns, and popovers are keyboard-accessible and screen-reader-friendly</li></ul>

In Review

Dynamic Content & ARIA

Joe Pacal

Conduct ACR assessment and make the report available.

Conduct ACR Assessment

Complete a VPAT assessment and create make the report available.

Conduct VPAT Assessment

Enable user choice of fonts for dyslexic users. Integrating OpenDyslexic <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://opendyslexic.org/">https://opendyslexic.org/</a>

Integrate Dyslexia-Friendly fonts

Enable navigation by keyboard and with screenreaders. <ul><li>All interactive elements (links, buttons, form inputs) are reachable via Tab</li><li>Tab order is logical and intuitive</li><li>:focus state is visible and styled (not removed by CSS resets)</li><li>Modal dialogs trap focus while open, and return focus when closed</li><li>Skip link available to jump to main content (&lt;a href="#main-content"&gt;Skip to content&lt;/a&gt;)</li></ul>

Planned

Keyboard navigation

<ul><li>Buttons use &lt;button&gt;, not &lt;div&gt; or &lt;span&gt; with click handlers</li><li>Each button/link has a clear and unique label (no duplicate “Click here”)</li><li>Icons or SVGs have accessible names (aria-label, title, or hidden text)</li><li>Toggle buttons (e.g. hide/show password) use aria-pressed or similar</li></ul>

Buttons, Links & Controls

Ensure full integration of ARIA labels across the UI.<ul><li>All inputs have associated &lt;label&gt; elements or aria-label</li><li>Error messages are programmatically associated with inputs (aria-describedby)</li><li>Required fields are indicated both visually and programmatically</li><li>Form validation errors are announced to screen readers</li><li>Autofocus is not misused (especially for modal inputs)</li></ul>

Ensure Accessibility of Forms & Inputs

<ul><li>All pages have a unique &lt;title&gt; tag that updates per view</li><li>Landmarks used (e.g., &lt;header&gt;, &lt;main&gt;, &lt;nav&gt;, &lt;footer&gt;) for screen readers</li><li>Language is declared in &lt;html lang="en"&gt;</li><li>Zoom: App functions correctly up to 200% zoom without horizontal scroll</li><li>No reliance on color alone to convey information</li></ul>

Completed

Ensure Global App-Level Accessibility

Define and create accessibility policies and best practices to operationalize accessible product updates during design &amp; development.

Create Accessibility Policies

Create an accessibility compliance roadmap and prioritize.

Draft accessibility roadmap

Ensure that color contrast complies with contrast ratios AA+ under WGAC.<ul><li>Text has contrast ratio of at least 4.5:1 (normal text) or 3:1 (large text)</li><li>UI components (borders, icons, states) have 3:1 contrast minimum</li><li>Colorblind-friendly palettes used (or alternate patterns/icons for alerts, charts)</li></ul>

Wonders AI - Research Workspace

Accessibility