Skip to content

Accessibility

Usable by more people, with plain structure, visible affordances, and fewer tricks.

  • A pull quote is not a block quote

    A pull quote is not a block quote

    Here is another WordPress bug that hides in plain sight — not in a character this time, but in a tag.

    Drop a Pull Quote block into a post. It looks like a callout: a line of the article, blown up and set aside so the eye catches it on the way down the page. Useful, handsome, and — under the hood — wearing the wrong clothes.

    This is what core saves and serves for a pull quote:

    <figure class="wp-block-pullquote">
      <blockquote>
        <p>The web is the canvas.</p>
        <cite>Dirtbag</cite>
      </blockquote>
    </figure>

    A <blockquote> with a <cite>. That is the markup for a quotation — text taken from somewhere else and set into the flow of your own. The regular Quote block produces almost exactly the same thing, and that is the tell: WordPress treats a pull quote as if it were just a fancier block quote.

    It isn’t. They are different animals that happen to look alike.

    An article column with one line lifted into the right margin as a large italic pull quote reading "A pull quote is not a block quote," labelled as an aside, with a struck-through blockquote and cite below.

    One quotes; the other repeats

    A block quote belongs to the main text. It quotes an external source, so it sometimes carries a citation — that is exactly why <cite> lives inside <blockquote>, the way <figcaption> lives inside <figure>.

    A pull quote is the opposite kind of thing. It is paratextual: it lifts, repeats, or paraphrases a line that is already in the article and pushes it out into the margin, like a gloss in an old manuscript. It quotes nothing external. It never has a citation. Its whole job is to repeat the main text in a way the eye can grab.

    That repetition is the crux. Because a pull quote duplicates content that is already on the page, anything that consumes the page without the visual styling needs to be able to tell it apart and skip it. A screen reader shouldn’t read the sentence twice. A print stylesheet, an RSS-to-Markdown pass, a JSON export — none of them should trip over a paragraph that was only ever meant to be decorative.

    HTML already has the right element for exactly this, and it is not <blockquote>. It is <aside>. The HTML5 specification all but names the case:

    The element can be used for typographical effects like pull quotes or sidebars … and for other content that is considered separate from the main content of the page.

    HTML — The aside element

    And browsers and assistive technology already act on it: an <aside> is a landmark (the same as role="complementary"), so screen-reader users can jump over it and keep reading the article. Mark a pull quote as an <aside> and the duplication problem solves itself.

    What it should be

    Same visible callout, honest markup:

    <figure class="wp-block-pullquote">
      <aside>
        <p>The web is the canvas.</p>
        <p class="wp-block-pullquote__attribution">Dirtbag</p>
      </aside>
    </figure>

    No <blockquote>, because nothing is being quoted. No <cite>, because there is no source to cite — the line came from the article itself. The attribution, if there is one, is just a label, so it is a plain paragraph.

    Why this belongs upstream

    Dirtbag has tested a tiny plugin that rewrites the pull quote’s front-end output to the markup above — a render_block filter that swaps the <blockquote> for an <aside> and demotes the <cite>. It is the same move as the apostrophe fix: demonstrate the correct output without pretending a theme should be in charge of it.

    Because the real fix belongs in core. The block editor still saves a <blockquote>, so a front-end filter only paints over the rendered page; it can’t change what is stored or what the editor shows. Fixing that means changing the Pullquote block’s saved markup — with a block deprecation so the millions of existing pull quotes keep validating — or giving the Quote block a choice of HTML element so authors can pick <aside> themselves.

    There is an open discussion about exactly this: Gutenberg #11610, which proposed deprecating the Pull Quote block in favour of the Quote block. The proposal had the relationship backwards — the two blocks aren’t redundant, they’re semantically distinct, and collapsing them would lose the one thing the pull quote needs to say about itself. The element is the fix.

    The Dirtbag lesson

    Like the curled apostrophe and the floated headline, this is one small inherited default doing something that looks fine and reads wrong. The page renders. The callout looks great. But the markup tells every non-visual reader of the page that a line of your own article is a quotation from somewhere else — and hides nothing, skips nothing, repeats everything.

    A pull quote is not a block quote. The browser can’t see the difference. The spec already did.

  • Plain HTML still just works

    A reminder that documents are already responsive before we start decorating them.

    <main>
      <article>Hello, road.</article>
    </main>

    That is enough structure for a lot of sites.

  • A Table, a Caption, and a Cheap Folding Chair

    A Table, a Caption, and a Cheap Folding Chair

    Tables get weird fast when they are treated like layout furniture. A real table is for data. It needs headings, rows, and a caption that tells you why the thing exists before the cells start muttering.

    PartDirtbag rule
    CaptionUse the WordPress Table block figcaption, not a raw table caption that breaks the editor.
    HeadersUse scoped table headers for rows and columns.
    LayoutIf it is not data, use headings, lists, or paragraphs instead.
    Table manners for a cheap folding chair website

    The goal is not fancy. The goal is that a screen reader, a browser, and a tired human can all get through it.