Accessibility Checks

Updated

What it helps you do

Catch the accessibility problems that come from content while you write, before visitors meet them. The Dirigible theme takes care of keyboard access, focus, menus and slideshows; what's left is mostly in the words and pictures you add, and automated checkers miss most of it.

The Accessibility panel is in the sidebar of every page and post (open the Page or Post tab). It lists what it finds and offers a fix next to each one. Its title shows how many things there are to fix, for example Accessibility (3).

What it checks

To fix:

  • An image with no alt text. Screen readers can't say what it shows. (An empty alt text on the image is fine when the Media Library has one: the page fills it in.)
  • A linked image with no alt text. On the page, the theme names the link for screen readers from where it goes: "View full-size image" when it opens the image, or the page's title when it opens a page or post on your site. Other links, such as one to another site, are still announced as just "link". Alt text that says what the image shows is better, because it tells visitors what they're looking at as well as where the link goes.
  • A heading that skips a level, like an H2 followed by an H4. Screen reader users move around a page by its headings, and a skipped level looks like something is missing.
  • An empty heading.
  • A link or button with no text.
  • Link text that says nothing on its own: "click here", "here", "this link".

Tips:

  • Alt text that is a file name, such as IMG_1234.jpg or DSC00042.
  • The same vague link text repeated, like three buttons that say "Learn more". Screen reader users often list a page's links, and they all read the same.

The checks cover WordPress's own blocks and Dirigible Blocks. Headings in Dirigible blocks whose level you can't choose (and Grid, FAQ, Icon list and Step by step at their default H4) aren't flagged: the theme adjusts their level on the page so they don't skip.

Fix a problem

Each item has a Show button that selects the block and scrolls to it. Next to it:

  • Change to H3, keep the look (on a heading that skips): changes the heading's level and gives it the matching heading style, so it looks exactly as before.
  • Add alt text: selects the image and opens its alt text field. With Dirigible AI, Generate alt text suggests a description to check and use. See Generate alt text in the page editor.
  • It's decorative: for an image that adds nothing to the page's meaning, like a pattern or a divider. On an Image block it turns on Decorative image in the block's sidebar, so screen readers skip it; on Dirigible blocks it dismisses the suggestion.
  • Remove (on an empty heading).
  • Dismiss: hides that suggestion on this page, for everyone who edits it. Use it when you've checked and the page is right as it is.

The list updates a moment after you stop typing.

Before publishing and after updating

The same list shows in the pre-publish check when you first publish, opened when there's something to fix. After you Update a page that's already published, a message at the bottom of the screen says how many suggestions it has, with a Show button that opens the panel.

Things to know

  • Suggestions only. Nothing stops you saving or publishing, and nothing on the page changes until you click a fix.
  • Everyone who can edit the page sees the panel, from Contributors up.
  • It catches common problems, not every one. It can't tell whether alt text describes the picture well, or check colour contrast yet. For a full check of a live page, use the accessibility audit in Tools & Maintenance.
  • Decorative image appears in an Image block's sidebar when the image has no alt text. Turn it off to describe the image again.
  • Dismissals belong to the page. They're saved with it the next time you save.

Related settings and guides

Built by Dirigible Studio. Get in touch