Accessible advertising: a concept
Advertising pays for many websites. But it is often the biggest barrier on a page: it blinks, starts sound, covers content and traps keyboard focus. It does not have to be that way.
The idea in three sentences
- An ad is a calm box with text, one image and one link – nothing more.
- The website serves the ad itself. There are no third-party scripts from ad networks.
- Every ad is reviewed before it goes live – automatically and by a person.
What it looks like
This is a real ad slot of this website. Try it with keyboard, zoom and screen reader.
12 rules for accessible ads
Clearly labelled as advertising
The word “Advertisement” is visible at the start and present in code. Screen readers announce that an ad region begins.
WCAG rules: 1.3.1 Info and Relationships, 2.4.6 Headings and Labels
Real text instead of text in images
Headline and message are HTML text. That way they can be enlarged, read aloud and translated.
WCAG rules: 1.4.5 Images of Text, 1.4.4 Resize Text
Images with text alternatives
Every ad image describes what matters. Decorative images are hidden from assistive technology.
WCAG rules: 1.1.1 Non-text Content
Enough contrast
Text at least 4.5:1, better 7:1. Buttons and borders at least 3:1.
WCAG rules: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast
No motion by itself
Nothing moves, blinks or rotates automatically. Animation starts only on request and can be paused.
WCAG rules: 2.2.2 Pause, Stop, Hide, 2.3.1 Three Flashes or Below Threshold, 2.3.3 Animation from Interactions
No sound by itself
Video and audio never start automatically. Videos have captions.
WCAG rules: 1.4.2 Audio Control, 1.2.2 Captions (Prerecorded)
Operable by keyboard
The ad is a normal link or button with a visible focus. Focus does not get stuck inside the ad.
WCAG rules: 2.1.1 Keyboard, 2.1.2 No Keyboard Trap, 2.4.7 Focus Visible
Says where the link goes
“See the offer from Example Ltd” instead of “Click here”. If a new window opens, it says so.
WCAG rules: 2.4.4 Link Purpose (In Context), 3.2.5 Change on Request
Covers nothing and does not jump
No overlays, no pop-ups. The space is reserved in advance so the text does not shift.
WCAG rules: 2.4.11 Focus Not Obscured (Minimum), 3.2.1 On Focus, 2.2.4 Interruptions
Large click targets
Buttons are at least 44 × 44 pixels. A close button is never tiny.
WCAG rules: 2.5.8 Target Size (Minimum), 2.5.5 Target Size (Enhanced)
Works with zoom and on phones
The ad adapts to 320 pixels width and 400% zoom. No sideways scrolling.
WCAG rules: 1.4.10 Reflow, 1.4.12 Text Spacing
No tracking, no deception
No cookies, no fingerprinting, no fake close buttons, no artificial time pressure.
WCAG rules: 2.2.1 Timing Adjustable, 3.2.4 Consistent Identification
Technical requirements for ad partners
Ad partners deliver building blocks – not code. The website builds the ad from them.
| Building block | Requirement |
|---|---|
| Headline | Text, at most 60 characters |
| Body text | Text, at most 200 characters, plain language |
| Image (optional) | One still image without text in it, with a text alternative, at most 100 kilobytes |
| Link | One destination, one meaningful link text, no tracking parameters |
| Language | State the language of the ad so screen readers pronounce it correctly |
| Not allowed | Scripts, iframes, autoplaying video and audio, animated images, pop-ups, cookies |
The code behind it
<aside class="ad-slot" aria-labelledby="ad-title">
<span class="ad-label">Advertisement</span>
<h3 id="ad-title">Headline of the ad</h3>
<p>Short text in plain language.</p>
<a href="https://example.org/">See the offer from Example Ltd</a>
</aside>The aside element tells assistive technology: this region is not part of the main content. The heading gives the region a name. The box has a fixed minimum height so nothing shifts while loading.
Review process before publication
- Automated check: length, contrast, text alternative, image size, forbidden content.
- Review by a person: is the text understandable? Is the text alternative meaningful? Is nothing misleading?
- Test of the finished page with this site’s checker, with keyboard and with a screen reader.
- A report link on every ad: anyone who finds a barrier can report it with one click.
Why it pays off
- Reach more people: about one in six people lives with a disability.
- Faster pages: without ad scripts the page loads much faster.
- No cookie banner needed: without tracking there is nothing to consent to.
- More trust: calm, honest advertising is blocked less often.
Status of this siteThere is currently no paid advertising on wcag.dehl.net. The ad slot above is an example of this concept.