**As** a keyboard-only and screen reader user
**I want to** access, understand, and interact with the content of widgets on the Project Overview and Project Dashboard pages, and reorder widgets using accessible controls
**so that** I can use project widgets effectively without relying on mouse interactions or visual-only cues

**Acceptance criteria**

* All widgets on Project Overview and Project Dashboard pages are accessible and usable with keyboard and screen readers. Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertion**WCAG:**

* **2.1.1 Keyboard**

* **4.1.2 Name, Role, Value**

* End of the insertion Each widget has a clear, programmatic structure:

* A meaningful widget title exposed as a heading

* Content that is readable and navigable in a logical order Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertion**WCAG:**

* **1.3.1 Info and Relationships**

* **2.4.6 Headings and Labels**

* **1.3.2 Meaningful Sequence**

* End of the insertion Widget content supports accessibility requirements for common content types:

* Text is readable by screen readers Begin of the deletion and not rendered only via CSS pseudo-elements or imagesEnd of the deletion

* Links have descriptive text and are keyboard accessible

* Begin of the deletion Images have appropriate text alternatives (alt text) or are marked as decorative when applicable

* End of the deletion Lists, tables, and status messages use semantic HTML Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertion**WCAG:**

* **1.1.1 Non-text Content**

* **1.3.1 Info and Relationships**

* **2.4.4 Link Purpose (In Context)**

* **4.1.2 Name, Role, Value**

* End of the insertion Focus management is consistent:

* Tabbing through a widget follows the visual order

* Focus does not jump unexpectedly between widgets

* Visible focus indicators are present for all interactive elements Begin of the deletion

* Widget reordering (drag and drop):

* Has a fully accessible keyboard alternative (no mouse required)End of the deletion

* Begin of the insertion**WCAG:**

End of the insertion Begin of the deletion Provides clear instructions for keyboard users

End of the deletion * Begin of the insertion**2.4.3 Focus Order**

End of the insertion Begin of the deletion Announces “pick up”, movement, and “drop” results via accessible feedback (e.g., live regions)

End of the deletion * Begin of the insertion**2.4.7 Focus Visible**

End of the insertion Begin of the deletion Maintains logical focus during and after the reorder action

End of the deletion * Widgets do not introduce keyboard traps (e.g., focus stuck in embedded content). Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertion**WCAG:**

* **2.1.2 No Keyboard Trap**

* End of the insertion The widgets pass automated accessibility checks and are manually tested with keyboard-only and screen reader flows. Begin of the insertion

* **WCAG:**

* Supports conformance with **WCAG 2.1 AA**


End of the insertion Begin of the deletion


End of the deletion **Technical notes**

* Define a widget accessibility baseline:

* Widget container uses a consistent pattern (e.g., heading + region)

* Use landmarks/regions where helpful (e.g., `role="region"` with `aria-labelledby` referencing the widget title) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertion**WCAG:**

* **1.3.1 Info and Relationships**

* **2.4.1 Bypass Blocks**

* End of the insertion Ensure all widgets expose accessible names:

* Widget titles are unique per page where possible

* Icon-only actions include `aria-label` Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertion**WCAG:**End of the insertion Begin of the deletion For drag-and-drop reordering:

* Provide keyboard interaction pattern:End of the deletion

* Begin of the insertion**4.1.2 Name, Role, Value**End of the insertion Begin of the deletion Enter/Space to “pick up” a widgetEnd of the deletion

* Begin of the insertion**2.4.6 Headings and Labels**

End of the insertion Begin of the deletion Arrow keys to move position (or move between drop targets)

End of the deletion * Begin of the insertionAvoid using non-semantic clickable containers; use `<button>` / `<a>` with correct semantics.

End of the insertion Begin of the deletion Enter/Space to “drop”

End of the deletion * Begin of the insertion**WCAG:**

End of the insertion Begin of the deletion Escape to cancel

End of the deletion * Begin of the insertion**4.1.2 Name, Role, Value**

* **2.1.1 Keyboard**


**OutEnd of the insertion Begin of the deletion Announce position changes (e.g., “Moved to position 2End of the deletion of Begin of the insertionscope:**

End of the insertion Begin of the deletion 6”)

End of the deletion * Begin of the insertionImages have appropriate text alternatives (alt text) or are marked as decorative when applicable

* Widget reordering (drag and drop)

* End of the insertion Ensure the DOM order matches the visual layout to avoid screen reader confusion. Begin of the deletion

* Avoid using non-semantic clickable containers; use `<button>` / `<a>` with correct semantics.

* (Explicitly excluded) Resizing behavior is not implemented in this feature.


<br>End of the deletion