Automattic / Automattic/jetpack

Admin UI: Use headings for easier screen reader navigation

Open
#6,533 1 comment 0 reactions 0 assignees View on GitHub
[Focus] Accessibility [Pri] Low Admin Page Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 14h
Merged PRs (30d)
790

Description

Screen reader users can navigate quickly through a page by going through an outline of headings. We should update the dashboard & settings pages to use a semantic heading structure. [See the wp core guidelines.](https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#heading-structure)

Given the guidelines above, we should

- Set a single h1 page title
- Use correct headings for card titles (and only the titles, buttons should not be in headings)
- Remove headings from stats numbers
- Use headings for settings cards

These can be hidden visually & only shown for screen-readers if we need to.

Contributor guide

Open the contributing guide

Research direction

Start with the dashboard and settings pages and review the linked WordPress core heading-structure guidelines. Update the page structure to use one h1, appropriate card-title headings without buttons, no headings on stats numbers, and headings for settings cards; headings may be visually hidden when needed for screen readers.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.