Most accessibility problems on a typical WordPress site are added one post at a time, by people who meant well. A heading picked because it looked the right size. A list typed with dashes. A photo of a price sheet instead of a table. None of it is visible to the person writing, and all of it matters to someone using a screen reader or a keyboard.
Block editor accessibility is mostly about knowing which block to reach for and which few settings to check. This post goes block by block through the ones editors use every day, so you can write accessible content in Gutenberg without touching code. It assumes your theme is in reasonable shape; theme problems are a separate job.
Headings: choose the level, not the size
The Heading block has a level selector in its toolbar, H1 to H6. The level should describe where the heading sits in the page outline:
- Your page or post title is normally the H1, added by the theme. You usually should not add another.
- Main sections in the body are H2.
- Subsections inside an H2 section are H3, and so on down.
Do not skip down a level to get smaller text, and do not use a heading for a line you simply want bold. If an H3 looks too big, change its size in the block’s typography settings or ask whoever manages the theme to adjust the global style.
To check your work, open the editor’s document overview panel. It shows the blocks on the page, and current versions include an outline view of your headings, which makes a skipped level or a stray H1 easy to spot. Our post on heading levels and structure covers the reasoning in more depth.
Lists: let the block do the work
If you are writing steps or a set of items, use the List block, numbered or bulleted. A screen reader announces “list, five items,” which tells the listener how much is coming and lets them skip it.
Lines typed with dashes, asterisks or emoji bullets in a Paragraph block are just paragraphs. They look like a list and sound like a run of separate sentences. Typing a dash and a space at the start of a new paragraph usually turns it into a List block automatically; if not, use the block’s transform option to change it.
Buttons: say where they go
The Buttons block outputs links styled as buttons. That is right for navigation, such as “Book an appointment” going to your booking page. Three things to check:
- The text says what happens. “Download the fall class schedule” is better than “Download.” “Get directions to our Austin office” is better than “Click here.”
- The link actually goes somewhere. Empty buttons left from a pattern are tab stops that do nothing.
- Opening in a new tab is a deliberate choice. The link settings let you open a link in a new tab. Use it rarely, and if you do, mention it in the text so nobody is surprised when the back button stops working.
The same thinking applies to links in text. Our guide to descriptive link text has examples of rewriting vague links.
Images: alt text, decorative images and text in pictures
When you add an Image block, the sidebar includes an alternative text field. Our walkthrough on adding alt text to images in WordPress shows where it is and how to write it. A few block-editor specifics:
- Decorative images: if an image adds nothing a reader would miss, leave the alt field empty so screen readers skip it. Do not type “image” or “decorative.”
- Linked images: if the image links somewhere, the alt text should say where, such as “Our menu.”
- Captions are not alt text. A caption is visible to everyone and read in addition to the alt text, so do not repeat the same words in both.
- Cover block text: text placed over an image in a Cover block needs enough contrast across the whole image. The overlay color and opacity settings help.
- Text inside images: a flyer or price list uploaded as a picture cannot be read by a screen reader, resized cleanly or searched. Put the words on the page as real text.
Tables: header rows and captions
For anything laid out in rows and columns, like opening hours, a price comparison or a class schedule, use the Table block. Then check two things in its settings:
- Turn on the header section. This makes the first row a set of real column headers, so a screen reader can say “Tuesday, 9am to 5pm” instead of reading a stream of cells.
- Add a caption that says what the table shows, such as “Fall 2026 opening hours.”
Keep tables simple: one header row, no merged cells, no empty cells used for spacing. Never use a table just to put things side by side; that is what the Columns block is for. Our general post on adding a table in WordPress without a plugin covers the mechanics.
Columns and groups: the reading order
The Columns block lays content side by side on wide screens and stacks it on phones. A screen reader always reads it in the order of the blocks, left column first, then the next, top to bottom.
That is usually fine, but watch for layouts where the visual order and the reading order disagree. If you put a photo in the left column and the heading for the section in the right, a screen reader user hears the image before knowing what the section is about. On a phone, stacked columns follow the same order, so the heading may appear below its own picture. Put the heading first, either above the Columns block or at the top of the first column.
Color settings in the editor
Many blocks let you set text and background colors from your theme’s palette or a custom picker. The editor sometimes shows a warning when the pair you chose may be hard to read. Treat that as a helpful hint, not a pass. It cannot check text over images or gradients, and it does not run on every combination.
Two habits help more than the warning:
- Stick to the theme palette. If the palette’s color pairs are checked once for contrast, every page built from them starts off right.
- Never use color alone to carry meaning. “Items in red are sold out” fails anyone who cannot tell red apart; add a word or a symbol.
If your brand colors are the problem, our post on color contrast requirements under WCAG explains the 4.5:1 and 3:1 ratios and how to adjust colors without losing the look.
Patterns: fix it once, reuse it everywhere
Block patterns are pre-arranged groups of blocks. Your theme ships some, and you can make your own. A synced pattern stays linked, so editing it updates every place it is used.
That makes patterns one of the handiest block editor accessibility tools you have. Build your call-to-action box, team card or contact section once with correct headings, real button text, alt text and good contrast, save it as a pattern, and every editor who inserts it gets the accessible version. If a pattern from your theme uses headings oddly or placeholder links, fix your own copy before it spreads across fifty pages. Our post on block patterns and synced patterns explains how they work.
A quick block editor accessibility check before you publish
- Open the document overview and look at the heading outline. One H1, no skipped levels.
- Scroll through and ask, for each image: does it need alt text, and does it have useful alt text or a deliberately empty one?
- Read every link and button text on its own. Would it make sense out of context?
- Check any colored section or text over images by eye, and with a contrast checker if unsure.
- Preview the page, press Tab through it and make sure you can see where you are.
Once it becomes routine, this takes far less time than fixing the same post later. For the larger order of work across the whole site, see our guide to making a WordPress site accessible.
Frequently asked questions
Is the WordPress block editor itself accessible?
The editor has had a lot of accessibility work from the WordPress community, and many people using keyboards and screen readers use it, though some parts are still easier than others. This post is about something different: making the content you publish accessible to your visitors, which depends on the blocks and settings you choose.
Should I use the Heading block or bold text for section titles?
Use the Heading block whenever the text introduces a section. Screen reader users jump between headings to scan a page, and bold paragraphs are invisible to that kind of navigation. Bold is fine for emphasis inside a sentence, but it should never stand in for a heading.
Do I need a plugin to make Gutenberg content accessible?
No. The core blocks already give you headings, lists, alt text, table headers, captions and color controls. A checker plugin can remind editors about missing alt text or skipped headings, which is useful, but the decisions about meaning and structure still have to be made by the person writing.
Are third-party block plugins accessible?
It varies. Extra blocks for tabs, accordions, sliders and icon boxes come from many different developers, and quality differs. Test each one on a published page with the keyboard and a screen reader before using it widely, and prefer core blocks when they can do the job.
If your site needs more than better editing habits, such as fixing a theme, menus or forms, our WordPress accessibility services take care of the parts editors cannot reach. More background is in our ADA website accessibility help section.
Next in this series: Accessible Navigation Menu: Dropdowns, Mobile, ARIA
