Pricing tables are everywhere, and so are little checkmarks and other icons to show what is and what isn’t included. Unless you mess up with proper color contrast, visually that’s not a problem. But for screen reader users, those icons often turn into dead ends: either they get announced as “image,” or worse, not at all. In a typical pricing table, each column shows which features are included in a subscription tier. A checkmark image is used to indicate inclusion.

The actual problem

When you insert an image using the Block Editor, WordPress wraps it in a <figure> element. Even if you leave the alt text empty or try to hide it with aria-hidden="true", screen readers still announce things like: “Group… image… blank” or “Image. To interact with this image, press Control-Option-Shift-Down Arrow.”

That’s confusing and meaningless for anyone using assistive tech. Especially in a table layout, you want it to say something like: “Included in single license” or “Not included in single license”

Let me show you how I solved this in WordPress using the Block Editor, with a little help from Greyd.Suite.

An effective workaround

In my experience, this is a great workaround. But if anyone knows an even better one, let me know!

Step 1, add an HTML block before the icon.

In the HTML block you add the following:

<span class="sr-only">Included in [your package / subscription name]</span>

Step 2, group the HTML and image block containing the icon.

You can officially skip the grouping, but doing it that way gives you the opportunity to rename the group. If your pricing table is extensive, this keeps things ordered.

Did you know you can rename groups? It’s a smart thing to do in this case, and save the group as a pattern. Chances are you will need it several times on the same page.

Step 3, add this screen reader-only snippet to your custom CSS

In the Site Editor, go to Styles > Custom CSS and add the code below (you can copy and paste it). This visually hides the text in the span you just added in the HTML block but keeps it fully readable for screen readers.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Step 4, hide the checkmark image from assistive tech with aria-hidden.

Normally you will need custom code or a plugin like Attributes for Blocks but in Greyd.Suite (which replaces over a dozen premium plugins, saving you money, time and headaches), you can add ARIA attributes directly in the Block Editor UI.

Select the Image block and toggle aria-hidden to true.

Why this works

• The image is now truly decorative and ignored by screen readers
• The screen-reader-only text provides the right context: “Included in Single”
• No more weird interaction prompts
• No fighting with the <figure> tag structure