Automattic / Automattic/wp-calypso

Feature Request: Improve Accessibility for Adding Blocks in the Block Editor for Screen Reader Users

Open
#98,239 3 comments 0 reactions 0 assignees View on GitHub
Core Fix Needed Customer Report > Direct Customer signal > Cleaned Dotcom > Manage content (block editor experience) Editor Experience Enhancement PE Journey: Core Value PE Score: 3. Moderate PE Segment: General Third Party Fix WordPress.com
Dominant language
TypeScript
Stars
12.6k
Forks
2k
Avg merge
1d 17h
Merged PRs (30d)
552

Description

### What

Add functionality to improve the accessibility of the block editor for users who rely on Screen Readers. Specifically:

- Ensure the cursor is focused on the block search bar when the "Add Block" button is selected.
- Allow users to type the block name (e.g., "image") and press Enter to directly insert the block.
- Automatically focus on the first block option in the list when a user searches for a block, enabling quick selection.

### Why

This was a feature request made here: 9268447-zd-a8c by a visually impaired user who uses Screen Reader to edit their site.

This feature addresses accessibility challenges faced by visually impaired users and Screen Reader users. The current workflow requires navigation and interaction with the screen, which can be difficult.
By automatically focusing the cursor in the block search bar and streamlining block selection, we can reduce friction and make it easier to add blocks.

It solves the problem of:

- Users struggling to locate the search bar and interact with block options.
- Easier accessibility to the block editor for users who have visual impairments.

### How

This is what the user suggested:

1. When a user activates the "Add Block" button, set the focus on the search bar for the block.
2. Allow the user to type the name of the block (e.g., "image") and press Enter to insert it directly into the editor.
3. If multiple block options are available, automatically focus on the first block option in the results list after the user presses Enter.

Contributor guide

Open the contributing guide

Research direction

Start by locating the Block Editor implementation for the “Add Block” button, block search bar, and search results. Trace the current focus and Enter-key behavior, then identify the relevant accessibility tests or test entry points. Done means activating Add Block focuses search, Enter inserts a typed block, and search results support quick focus and selection for screen reader users.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 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.