astro-post-auditv0.7.0

← All examples

A page with many problems

tests/fixtures/bad/index.html audited with the default rules: broken links, missing lang, title and labels, unnamed controls. The build fails.

A page with many problems

examples/report.ansi
<!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: 2   Info: 4   Files: 1

  Top issue rules:
       3x  links/broken
       1x  buttons/name-missing
       1x  canonical/missing
       1x  document/lang-missing
       1x  document/title-empty

● index.html (20)
  - 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.
  - 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