Accessibility

Landmark Regions

Landmark regions help screen reader users navigate between different sections of the editor efficiently.

Include ALL content on the page in landmarks so that screen reader users who rely on them to navigate from section to section do not lose track of content.

HTML5 Landmark Elements

Use semantic HTML5 elements that define ARIA landmarks by default:

<header>
  <h1>Block Editor</h1>
</header>

<nav aria-label="Main navigation">
  {/* Navigation content */}
</nav>

<main>
  {/* Primary content */}
</main>

<aside>
  {/* Sidebar content */}
</aside>

Navigate Regions Package

For setting up keyboard navigation between different regions, use the navigateRegions higher-order component:

import { navigateRegions } from '@wordpress/components';

function Editor() {
  return (
    <div className="editor-layout">
      <header>Editor Header</header>
      <main>Block Canvas</main>
      <aside>Inspector Sidebar</aside>
    </div>
  );
}

export default navigateRegions( Editor );

This HOC enables keyboard navigation between the different regions in your editor layout, improving accessibility for keyboard-only users.

Best Practices

Use semantic HTML elements whenever possible
Provide clear labels for landmark regions using aria-label or aria-labelledby
Ensure all interactive elements are keyboard accessible
Test your editor interface with screen readers

General Principles of Landmark Design

Follow W3C guidelines for implementing landmarks:

Keep landmark regions consistent across your application

Use unique labels when multiple landmarks of the same type exist

Avoid excessive nesting of landmark regions

Ensure complementary landmarks (like sidebars) are clearly related to main content

Get Started

Development Environment

Core Concepts

Block Development

Data & State

Guides

Landmark Regions

HTML5 Landmark Elements

Navigate Regions Package

Best Practices

General Principles of Landmark Design

Additional Resources

​Landmark Regions

​HTML5 Landmark Elements

​Navigate Regions Package

​Best Practices

​General Principles of Landmark Design

​Additional Resources

Landmark Regions

HTML5 Landmark Elements

Navigate Regions Package

Best Practices

General Principles of Landmark Design

Additional Resources