Showcase

Each example shows real output produced by astro-post-audit itself, from files in the project repository. Input on the left, output on the right.

A page with many problems

examples/report.ansiDetail →

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <img src="/photo.jpg">
  <a href="/broken-page/"></a>
  <a href="/about/?ref=nav">About</a>
  <a href="/contact/">mehr</a>
  <button></button>
  <input type="text" name="email">
  <h2>First heading</h2>
  <h4>Skipped heading</h4>
</body>
</html>

✖ astro-post-audit

  Errors: 14   Warnings: 7   Info: 4   Files: 1

  Top issue rules:
       4x  landmarks/content-outside
       3x  links/broken
       1x  buttons/name-missing
       1x  canonical/missing
       1x  document/lang-missing

● index.html (25)
  - Missing canonical tag [canonical/missing] at `head`
    Remedy: Set `site` in astro.config.mjs and render <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site)} /> in your BaseHead component
  - Broken internal link '/broken-page/' -> '/broken-page/' (not found in dist) [links/broken] at `a[href='/broken-page/']`
    Remedy: Verify the route in `src/pages/` or your Content Collection slug. If the target was renamed, update the href.
  - Internal link contains query parameters: '/about/?ref=nav' [links/query-params] at `a[href='/about/?ref=nav']`
    Remedy: Remove query parameters from internal links to avoid duplicate content signals
  - Broken internal link '/about/?ref=nav' -> '/about/' (not found in dist) [links/broken] at `a[href='/about/?ref=nav']`
    Remedy: Verify the route in `src/pages/` or your Content Collection slug. If the target was renamed, update the href.
  - Broken internal link '/contact/' -> '/contact/' (not found in dist) [links/broken] at `a[href='/contact/']`
    Remedy: Verify the route in `src/pages/` or your Content Collection slug. If the target was renamed, update the href.
  - The <html> element has no lang attribute. [document/lang-missing]
    Remedy: The <html> element needs a valid lang attribute.
  - The <title> element is empty. [document/title-empty]
    Remedy: Every page needs a meaningful <title>.
  - The document has no viewport declaration. [zoom/viewport-missing]
    Remedy: A viewport must be present and must not prevent zooming.
  - The document has no h1 heading. [headings/h1-missing]
    Remedy: Headings form the outline; do not skip levels.
  - The image has no alt attribute. [images/alt-missing]
    Remedy: Informative images need descriptive alt text.
  - The input has no label. [forms/label-missing]
    Remedy: Every input needs an associated label.
  - The document has no main landmark. [landmarks/main-missing]
    Remedy: Landmarks structure the page for everyone who cannot see it.
  - The document has no navigation landmark. [landmarks/navigation-missing] (medium confidence)
    Remedy: Landmarks structure the page for everyone who cannot see it.
  - The document has no banner landmark. [landmarks/banner-missing] (medium confidence)
    Remedy: Landmarks structure the page for everyone who cannot see it.
  - The document has no contentinfo landmark. [landmarks/contentinfo-missing] (medium confidence)
    Remedy: Landmarks structure the page for everyone who cannot see it.
  - The link has no accessible name. [links/name-missing]
    Remedy: Every link needs a name that describes its target.
  - The button has no accessible name. [buttons/name-missing]
    Remedy: Every button needs a name that describes what it does.
  - The link text "mehr" says nothing about its target. [links/generic-name] (medium confidence)
    Remedy: Link text should say where it leads without the surrounding sentence.
  - The field "" seems to ask for information about the user but has no autocomplete token. [forms/purpose-missing] (medium confidence)
    Remedy: Fields asking for information about the user carry the matching autocomplete token.
  - Content is not contained in any landmark. [landmarks/content-outside]
    Remedy: All content belongs inside a landmark.
  - Content is not contained in any landmark. [landmarks/content-outside]
    Remedy: All content belongs inside a landmark.
  - Content is not contained in any landmark. [landmarks/content-outside]
    Remedy: All content belongs inside a landmark.
  - Content is not contained in any landmark. [landmarks/content-outside]
    Remedy: All content belongs inside a landmark.
  - Image missing width and height attribute (causes CLS): src='/photo.jpg' [images/missing-dimensions] at `img[src='/photo.jpg']`
    Remedy: Add explicit width and height attributes to prevent Cumulative Layout Shift. Use <Image> from astro:assets to get them automatically.
  - Image has no srcset (no responsive image markup): src='/photo.jpg' [images/missing-srcset] at `img[src='/photo.jpg']`
    Remedy: Use <Image> or <Picture> from astro:assets to generate responsive srcset automatically.

links
accessibility
seo
images

A clean site

examples/check.ansiDetail →

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home - Example Site</title>
  <meta name="description" content="Welcome to Example Site">
  <link rel="canonical" href="https://example.com/">
</head>
<body>
  <header>
    <nav>
      <a href="/about/">About Us</a>
      <a href="/blog/">Our Blog</a>
    </nav>
  </header>
  <main>
    <h1>Welcome to Example Site</h1>
    <img src="/hero.jpg" alt="Hero image showing a beautiful landscape" width="800" height="600">
    <p>This is a well-structured page.</p>
    <button>Click me</button>
  </main>
  <footer>
    <a href="/about/">About</a>
  </footer>
</body>
</html>

ℹ astro-post-audit

  Errors: 0   Warnings: 0   Info: 4   Files: 3

● about/index.html (1) [advisory]
  - The page has navigation but neither a breadcrumb trail nor a link marked aria-current="page". Check that users can tell where they are in the site. [navigation/location-missing] (medium confidence)
    Remedy: Show users where they are: a breadcrumb trail or aria-current="page" in the navigation.

● blog/index.html (1) [advisory]
  - The page has navigation but neither a breadcrumb trail nor a link marked aria-current="page". Check that users can tell where they are in the site. [navigation/location-missing] (medium confidence)
    Remedy: Show users where they are: a breadcrumb trail or aria-current="page" in the navigation.

● index.html (2) [advisory]
  - The page has navigation but neither a breadcrumb trail nor a link marked aria-current="page". Check that users can tell where they are in the site. [navigation/location-missing] (medium confidence)
    Remedy: Show users where they are: a breadcrumb trail or aria-current="page" in the navigation.
  - Image has no srcset (no responsive image markup): src='/hero.jpg' [images/missing-srcset] at `img[src='/hero.jpg']`
    Remedy: Use <Image> or <Picture> from astro:assets to generate responsive srcset automatically.

pass
advisory

Only new findings with a baseline

examples/baseline.ansiDetail →

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>This is an extremely long title that exceeds the recommended sixty character limit for search engine results pages and should trigger a warning</title>
  <meta name="description" content="This is an extremely long meta description that is well over the recommended one hundred and sixty character limit that search engines typically display in their results pages and should definitely trigger a length warning in our checker tool">
  <link rel="canonical" href="https://example.com/long-title/">
</head>
<body>
  <h1>Long Title Page</h1>
</body>
</html>

✖ astro-post-audit

  Errors: 1   Warnings: 3   Info: 3   Files: 4

● long-title.html (7)
  - The document has no main landmark. [landmarks/main-missing]
    Remedy: Landmarks structure the page for everyone who cannot see it.
  - The document has no navigation landmark. [landmarks/navigation-missing] (medium confidence)
    Remedy: Landmarks structure the page for everyone who cannot see it.
  - The document has no banner landmark. [landmarks/banner-missing] (medium confidence)
    Remedy: Landmarks structure the page for everyone who cannot see it.
  - The document has no contentinfo landmark. [landmarks/contentinfo-missing] (medium confidence)
    Remedy: Landmarks structure the page for everyone who cannot see it.
  - Content is not contained in any landmark. [landmarks/content-outside]
    Remedy: All content belongs inside a landmark.
  - Title is 143 chars (recommended max: 60) [html/title-too-long] at `title`
    Remedy: Shorten the title for better display in search results
  - Meta description is 242 chars (recommended max: 160) [html/meta-description-too-long] at `meta[name='description']`
    Remedy: Shorten the description for better display in search results

baseline

Verbose progress

examples/progress.ansiDetail →

postAudit({ progress: 'verbose' })

Auditing 14 pages (0/32)
  seo                           5 finding(s)       0ms
  links                         5 finding(s)       0ms
  a11y_core                   106 finding(s)       0ms
  html_basics                   2 finding(s)       0ms
  sitemap                       0 finding(s)       0ms
  robots_txt                    0 finding(s)       0ms
  assets                        0 finding(s)       0ms
  opengraph                     0 finding(s)       0ms
  structured_data               0 finding(s)       0ms
  hreflang                      0 finding(s)       0ms
  security                      3 finding(s)       0ms
  content_quality               0 finding(s)       0ms
  content_style                 0 finding(s)       0ms
  c2pa                          0 finding(s)       0ms
  i18n_audit                    0 finding(s)       0ms
  crawl_budget                  0 finding(s)       0ms
  css_architecture              0 finding(s)       0ms
  render_blocking               0 finding(s)       0ms
  privacy_security              0 finding(s)       0ms
  structured_data_graph         0 finding(s)       0ms
  golive                        0 finding(s)       0ms
  external_links                0 finding(s)       0ms
  images                       15 finding(s)       0ms
  ai_visibility                 0 finding(s)       0ms
  ux_heuristics                 0 finding(s)       0ms
  fonts                         0 finding(s)       0ms
  view_transitions              0 finding(s)       0ms
  redirects                     0 finding(s)       0ms
  js_bloat                      0 finding(s)       0ms
  content_sync                  0 finding(s)       0ms
  html_validation               0 finding(s)       0ms
  source_analysis               0 finding(s)       0ms
ℹ Checks complete

diagnostics
stderr