Building accessible pricing tables in WordPress with core blocks, Pattern Paste

Canonical: https://patternpaste.com/blog/building-accessible-pricing-tables/

Blog (https://patternpaste.com/blog/) Tutorial

# Building accessible pricing tables in WordPress with core blocks

How to structure multi-tier pricing tables using semantic HTML, correct heading hierarchies, and accessible contrast in the WordPress block editor.

Jake 25 August 2026 2 min read

Pricing tables are among the most visited sections on a commercial website, yet they frequently fail basic web accessibility audits. When built with visual drag-and-drop builders or unreviewed block kits, pricing cards often use visual-only headings, non-semantic icon lists, and unlabelled call-to-action buttons that confuse screen reader users and fail keyboard navigation checks.

You can construct clean, fully accessible pricing grids in WordPress using only standard core blocks.

## Common accessibility failures in pricing layouts#

Audits of commercial pricing components consistently expose three critical structural defects:

- Broken heading hierarchies: Tier names (like "Starter" or "Enterprise") are often styled using <span> or <p> tags with large inline font sizes rather than proper <h3> elements, preventing screen readers from building an outline of available tiers.

- Ambiguous call-to-action buttons: Multiple buttons on the same page labelled simply "Get started" or "Buy now" provide zero context when a screen reader navigates by interactive elements.

- Low-contrast featured badges: "Popular" or "Best value" badges placed on tinted background bands frequently fall below the WCAG AA minimum contrast ratio of 4.5:1 for standard text.

## Structuring the semantic markup#

An accessible three-tier pricing grid relies on a clear container hierarchy:

- A parent section with an <h2> introducing the pricing options.

- A columns block where each column represents one distinct tier.

- Inside each column, an <h3> naming the plan tier, followed by the price, a semantic unordered list (<ul>) for included features, and a uniquely identified button.

Here is the clean core block structure for an individual tier card:

<!-- wp:group {"className":"pricing-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group pricing-card">
  <!-- wp:heading {"level":3,"fontSize":"large"} -->
  <h3 class="wp-block-heading has-large-font-size">Professional</h3>
  <!-- /wp:heading -->

  <!-- wp:paragraph {"style":{"typography":{"fontSize":"2.5rem","lineHeight":"1"}}} -->
  <p style="font-size:2.5rem;line-height:1"><strong>$49</strong> <span style="font-size:1rem;color:var(--wp--preset--color--contrast-muted)">/ month</span></p>
  <!-- /wp:paragraph -->

  <!-- wp:paragraph {"fontSize":"small"} -->
  <p class="has-small-font-size">For growing teams requiring advanced workflow controls and priority support.</p>
  <!-- /wp:paragraph -->

  <!-- wp:list {"className":"pricing-features"} -->
  <ul class="wp-block-list pricing-features">
    <!-- wp:list-item -->
    <li>Unlimited active projects</li>
    <!-- /wp:list-item -->
    <!-- wp:list-item -->
    <li>Advanced permission controls</li>
    <!-- /wp:list-item -->
    <!-- wp:list-item -->
    <li>Standard integrations</li>
    <!-- /wp:list-item -->
  </ul>
  <!-- /wp:list -->

  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
  <div class="wp-block-buttons">
    <!-- wp:button {"width":100} -->
    <div class="wp-block-button has-custom-width wp-block-button__width-100">
      <a class="wp-block-button__link wp-element-button" href="/checkout/?plan=pro" aria-label="Sign up for the Professional plan at $49 per month">Get Professional</a>
    </div>
    <!-- /wp:button -->
  </div>
  <!-- /wp:buttons -->
</div>
<!-- /wp:group -->

## Adding screen-reader context to CTA buttons#

When a visually impaired user tabs through a webpage, their screen reader announces the link text in isolation. If every button in the grid announces "Get started", the user cannot determine which tier they are selecting without re-reading the surrounding card.

Adding an aria-label attribute directly to each button link solves this immediately:

<a class="wp-block-button__link" href="/signup" aria-label="Sign up for the Professional plan at $49 per month">Get started</a>

Sighted users see the concise "Get started" label on the visual button, while assistive technologies announce the complete context including the plan name and price.

## Verifying contrast and keyboard focus#

Before deploying a pricing section:

- Test keyboard tab order: Press Tab repeatedly to cycle through each interactive element. Ensure the focus ring is clearly visible around each tier button and follows a logical left-to-right sequence.

- Inspect contrast ratios: Use Chrome DevTools or Lighthouse to audit contrast between text, badges, and card backgrounds. Accent cards with coloured backgrounds must maintain at least a 4.5:1 contrast ratio against body text and 3:1 against UI borders.

Pattern Paste provides accessible block patterns, including verified pricing layouts like pricing-single (https://patternpaste.com/pattern/pricing-single/) and pricing-tiers (https://patternpaste.com/pattern/pricing-tiers/) tested for WCAG AA compliance. Browse the entire library (https://patternpaste.com/patterns/).

Accessibility (https://patternpaste.com/blog/tag/accessibility/)Patterns (https://patternpaste.com/blog/tag/patterns/)Tutorial (https://patternpaste.com/blog/tag/tutorial/)

## From the library

- Pricing single One plan, set as a collision of scales: a price at display size in the left column against a packed ledger of ten ruled currentColor rows in the right, with one action and one reassurance line under the figure. For a product with a single price, where three columns would be an invention. The figure ships as an obvious placeholder. States no colour and no font of its own. (https://patternpaste.com/pattern/pricing-single.html) Pattern

- Pricing tiers Three pricing tiers where the recommended one is genuinely taller than its siblings and inverts to a contrast ground behind a 2px edge on that same chain, so the recommendation is structural rather than a badge. States no colour and no font of its own. (https://patternpaste.com/pattern/pricing-tiers.html) Pattern

- Pricing duo Two ways to pay for the same thing, head to head and equal, with the saving set in the ruled channel that runs between them. Neither side is taller, tinted or badged: the seam does the arguing. States no colour and no font of its own. (https://patternpaste.com/pattern/pricing-duo.html) Pattern

Try the whole library

### £70 a year Save £50 against paying monthly

All 232 patterns and every variation, every theme download and everything we release next. What you copy is yours to keep.

Start free trial three days of full access on sign-up, no card. No automatic charge. (https://patternpaste.com/account/#plan)

## Read next

- Four ways to add a block pattern to WordPress, and when to use each Paste it, register it in a theme, ship it in a plugin, or configure a synced pattern. Implementation mechanics and trade-offs for each method. (https://patternpaste.com/blog/add-a-block-pattern-to-wordpress/) 26 August 2026

- Why does my WordPress block pattern look different from the demo? Find out which differences come from your WordPress theme, which reveal a broken pattern, and what to check before adding another CSS override. (https://patternpaste.com/blog/why-block-patterns-look-different-from-demo/) 6 September 2026

All posts (https://patternpaste.com/blog/)