Agent Wranglers

AXS-69Recommended

Make the editor help people publish accessible content

If your product lets people publish pages, posts or emails, its editor offers headings, lists, alt text and table headers. It warns before publishing on a missing alt text, a skipped heading level, an empty link or a table without headers.

By Agent Wranglers. Updated .

How to do it

EN 301 549 clause 11.8 asks authoring tools to enable and guide accessible content, and ATAG 2.0 gives the details. Offer heading levels in the toolbar, not font sizes alone. Run the checks on save and show each problem with a fix, as ATAG asks for repair help. An AI draft of alt text is a suggestion that the author accepts, edits or rejects, and never a file name. Uploaded images follow Ask the uploader to describe each image. Keep alt text and headings when you convert the content, such as to email or PDF, as clause 11.8.3 asks.

Examples

JavaScript example

export function authoringWarnings(doc) {
  const warnings = [];
  doc.querySelectorAll('img:not([alt])').forEach(() => warnings.push('image-alt'));
  let level = 1;
  for (const h of doc.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
    const next = Number(h.tagName[1]);
    if (next > level + 1) warnings.push('heading-skip');
    level = next;
  }
  doc.querySelectorAll('a').forEach(a => { if (!a.textContent.trim() && !a.querySelector('img[alt]')) warnings.push('empty-link'); });
  doc.querySelectorAll('table').forEach(t => { if (!t.querySelector('th')) warnings.push('table-headers'); });
  return warnings;
}

Python example

def authoring_warnings(soup):
    warnings = ["image-alt" for img in soup.find_all("img") if not img.has_attr("alt")]
    level = 1
    for h in soup.find_all(["h1", "h2", "h3", "h4", "h5", "h6"]):
        nxt = int(h.name[1])
        if nxt > level + 1:
            warnings.append("heading-skip")
        level = nxt
    warnings += ["empty-link" for a in soup.find_all("a") if not a.get_text(strip=True) and not a.find("img", alt=True)]
    warnings += ["table-headers" for t in soup.find_all("table") if not t.find("th")]
    return warnings

How to check

A test saves a draft with an image without alt text, a jump from h2 to h4, an empty link and a table without headers. The editor shows 4 warnings before publishing. Once they are fixed, the published page passes the automated scan.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/accessibility/media-documents-and-email/authoring-checks">Agent Wranglers accessibility playbook</a>. In code you write, add a comment next to it with the same link.