WTH, why is the new dashboard section feature inaccessible for screen readers?

First of all, huge thanks to the HA team for all the amazing progress in 2024: automation categorization, AI integrations, and voice assistant development are incredible milestones. But… WTH, why is the new “dashboard with sections” feature so inaccessible for screen reader users?

As a blind user relying on NVDA (screen reader), I’ve encountered serious issues when trying to edit these new dashboards. To illustrate the problem, I created a simple test layout: one panel with a single section containing two media player cards. Despite this simple structure, here’s exactly what NVDA reads while navigating the dashboard in edit mode, using the down arrow key:

Edit user interface
Edit title
Done
Help
Open dashboard menu
Home
Add view
Add badge
Edit
Delete
(empty)
(empty)
(empty)
(empty)
Add card
Edit
Delete
(empty)
(empty)
(empty)
(empty)
Add card
Create section

The “(empty)” lines are especially frustrating, as they correspond to sections and cards but provide no context or details.

Key issues:

  1. Sections are invisible to screen readers. NVDA doesn’t announce section names or indicate their presence. It’s impossible to identify or manage them effectively.
  2. Cards within sections are inaccessible. The screen reader doesn’t provide any details about the cards added to sections. Actions like “Add card,” “Edit,” or “Delete” are announced, but without context about which section or card they relate to.
  3. Badges have similar issues. There’s no clear information about their content or purpose.
  4. No logical structure or hierarchy. The dashboard lacks semantic HTML and ARIA roles, making it confusing for screen readers to navigate. All elements are read in the same flat structure, with no landmarks or headings to guide users.

Suggested improvements:

  • Add ARIA roles and landmarks to sections, cards, and badges.
  • Implement semantic HTML (e.g., headings, regions) to provide a clear structure and hierarchy.
  • Label buttons and actions contextually (e.g., “Edit Section: Living Room” instead of just “Edit”).
  • Manage focus properly when adding or editing elements.
  • Avoid exposing “empty” elements and ensure that every interactable item provides meaningful information.

Could the HA team please provide some insight into plans for improving dashboard accessibility? This would help many users in the community who rely on screen readers.