Gutenberg and accessibility: what core blocks get right and wrong

The block editor produces cleaner markup than most page builders. It still lets you build an inaccessible page. What to watch, block by block.

A grid of four placeholder content blocks, the last one outlined in red and flagged with an exclamation mark.

Gutenberg gives you a better starting point than most page builders and no guarantees. Core blocks emit lean, mostly semantic HTML. They will still let you skip a heading level, ship an undescribed image, and pick unreadable colours.

Here is what the common blocks actually do.

What core gets right

Semantic output. A Heading block emits a real heading. A Button block emits a real button or link. A List block emits a real list. This is not true of every builder, and it matters.

The image block prompts for alt text. Right there in the sidebar, not three screens away.

Navigation has keyboard support. The core Navigation block handles submenus with the keyboard, which many custom menus do not.

Colour pairs are checked. The editor warns you when a chosen text and background combination is hard to read. It is a warning, not a block, and it does not catch everything, but it is there.

What to watch, block by block

Heading

The level dropdown is right next to the typography controls, which makes it easy to pick a level for its size. The editor has a document outline view — use it, and check one h1 and no skipped levels.

Image

The alt field is prompting, not enforcing. An image with no alt text still publishes.

Note the separate decorative case: if the image carries no information, an empty alt is correct and deliberate. Leaving the field blank on a meaningful image is not the same thing. See how to write alt text.

Cover

The classic contrast trap. Text over an image, with an overlay control that defaults to something too light. Set the overlay opacity high enough and measure the result.

Buttons

A Button block with no text is a button with no name. It happens when somebody uses an icon or leaves a placeholder.

Also check the width settings: a 25 per cent-width button on mobile can fall below the 24-pixel target size minimum.

Columns

Columns reorder on mobile. Check the order still makes sense, because the DOM order is what a screen reader follows, and a visual rearrangement does not change it.

Table

Core tables support a header row. Switch it on. A data table with no header row is unnavigable with a screen reader, because there is nothing to associate the cells with.

Media & Text

Fine, with one catch: the image still needs alt text, and the field is easy to miss in this block’s sidebar.

Group, Row, Stack

These emit divs. If a Group is really a page region — a navigation area, a main content area, a complementary sidebar — it should be a landmark. You can set the HTML element on the block in the Advanced panel: nav, main, aside, section, footer.

Most sites never touch this, which is why main landmark missing turns up so often.

Custom HTML

Anything goes, and nothing is checked. Review these by hand.

Block themes and templates

With a block theme, the header and footer are templates, so a fault there repeats on every page. That is good news: one fix clears hundreds of findings.

When you scan, sort by what comes up most rather than by page. The top of that list is nearly always a template problem.

Patterns and reusable blocks

Worth saying because it confuses people: a pattern’s accessibility problems are real, but they are found on the pages the pattern appears in, not on the pattern itself.

Accessibility Remediation deliberately scans posts and pages only, and not template libraries or pattern collections, because nothing in those is a page a visitor can open and scanning them double-counts every fault. The reasoning is in Choosing what to check.

Questions people ask

Is the block editor itself accessible to use?

It has improved considerably and is usable with a keyboard and a screen reader, though not without friction. That is a separate question from whether the output is accessible, which is what your visitors experience.

Do block themes help?

Somewhat. Leaner markup and fewer plugins mean fewer places to go wrong. The authoring mistakes are identical.

Should I switch from Elementor to Gutenberg for accessibility?

Not on its own. Migrating a site is expensive and the mistakes travel with the author. Fix what you have first. See Elementor accessibility.


To check what your blocks actually produce, the plugin is free on WordPress.org.

Get new posts by email

Occasional notes on WordPress, accessibility and shipping small software. No sequence, no upsell, one click to leave.

We keep your address to send this and nothing else. See the privacy notice, or just email contact@wowstudio.dev instead.