Rgaa Images

RGAA Images Accessibility Audit (Theme 1)

This skill audits a web page against the 9 criteria of RGAA v4.1.2 Theme 1: Images.

When to use

Trigger this skill when the user asks to audit image accessibility on a web page, check alt texts, verify RGAA Theme 1 compliance, or any request related to image accessibility verification.

Prerequisites

You need access to the page via Claude in Chrome (readpage, getpagetext, javascripttool). Make sure the target page is open in the browser before starting.

Audit procedure

Step 1: Gather page data

Use javascript_tool to extract all image-related elements from the page:

(() => {
  const results = { imgs: [], areas: [], inputImages: [], svgs: [], objects: [], embeds: [], canvas: [], roleImgs: [], iframes: [] };

  //  tags
  document.querySelectorAll('img').forEach(el => {
    results.imgs.push({
      src: el.src?.substring(0, 100),
      alt: el.getAttribute('alt'),
      title: el.getAttribute('title'),
      ariaLabel: el.getAttribute('aria-label'),
      ariaLabelledby: el.getAttribute('aria-labelledby'),
      ariaHidden: el.getAttribute('aria-hidden'),
      role: el.getAttribute('role'),
      hasParentFigure: !!el.closest('figure'),
      parentFigureAriaLabel: el.closest('figure')?.getAttribute('aria-label'),
      hasFigcaption: !!el.closest('figure')?.querySelector('figcaption'),
      width: el.naturalWidth,
      height: el.naturalHeight
    });
  });

  // elements with role="img"
  document.querySelectorAll('[role="img"]').forEach(el => {
    if (el.tagName !== 'IMG') {
      results.roleImgs.push({
        tag: el.tagName.toLowerCase(),
        ariaLabel: el.getAttribute('aria-label'),
        ariaLabelledby: el.getAttribute('aria-labelledby'),
        textContent: el.textContent?.substring(0, 100)
      });
    }
  });

  //  tags
  document.querySelectorAll('svg').forEach(el => {
    results.svgs.push({
      role: el.getAttribute('role'),
      ariaLabel: el.getAttribute('aria-label'),
      ariaLabelledby: el.getAttribute('aria-labelledby'),
      ariaHidden: el.getAttribute('aria-hidden'),
      hasTitle: !!el.querySelector('title'),
      titleContent: el.querySelector('title')?.textContent,
      hasDesc: !!el.querySelector('desc'),
      descContent: el.querySelector('desc')?.textContent
    });
  });

  //  tags
  document.querySelectorAll('area').forEach(el => {
    results.areas.push({
      href: el.getAttribute('href'),
      alt: el.getAttribute('alt'),
      ariaLabel: el.getAttribute('aria-label')
    });
  });

  // 
  document.querySelectorAll('input[type="image"]').forEach(el => {
    results.inputImages.push({
      alt: el.getAttribute('alt'),
      title: el.getAttribute('title'),
      ariaLabel: el.getAttribute('aria-label'),
      src: el.src?.substring(0, 100)
    });
  });

  // 
  document.querySelectorAll('object[type^="image"]').forEach(el => {
    results.objects.push({
      type: el.type,
      role: el.getAttribute('role'),
      ariaLabel: el.getAttribute('aria-label'),
      ariaHidden: el.getAttribute('aria-hidden')
    });
  });

  // 
  document.querySelectorAll('embed[type^="image"]').forEach(el => {
    results.embeds.push({
      type: el.type,
      role: el.getAttribute('role'),
      ariaLabel: el.getAttribute('aria-label'),
      ariaHidden: el.getAttribute('aria-hidden')
    });
  });

  // 
  document.querySelectorAll('canvas').forEach(el => {
    results.canvas.push({
      role: el.getAttribute('role'),
      ariaLabel: el.getAttribute('aria-label'),
      ariaHidden: el.getAttribute('aria-hidden'),
      fallbackContent: el.textContent?.trim().substring(0, 100)
    });
  });

  return JSON.stringify(results, null, 2);
})()

Step 2: Evaluate each criterion

For each criterion, read the detailed checks from references/criteria.md and apply them to the collected data.

Criterion 1.1 – Informative images must have a text alternative. Check every `, , , , , , , and [role="img"] element. If the image conveys information (not decorative), it must have an alt, aria-label, aria-labelledby, or title` attribute.

Criterion 1.2 – Decorative images must be ignored by assistive technologies. Decorative ` must have alt="" and no other text alternative, OR aria-hidden="true" / role="presentation". Decorative must have aria-hidden="true" and no or `.

Criterion 1.3 – Text alternatives must be relevant. When an informative image has an alt text, check that it actually describes the image content meaningfully, not just "image" or a filename.

Criterion 1.4 – CAPTCHA/test images must identify their nature. If a CAPTCHA is present, its alternative should say it is a CAPTCHA and describe its function, not its content.

Criterion 1.5 – CAPTCHAs must have an alternative access method. If a graphical CAPTCHA exists, verify there is at least one alternative (audio, logic, etc.).

Criterion 1.6 – Informative images needing a detailed description must have one. Complex images (charts, infographics) need a longdesc, adjacent link, or aria-describedby pointing to a detailed description.

Criterion 1.7 – Detailed descriptions must be relevant. If a detailed description exists, verify its content is accurate and complete.

Criterion 1.8 – Text images should be replaced with styled text when possible. Flag images that contain only text and could be replaced with CSS-styled HTML text (except logos, trademarks, CAPTCHAs).

Criterion 1.9 – Image captions must be correctly linked. Images with captions must use ` + , with role="figure" and aria-label` matching the caption.

Step 3: Generate the report

Produce a structured report with:

• A summary score (number of criteria passed / total applicable)
• For each criterion: status (✅ Passed, ❌ Failed, ⚠️ Warning, N/A), the elements concerned, and recommendations to fix issues
• An overall compliance assessment for Theme 1

Important notes

• Distinguishing informative from decorative images requires human judgment. Flag ambiguous cases as warnings.
• Alt text relevance is subjective — flag clearly bad alternatives (empty on informative images, filenames, "image", "photo") but note that full relevance assessment may need human review.
• Some tests (like 1.8 on text images) require visual inspection. Use screenshots when needed.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: MTeelokee
• Source: MTeelokee/rgaa-accessibility-audit
• License: MIT

Install and usage instructions live in the source repository linked above.