Built on IBM’s Carbon Design System
Carbon is IBM’s open-source design system, with a decade of engineering, research, and accessibility work behind every component. You get a real type scale and named color and spacing values instead of one-off guesses. AWT brings that system to the block editor without watering it down: the markup, class naming, and behavior match Carbon’s reference implementation.
Everything you get
Accessibility checks
Running inside the editor, on your real content.
Built-in accessibility checker: 14 checks, right where you write
The accessibility checker reviews your content as you write it, on the real page and not a sample. It reads the whole thing: your content, plus the header, footer, and navigation around it.
Every finding appears in five places, so you catch it however you work: a grouped list in the sidebar, a marker on the block itself, a running count in the top bar, a note along the edge of the editor, and one last review in the pre-publish panel. Each finding comes with a plain explanation and a “Show block” button that takes you straight to the problem.
Images
Missing alt text. Alt text that is just the file name. Inline SVG with no accessible name.
Structure
Skipped heading levels. Broken heading order. Blank lines forced with line breaks. Tables without header cells. Missing page language.
Links
Links with no text. Vague link text like “click here” and “read more”. Identical link text pointing at different destinations.
Color
Text contrast below WCAG AA. Colors outside your site’s palette.
An Accessibility panel on every block
Select any AWT block and open its Accessibility panel. At the top is the accessible name a screen reader will announce, computed live as you edit. Below it are the controls that shape that name and more: set an aria-label, point aria-describedby or aria-labelledby at other content on the page, override the element’s role when the design needs it, or set a different language for the block.
Check contrast before you commit
Pick a text or background color and the WCAG contrast ratio updates as you choose, right in the color settings. A badge tells you when normal and large text pass AA, and a warning tells you the moment they don’t.
Navigation, accessible by default
AWT sets aria-current on the navigation item for the current page, so screen-reader users know where they are.
A skip link sits first in the tab order on every page, so keyboard users can jump past the header straight to the content. You set its wording in settings.
Turn on automatic breadcrumbs and every page gains a second way to get around, which is exactly what WCAG 2.4.5 (Multiple Ways) asks for. You control the text for the trail and the home link, and whether it shows on narrow screens.
Light and dark, done right
You control light and dark from three places, and every one holds its contrast:
- Style variations. Four pairings, each a Carbon light theme matched with a dark one. Choose one and it applies across your whole site.
- Site appearance. Follow each visitor’s device, or lock the site to always light or always dark.
- Header appearance. Let the header follow the page or keep its own color scheme, so a dark header above a light page just works.
Show the toggle and your visitors choose light, dark, or “follow my system”. Their choice applies before the page paints, so there is no flash of the wrong theme.
It works with page caching out of the box. The choice is applied in the browser, so one cached page serves both schemes correctly. WP Rocket, W3 Total Cache, LiteSpeed, and the rest need no special setup.
Make the header yours
Start from one of four ready-made header layouts: Marketing, Documentation, Application, or Public sector. Pick one and AWT builds it into your header for you, ready to edit.
Add or remove each icon button at the top right (search, notifications, a user menu, and the light and dark toggle) with a single switch. Search links to your site search out of the box.
Set one logo for light backgrounds and a separate one for dark, and they swap automatically with the color scheme, no JavaScript involved. One alt-text field describes your logo everywhere it appears, so the image always has an accessible name. Any individual header block can override the site-wide defaults.
One settings screen, in plain language
The settings screen covers your site’s identity, appearance, navigation, and tools. A welcome wizard walks you through the essentials the first time, and you can run it again anytime.
Choose a style variation or a header preset and AWT makes the change for you, the same edit you would make by hand in the Site Editor. Set your body text to Compact, Default, or Comfortable, and a live preview shows the result on headings and body copy.
Set up one site the way you want, then export your whole configuration and import it into the next site.
Custom CSS, in action
Custom CSS reaches every color on the site. Insert the built-in example and the whole page changes palette, in light and dark: backgrounds, text, links, and buttons.
HTML you could have written by hand
Open the source of an AWT page and you can read it. Every page starts from the same small skeleton: a skip link, a header, one main landmark, one h1, and a footer. Sections you add in the editor become real <section> elements, each with the accessible name you give it. Here is the outline of this page, with classes removed for readability:
<body>
<a href="#main-content">Skip to main content</a>
<header>…</header>
<main id="main-content">
<h1>Features</h1>
<section aria-label="The design system">…</section>
<section aria-label="Semantic HTML">…</section>
<section aria-label="Everything you get">…</section>
</main>
<footer>…</footer>
</body>The blocks keep it just as clean. A breadcrumb is a <nav> holding an ordered list, a table is a real <table>, a testimonial is a <figure> with a <blockquote>, and controls are native buttons, links, and form fields. Each block adds only the elements it needs. Screen readers get real structure to announce, search engines get real meaning to read, and you get fewer classes to manage.
Switch your existing blocks over in one click
Already have lists, tables, and code on your site? Select one, open Transform to in the block toolbar, and choose the AWT List, Data table, or Code snippet. Your items, cells, and code come with it, including nested lists, links, and bold text. Changed your mind? Transform it back.
Built for more than one language
A page in another language can set its own lang, so assistive tech switches pronunciation to match. You can mark a single block or phrase the same way. The interface itself is translation-ready, with over 1,200 translatable strings across the theme and plugin.
Fast by default
Speed is part of accessibility: heavy pages shut out people on slow connections and older devices. AWT stays light without any tuning on your part.
A page only downloads what it uses. The always-loaded stylesheet is about 15 KB compressed. Each block brings its own styles and scripts, and they load only on pages that use the block. Fonts are self-hosted and follow the same rule: the serif face downloads only on pages with a testimonial.
Hero images load at high priority, so the largest part of the page paints early. Nothing is requested from third-party servers. Every release is tested against its performance budgets.
The result is measurable. This site runs AWT, and its home page scores a perfect 100 in every category of Lighthouse’s audit.
Let your AI agent install AWT and build the pages
AWT has a free skill for AI agents, awt-accessible-wordpress-site-builder. Connect Claude Code, or any agent that reads Agent Skills, to your site over SSH and ask in plain words: install AWT, or make a page. Here is what the agent does:
- Installs AWT on your WordPress site, or updates it. It checks the site first, tells you what will change, and installs only after you say yes.
- Reads what your site has: its blocks, patterns, icons and settings, from the AWT version you run.
- Builds the page from AWT’s own blocks and patterns, so it matches the rest of your site in light and dark mode and on a phone.
- Checks every page before you see it: broken blocks, heading order, alt text, and links or buttons without a name.
- Saves a draft for you to review. When you approve, it publishes or schedules exactly that version and confirms the live page shows it.
- Never writes over your own edits. If anyone changed the page after the agent read it, it stops and asks.
In Claude Code, two commands install it:
/plugin marketplace add useawt/awt-skills
/plugin install awt@awtEverything in one place
The patterns page renders the library live: every pattern, exactly as it inserts.