# Feature DREAM-609 - Improve Accessibility of Project Overview and Dashboard Widgets

Project: Stream Design System
Status: closed
URL: https://community.openproject.org/work_packages/DREAM-609

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 17.2.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List | a11y report 2026 |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-639 | Bug | Right side bar from Overview page is read out before main page content | closed |  | 17.3.0 |  | Accessibility, Frontend components and Primer design system, Modules and project features / Project overview |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Accessibility, Modules and project features / Project overview |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | Yes |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Behrokh Satarnejad |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**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.
    
    *   **WCAG:**
        
        *   **2.1.1 Keyboard**
            
        *   **4.1.2 Name, Role, Value**
            
*   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
        
    *   **WCAG:**
        
        *   **1.3.1 Info and Relationships**
            
        *   **2.4.6 Headings and Labels**
            
        *   **1.3.2 Meaningful Sequence**
            
*   Widget content supports accessibility requirements for common content types:
    
    *   Text is readable by screen readers
        
    *   Links have descriptive text and are keyboard accessible
        
    *   Lists, tables, and status messages use semantic HTML
        
    *   **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**
            
*   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
        
    *   **WCAG:**
        
        *   **2.4.3 Focus Order**
            
        *   **2.4.7 Focus Visible**
            
*   Widgets do not introduce keyboard traps (e.g., focus stuck in embedded content).
    
    *   **WCAG:**
        
        *   **2.1.2 No Keyboard Trap**
            
*   The widgets pass automated accessibility checks and are manually tested with keyboard-only and screen reader flows.
    
    *   **WCAG:**
        
        *   Supports conformance with **WCAG 2.1 AA**
            

**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)
        
    *   **WCAG:**
        
        *   **1.3.1 Info and Relationships**
            
        *   **2.4.1 Bypass Blocks**
            
*   Ensure all widgets expose accessible names:
    
    *   Widget titles are unique per page where possible
        
    *   Icon-only actions include `aria-label`
        
    *   **WCAG:**
        
        *   **4.1.2 Name, Role, Value**
            
        *   **2.4.6 Headings and Labels**
            
*   Avoid using non-semantic clickable containers; use `<button>` / `<a>` with correct semantics.
    
    *   **WCAG:**
        
        *   **4.1.2 Name, Role, Value**
            
        *   **2.1.1 Keyboard**
            

**Out of scope:**

*   Images have appropriate text alternatives (alt text) or are marked as decorative when applicable
    
*   Widget reordering (drag and drop)
    
    <br>