AEO NIUEXA

Media & Accessibility Checks

15% Weight Check reference Priorities vary by result

This check reference explains how the scanner judges the images, graphics, video and audio on a page: whether they come with text that people and software can read, and whether images keep the page light and stable. This dimension accounts for 15% of your AEO Score.

Why Media Matters: Screen readers, search engines and tools that read your HTML get the text that comes with your media, not the picture or the sound: alt text, labels, captions and transcripts. Most checks here look for that text; the others look at how images affect the page's weight and layout.
How Media is scored. The score is the importance-weighted average of seven checks: Image Accessibility (0.35), Image Optimization (0.20), Video Accessibility (0.15), Responsive Images (0.10), SVG Accessibility (0.10), Figure/Figcaption Usage (0.05) and Audio Accessibility (0.05). All seven rest on official or corroborated evidence, so each counts in full. A check with nothing to look at (no images, no video, no SVG, no audio) is N/A and left out, and so is a check that could not run. A page with no images, video, SVG or audio has no Media score: the dimension is not measured and the other five are re-weighted to fill its 15%.

Text Alternatives

Alt text and labels tell screen readers, search engines and text-based tools what an image or graphic shows.

Image Accessibility

High
What it checks
Looks at up to the first 50 <img> elements. Images that look decorative are left out: an explicitly empty alt="", or a file address with words such as spacer, divider, bullet, arrow, icon-, bg-, background or pattern. For the rest it measures how many have alt text and how good that alt text is.
Why it matters
Alt text describes an image to screen-reader users and to search engines, which cannot see it. WCAG requires it for every meaningful image.
How it is scored
60% from the share of non-decorative images that have alt text, 40% from the average quality of that alt text (see below). 70 or more passes.
Pass: 70 or more Fail: under 70 (high below 50) N/A: no images, or only decorative ones
How to fix
Give every meaningful image a short phrase that says what it shows and why it is there. Use an empty alt="" for decorative images. An Auto-Fix rule can add alt text in visitors' browsers, but most AI fetchers do not run scripts, so use "Copy permanent fix" to put it in your HTML.
Example
<!-- Content image - needs descriptive alt -->
<img src="ceo-headshot.jpg"
     alt="Jane Smith, CEO of TechCorp, smiling in professional attire">

<!-- Product image - include key details -->
<img src="blue-sneakers.jpg"
     alt="Nike Air Max 90 in royal blue, side view">

<!-- Decorative image - empty alt -->
<img src="decorative-line.svg" alt="" role="presentation">
How alt text quality is judged
Each alt text starts at 100 and loses points for being under 10 characters (30) or over 125 (20), repeating the same words (25: more than five words, under 60% of them different), being a placeholder such as "image", "photo", "icon" or "untitled" (30), being a file name such as IMG_4521.jpg (40), starting with "image of", "picture of" or "photo of" (10), or containing runs such as "__" or "--" (15). On Italian pages, Italian placeholders such as "immagine" and "foto di" count too. 
<!-- BAD: Generic or unhelpful -->
<img src="chart.png" alt="image">
<img src="team.jpg" alt="photo">
<img src="product.jpg" alt="IMG_4521.jpg">
<img src="ceo.jpg" alt="Image of a person">

<!-- GOOD: Descriptive and contextual -->
<img src="chart.png" alt="Bar chart showing 40% increase in Q3 revenue">
<img src="team.jpg" alt="Marketing team collaborating in conference room">
<img src="product.jpg" alt="Red leather handbag with gold buckle, front view">
<img src="ceo.jpg" alt="Sarah Chen, CEO, speaking at TechConf 2024">

SVG Accessibility

Medium
What it checks
Finds the SVG graphics on the page: inline <svg> elements (identical copies counted once, definitions inside <defs> or <symbol> left out), <img> files ending in .svg, and .svg files in <object> or <embed>. Each inline SVG is checked for a <title> inside it, or role="img", aria-label or aria-labelledby.
Why it matters
A text label gives an icon or graphic drawn in code a meaning that screen readers and other tools can read. Information that exists only as drawn shapes cannot be read aloud or quoted.
How it is scored
Fails when fewer than half of the inline SVGs have a title or a label. The score starts at 70, rises with the share of labelled inline SVGs and with SVG sprites (<symbol> and <use>), and drops for very complex graphics and for each issue found. Decorative SVGs marked aria-hidden="true" still count as unlabelled here, although hiding them is right for screen readers.
Pass: at least half of the inline SVGs labelled Fail: fewer than half labelled N/A: no SVG on the page
How to fix
Give meaningful SVGs role="img" and a <title> or aria-label; mark purely decorative ones aria-hidden="true". When a chart or infographic carries numbers, state them in the text as well.
Accessible SVG Patterns
<!-- Meaningful SVG - needs accessibility -->
<svg role="img" aria-label="Company growth chart"
     viewBox="0 0 100 100">
  <title>Company Growth Chart</title>
  <desc>A line chart showing revenue growing 45% year over year</desc>
</svg>

<!-- Decorative SVG - hide from assistive tech -->
<svg aria-hidden="true" class="decorative-divider">
  <!-- Decorative pattern -->
</svg>

Image Optimization

Formats, declared sizes and lazy loading that keep image-heavy pages fast and stable while they load.

Image Optimization

High
What it checks
For up to the first 50 <img> elements: how many use loading="lazy", how many are WebP or AVIF (judged from the file address), how many declare both width and height, and whether any are BMP, TIFF or RAW files. The scanner does not download the images, so file size and compression quality are not measured.
Why it matters
Images are often the heaviest part of a page. Modern formats, declared sizes and lazy loading keep pages fast and stop the layout jumping while images load.
How it is scored
Starts at 100 and loses 15 when under 30% of the images are lazy-loaded, 20 when under 20% are WebP or AVIF, 15 when under half declare width and height, and 10 when any image is BMP, TIFF or RAW. 70 or more passes, so one of these issues on its own still passes.
Pass: 70 or more Fail: under 70 N/A: no images
How to fix
Serve WebP or AVIF, give every image width and height, add loading="lazy" to images below the first screen (never to the main image at the top) and compress images, for example with Squoosh or ImageOptim. These attributes belong in your own HTML: Auto-Fix does not change images.
Image Optimization Checklist
<!-- Before: Unoptimized image -->
<img src="photo-original.jpg"> <!-- 2.4MB -->

<!-- After: Optimized image -->
<img src="photo-optimized.webp"
     width="800" height="600"
     loading="lazy"
     alt="Product showcase"> <!-- 95KB -->

# CLI tools for optimization
# ImageMagick - resize and compress
convert input.jpg -resize 800x600 -quality 85 output.jpg

# cwebp - convert to WebP
cwebp -q 80 input.jpg -o output.webp
Modern formats with a fallback
The check reads only the address in <img src>. An image served through <picture> with WebP or AVIF sources and a JPEG fallback counts as JPEG, and so does WebP that a CDN serves from an address ending in .jpg. The pattern below is still good for visitors. 
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero banner" width="1200" height="600">
</picture>
Width and height prevent layout shift
<!-- Width and height let the browser reserve the space before the image loads -->
<img src="product.jpg" width="800" height="600" alt="Red leather handbag, front view">

<!-- Responsive layout: keep the attributes and let CSS scale the image -->
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>

Responsive Images

Serving smaller files to smaller screens.

Responsive Images

Medium
What it checks
Counts the <img> elements with a srcset (images under 50 × 50 pixels by their width and height attributes are skipped), checks that a srcset with width descriptors such as 800w has a sizes attribute, and looks for <picture> elements and art direction (<source media>).
Why it matters
Several image sizes let phones download a small file instead of the full desktop image, which saves data and loads faster.
How it is scored
With three images or fewer the score is 80 when any image uses srcset, otherwise 70. With more, it starts at 50 and adds up to 25 for the share of images with srcset, 15 when every width-based srcset has sizes (10 when most do), 10 for a <picture> element and 5 for art direction. Either way each issue found takes off 5. The score counts in the dimension whether or not the check is marked failed.
Fail: more than three images, under one in five with srcset, and a width-based srcset without sizes Pass: any other case N/A: no images
How to fix
Offer several widths in srcset, add sizes so the browser can pick the right file, and use <picture> when different screens need a different crop.
Srcset Example
<img srcset="product-400w.jpg 400w,
             product-800w.jpg 800w,
             product-1200w.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            600px"
     src="product-800w.jpg"
     alt="Premium leather wallet in brown">

Semantic Media Elements

Using HTML elements that tie an image to the text that explains it.

Figure/Figcaption Usage

Low
What it checks
The share of <img> elements on the page that sit inside a <figure>. Whether the figure has a <figcaption> is reported but not required.
Why it matters
A caption next to an image gives readers and search engines context for what it shows.
How it is scored
Twice the share of images inside a figure, up to 100 (full marks from half of the images). Every <img> counts, including logos and icons, so pages with many small images score lower.
Pass: 30% or more of the images in a figure Fail: under 30% N/A: no images
How to fix
Wrap images that need context, such as charts, diagrams and product photos, in <figure>, with a <figcaption> that says what the image shows or why it matters.
Figure/Figcaption Example
<figure>
  <img src="chart-revenue.png"
       alt="Q3 2024 revenue breakdown by region">
  <figcaption>
    Figure 3: Q3 2024 Revenue by Region.
    North America led with 45% of total revenue.
  </figcaption>
</figure>

Video & Audio Accessibility

Captions and transcripts make spoken content readable by people who cannot hear it and by text-based tools.

Video Accessibility

High
What it checks
For each <video> element in the HTML: whether it has a caption or subtitle track (<track kind="captions"> or kind="subtitles"), or an aria-label or aria-describedby. Embedded players such as YouTube iframes are not checked.
Why it matters
Captions let people who cannot hear the video follow it, and give search engines and text-based tools the words that are spoken. WCAG requires captions for prerecorded video with sound.
How it is scored
The score is the share of videos with captions or a label.
Pass: 80% or more of the videos Fail: under 80% (high) N/A: no <video> elements
How to fix
Add a caption track to every video, keep the player controls and avoid autoplay with sound. Publish a transcript on the page as well: the check does not look for one, but people and text-based tools can read it.
Video with Captions
<video controls preload="metadata" poster="thumbnail.jpg">
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="captions-en.vtt"
         srclang="en" label="English" default>
  <track kind="captions" src="captions-es.vtt"
         srclang="es" label="Spanish">
</video>
Video with Transcript
<article>
  <h2>Product Demo Video</h2>
  <video controls poster="demo-thumbnail.jpg">
    <source src="demo.mp4" type="video/mp4">
    <track kind="captions" src="demo-en.vtt" srclang="en" default>
  </video>

  <details class="video-transcript">
    <summary>View Full Transcript</summary>
    <div class="transcript-content">
      <p><strong>[00:00]</strong> Welcome to our product demo...</p>
      <p><strong>[00:15]</strong> First, let me show you...</p>
    </div>
  </details>
</article>

Audio Accessibility

High
What it checks
Finds <audio> elements and embedded players from podcast services (Spotify, SoundCloud, Anchor, Podbean, Buzzsprout, Transistor, Simplecast). It checks that each <audio> has controls and looks for a transcript: the word "transcript" in the page text, or an element whose class contains "transcript" (on Italian pages also "trascrizione").
Why it matters
A transcript lets deaf readers follow the audio and gives search engines and AI tools text they can read and quote. WCAG requires a text alternative for audio-only content.
How it is scored
The score starts at 70, rises with player controls, a transcript and caption tracks, and drops by 20 for autoplay with sound and by 5 for each issue found. When no <audio> has controls the failure is high, otherwise medium.
Pass: controls on every <audio>, and a transcript (or only one audio item) Fail: an <audio> without controls, or several audio items and no transcript N/A: no audio
How to fix
Add the controls attribute to every <audio>, publish a full transcript on the page with the speakers named, and never autoplay with sound.
Podcast with Transcript
<article class="podcast-episode">
  <h2>Episode 42: The Future of AI</h2>
  <p class="episode-meta">Duration: 45 min | Published: Oct 15, 2024</p>

  <audio controls preload="metadata">
    <source src="episode-42.mp3" type="audio/mpeg">
  </audio>

  <section class="transcript">
    <h3>Full Transcript</h3>
    <p><strong>Host (Sarah):</strong> Welcome to Tech Talk...</p>
    <p><strong>Dr. Chen:</strong> Thanks for having me, Sarah.</p>
  </section>
</article>