Accessibility in Angular Block Editor
The Block Editor component is designed to be accessible and follows widely accepted guidelines and standards, including ADA, Section 508, WCAG 2.2, and the WAI-ARIA roles specification.
The accessibility compliance for the Block Editor component is summarized in the table below.
Legend
| Icon | Meaning |
|---|---|
 |
All features of the component meet the requirement. |
 |
Some features of the component do not meet the requirement. |
 |
The component does not meet the requirement. |
The Color Contrast row reflects the component’s built-in default theme. If you apply a custom theme, ensure the text/background combinations in the editor, menus, and toolbars meet your target WCAG contrast ratio (4.5:1 for normal text).
WAI-ARIA attributes
The following ARIA attributes are recommended for the Block Editor to improve discoverability and operable by assistive technologies.
| Attribute | Purpose |
|---|---|
contenteditable="true" + role="textbox"
|
Marks the editable block container as an editable text region. The editable region must have an accessible name to satisfy input-field-name checks. |
role="toolbar" |
Applied to inline formatting toolbars and action-menu containers to group related controls for assistive technologies. |
role="grid" |
Table blocks are exposed as a grid/table for screen readers and keyboard navigation; ensure header cells (th) and proper scope/headers attributes are present. |
role="img" |
Ensure accessible name is present for informative images. |
aria-label / aria-labelledby
|
Provides the accessible name for the editor, toolbar, or specific editable region. |
aria-orientation |
Specifies the orientation of the toolbar. |
aria-disabled |
Indicates whether the toolbar or element is currently disabled and not interactive. |
aria-haspopup / aria-expanded
|
Used by menus and popups (command/context/action menus). aria-expanded reflects open/closed state. |
aria-hidden |
Hides non-interactive or off screen content (e.g., closed popups) from assistive technologies. |
Keyboard interaction
The Block Editor component follows the WAI-ARIA Authoring Practices keyboard interaction guidelines, making it easier for people who use assistive technologies (AT) or rely solely on keyboard navigation. The component supports a variety of keyboard shortcuts for common actions such as inserting, navigating, formatting, and removing blocks.
For a complete list of keyboard shortcuts, refer to the Keyboard shortcuts page.
Ensuring accessibility
The accessibility of the Block Editor component is continuously verified with accessibility-checker and axe-core during automated testing.