H1 with only image alt text
What it is
No <h1> on the page has text, and the first one holds only images with alt text or an inline SVG with a <title>. Screen readers then announce the alt text as the page’s main heading, and crawlers are likely to read it the same way. Most often this is a logo that the theme wraps in an H1, which makes your brand name the main heading of every page that uses the template.
Why it matters
Screen reader users who jump to the main heading hear the image’s alt text, and W3C’s guidance on headings treats the rank 1 heading as the most important one on the page. A logo’s alt text names the site, not the page, on every page alike. Google lists headings among the sources for title links , and text inside an image cannot be selected, translated or resized by visitors.
How Asky checks it
Asky reads the <h1> elements in the page’s raw HTML (JavaScript is not run). The page is reported when none has text after trimming whitespace, and the first holds an <img> with non-empty alt text or an inline SVG with a non-empty <title>; the finding shows that text. An SVG’s <title> and <desc> do not count as heading text. When any H1 has text, this is not reported: a logo H1 before it raises more than one H1 instead. An H1 whose images have empty alt text, or whose SVG has no title, is reported as H1 missing or empty; a CSS background image is not seen.
Reported as a warning with medium severity.
How to fix it
- If the image is a logo in the header, change its wrapper from
<h1>to a link or<div>in the header template, which fixes every page at once. - Make sure the page then has one real H1 in its content, placed before any other heading. A page left without one is reported as H1 missing or empty, and a text H1 after other headings as not the first heading.
- If the image shows the page’s heading as a graphic, replace it with live text styled with CSS.
- Keep one H1: adding a text H1 while the image H1 stays is reported as more than one H1.
- To leave it as it is: if the image is the page’s main heading and its alt text states the topic, such as a campaign wordmark, mark the issue resolved.
Example
On https://example.com/pricing the header template wraps the logo in an H1:
<!-- Before: the H1 is the logo's alt text, "Example Co" -->
<header><h1><a href="/"><img src="/logo.svg" alt="Example Co"></a></h1></header>
<!-- After: the logo is a plain link, and the content has a real H1 -->
<header><a href="/"><img src="/logo.svg" alt="Example Co"></a></header>
<main><h1>Pricing that fits your team</h1></main>