```
```css
.banner {
position: relative;
}
/* The photo fills the banner, and the link covers it. */
.banner img,
.banner-link {
position: absolute;
inset: 0;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* The words sit over the photo and let clicks through to the link. */
.banner-text {
position: relative;
pointer-events: none;
}
.banner:hover .banner-cta {
background: #fff;
color: #2b1a10;
}
```
The link's only content is an image with `alt=""`, so it has no name, and it fails 2.4.4. The pill that says where it goes is a drawing over the link, not part of it.
## Before: the same banner, with an empty link laid over it
```html
Autumn roasts are here
Three new single-origin beans, roasted this week.
Shop the roasts →
```
```css
.banner {
position: relative;
}
/* The photo fills the banner, and the link covers it. */
.banner img,
.banner-link {
position: absolute;
inset: 0;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* The words sit over the photo and let clicks through to the link. */
.banner-text {
position: relative;
pointer-events: none;
}
.banner:hover .banner-cta {
background: #fff;
color: #2b1a10;
}
```
The only change is where the photo sits: outside the link, which is now an empty box over the banner. It looks and works the same, and it fails 2.4.4 the same way.
## After: add the pill's words to the link you have
```html
```
```css
.banner {
position: relative;
}
/* The photo fills the banner, and the link covers it. */
.banner img,
.banner-link {
position: absolute;
inset: 0;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* The words sit over the photo and let clicks through to the link. */
.banner-text {
position: relative;
pointer-events: none;
}
.banner:hover .banner-cta {
background: #fff;
color: #2b1a10;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
```
Adding the words leaves the layout as it is. The banner link is now announced as "Shop the roasts, link", and voice control finds it when someone says the words on the pill. On a banner built the second way, the same `span` goes in the empty link laid over it, and nothing else changes. When the photo is the link's only content, its `alt` can carry the words instead, `alt="Shop the roasts"`, as technique H30 describes: the alt then names where the link goes, not what the photo shows. The name uses the pill's words rather than the headline's because the pill is what reads as the thing to press: WCAG 2.5.3 Label in Name asks that a control's name contains the words that label it on screen, so people can say what they see. Instead of hidden text, the link can take its name from the pill with `aria-labelledby`, pointing at an `id` on the pill, or at the pill and then the headline (technique ARIA7), so the words can't drift apart. Either way, someone reading the banner from top to bottom hears the pill's words twice: once as the link and once as text.
## After: make the pill the link
```html
