A practical accessibility checklist for marketers

Video lecture

A practical accessibility checklist for marketers

12 chapters · about 8 min · full transcript

Coming soon

Chapter 1 of 12

An accessibility checklist for marketers

Most barriers live in content
Images, video, text, color, forms
Emails, documents, social posts
AI alt text, reviewed

The narrated lecture is in production

Every chapter is scripted and ready. Browse the chapters and read the full transcript now — the video will appear here when it’s published.

Chapters

Transcript of the narration, chapter by chapter.

0:00 An accessibility checklist for marketers

Here's something that surprises most marketers. Many of the biggest accessibility barriers on the web aren't in the code. They're in the content. An image with no description. A video with wrong captions. A button that says click here. Gray text on a pale background. An email that's one giant picture. And who creates that content? Marketers do. In this lecture, you'll get a practical accessibility checklist you can apply without being a developer, covering images, video, text structure, color, forms, keyboard use, documents, emails and social posts, plus how to use AI for alt text without getting it wrong.

0:43 Why it matters

Why does this matter? Because content is where accessibility is won or lost every single day. Developers might build an accessible template once. But marketers publish new images, videos, emails and posts constantly. If each piece adds a barrier, the site slowly becomes inaccessible again. Think of a well-built library with ramps, lifts and wide doors. If staff keep piling boxes in the aisles, the building's design doesn't matter anymore. Your content habits are the aisles. Keep them clear, and everything else keeps working.

1:20 Images

Start with images. Meaningful images need alt text that describes the content and its purpose, concisely. Instructor demonstrating a video edit on a laptop. Don't start with image of, because screen readers already announce it's an image. Decorative images get empty alt text, so screen readers skip them. Avoid images of text. If you can't, like on a social graphic, put the text in the alt text or caption. For charts and infographics, add a short text summary of the key points. The formula: what it is, plus the key detail relevant to the context, plus any text in the image.

2:04 Video and audio

Video and audio. Every prerecorded video with sound needs captions at Level AA. Auto-captions are a starting point, not an ending. Review and correct them, especially names, brands and mixed-language speech, like English mixed with Urdu or Arabic. Provide transcripts for podcasts and audio. Where important information is only visual, add audio description or descriptive narration. Never autoplay with sound, and always provide controls. And avoid flashing content. No more than three flashes in any one second, because flashing can trigger seizures.

2:40 Text, structure and color

Text and structure. Use headings in order, one heading level one, then level two, then three, describing each section, because screen reader users navigate by headings. Make links descriptive. Download the pricing guide, PDF, not click here. Write in plain language. Mark up lists as real lists. Set the page language correctly, which matters on multilingual sites so screen readers pronounce Arabic, Urdu or English properly. Then color and contrast. Text needs at least four point five to one, or three to one for large text. Buttons and meaningful graphics need three to one. And never use color alone to convey meaning.

3:24 Forms and keyboard

Forms and keyboard. Every field needs a visible label that's properly connected to it. Put instructions before the form, not only in placeholders. Errors must be described in text, say how to fix them, and be announced to assistive technology. Don't set tight time limits without a way to extend. And allow pasting, including into password fields. For keyboard users, everything must work with tab, shift and tab, enter, space and arrow keys. Focus must be visible, move in a logical order, and pop-ups should trap focus while open, close with escape, and return focus when they close.

4:07 Worked example 1: email campaign

Worked example one, simple. An email campaign. Before: a single large image containing all the text, a click here link, and light gray footer text. After: live text with real headings, a hero image with alt text, a button that says shop the Ramadan collection, higher contrast in the footer, and a plain text version. The team checks it with a screen reader and in dark mode. Here's why it matters. When images are blocked, which many email clients do by default, the old email showed nothing at all. The new one still works.

4:48 Worked example 2: 2,000 product images (illustrative)

Worked example two, a business scenario with illustrative details. An online fashion brand in Karachi has two thousand product images and no alt text. Writing it all by hand isn't realistic this quarter. So the team uses an AI assistant to draft alt text in batches, with strict rules: under a hundred and twenty-five characters, describe what matters to a shopper, don't guess fabrics or brands that aren't visible, and reply decorative if it is. A merchandiser reviews every draft. About one in ten gets corrected, usually a wrong color or an invented detail. Top-selling products go first.

5:31 Watch me do it: alt text + captions

Watch me do it. I open a product image in our store's editor and find the alt text field. I paste the image into an approved AI assistant with the context: product listing for a women's linen shirt on a category page. Rules: under a hundred and twenty-five characters, describe what a shopper needs, no guessing. It returns: woman in a white linen shirt with rolled sleeves and a relaxed fit. I check the image. The shirt is actually off-white, cream. I correct it, paste it in, and save. Then I open the product video, download the auto-captions, fix the brand name, and upload the corrected caption file.

6:18 Social and documents

A few quick wins on social and documents. On social platforms, use the alt text option when you post images. Write multi-word hashtags in camel case, capitalizing each word, so screen readers can pronounce them. Put important text in the caption as well as in the image. And avoid decorative Unicode fonts, which screen readers may read letter by letter or skip completely. For documents, prefer an accessible web page to a PDF. If you must publish a PDF, export from a tool that keeps headings and alt text, and run its accessibility checker first.

6:59 Common mistakes and measures

Common mistakes. Missing or useless alt text, like image one two three dot jpg. Uncorrected auto-captions. Choosing heading levels for visual size instead of structure. Emails built entirely as images. Color as the only signal for errors or sale prices. And AI-drafted alt text published without review. How do you measure success? Add an accessibility sign-off to every campaign launch. Then track the share of campaigns that pass it before launch, the share of images on key pages with meaningful alt text, and the share of videos with reviewed captions.

7:38 Recap and try this now

Let's recap. Marketers control many accessibility factors. Write concise, purposeful alt text, and mark decorative images as decorative. Caption and review every video. Use logical headings and descriptive links. Check contrast, and never rely on color alone. Give forms visible labels and clear, announced errors. Make sure everything works with a keyboard. Build emails from live text. And use AI to draft, never to publish unreviewed. Try this now. Run the accessibility quick check on one landing page and one email. Fix the alt text, links and contrast issues you find, and correct the captions on one video.

Most barriers are in content, not code

Marketers control much of what makes a page accessible: images, videos, headings, link text, colors, forms, documents and social posts. This lesson gives you a checklist you can apply without being a developer.

Images and graphics

Alt text for meaningful images: describe the content and purpose concisely ("Instructor demonstrating a video edit on a laptop"). Don't start with "Image of".
Decorative images should have empty alt text (so screen readers skip them).
Images of text: avoid where possible; if unavoidable (e.g. a social graphic), put the text in alt text or the caption.
Charts and infographics: provide a text summary of key points.
Social media: use platforms' alt-text fields; write alt text for important posts.

Alt-text formula
[What it is] + [key detail relevant to the context] (+ [text in the image, if any])
"Poster for the Eid sale: 30% off all abayas, April 10–15."

Video and audio

Captions for all prerecorded video with audio (AA). Auto-captions are a starting point — review and correct them, especially names, brands and mixed-language speech.
Transcripts for podcasts and audio content.
Audio description or descriptive narration where important visual information isn't conveyed in the audio.
No autoplay with sound; provide controls.
Avoid flashing content (no more than three flashes per second).

Text and structure

Headings in order (H1, then H2, H3…) that describe sections — screen-reader users navigate by headings.
Descriptive links: "Download the pricing guide (PDF)" instead of "Click here".
Plain language: short sentences, common words, explain jargon.
Lists marked up as lists, not manual dashes.
Language of the page set correctly (important for multilingual sites so screen readers pronounce Arabic, Urdu or English correctly).
Readable text: avoid long passages in all caps or italics; allow text to resize without breaking the layout.

Color and contrast

Text contrast at least 4.5:1 (normal) and 3:1 (large text) — AA.
UI components and meaningful graphics at least 3:1 against adjacent colors.
Never use color alone to convey meaning (errors, required fields, chart series).

Forms

Every field has a visible label programmatically associated with it.
Instructions before the form, not only in placeholders.
Errors identified in text, describing how to fix them, and announced to assistive technology.
Don't set tight time limits without the option to extend.
Allow pasting into fields (including passwords) and support password managers.

Keyboard and focus

Everything usable with a keyboard (Tab, Shift+Tab, Enter, Space, arrow keys).
Visible focus indicator on every interactive element.
Logical focus order matching the visual order.
Modals trap focus while open and return focus when closed; they can be closed with Escape.

Documents and emails

PDFs: tagged, with headings, reading order and alt text — or provide an accessible web page instead.
Emails: real text (not one big image), sufficient contrast, descriptive links, meaningful alt text, and a logical reading order.

Cognitive accessibility

Consistent navigation and help location.
Clear, predictable interactions — no surprise pop-ups or automatic changes of context.
Break long processes into steps with progress indicators.
Avoid distracting animations; respect reduced-motion preferences.

The marketer's quick check

Accessibility quick check (per page/campaign)
[ ] Alt text on meaningful images; decorative marked decorative
[ ] Captions reviewed on all videos
[ ] Headings in logical order
[ ] Descriptive link and button text
[ ] Contrast checked (text and UI)
[ ] Color not the only cue
[ ] Forms: visible labels, clear errors, paste allowed
[ ] Keyboard: all actions reachable; focus visible, not obscured
[ ] Target sizes adequate on mobile
[ ] No flashing; no autoplay sound
[ ] Page language set; RTL content correctly marked

Worked example: an email campaign

Before: a single large image containing all text, "Click here" link, light gray footer text.

After: live text with headings, the hero image with alt text, button "Shop the Ramadan collection", footer contrast increased, plain-text version provided. Rendering checked with a screen reader and in dark mode.

Common mistakes

Missing or unhelpful alt text ("image123.jpg").
Uncorrected auto-captions.
Heading levels chosen for visual size rather than structure.
Emails built entirely as images.

Hands-on: accessible content in the tools marketers use every day

Alt text in your CMS and social tools. Most platforms have an alt-text field: WordPress's image block, Shopify's image editor, and the accessibility or alt-text options when posting images on major social platforms. Use the formula from this lesson and keep it concise.

Alt text at scale with AI (with review). For large image libraries, an AI assistant can draft alt text, but it can't know your context, and it will sometimes misidentify products or people. Use a prompt like this and review every result:

Write alt text for this product image for an online store.
Context: <page type and purpose, e.g., "product listing for a women's linen shirt, category page">.
Rules: under 125 characters; describe what matters for a shopper (item, color, key detail);
don't start with "Image of"; don't guess brand names, sizes or materials that aren't visible;
if the image is purely decorative, reply "decorative".

Captions. Upload a corrected caption file rather than relying only on auto-captions. A minimal WebVTT file looks like this:

WEBVTT

00:00:00.000 --> 00:00:03.500
Welcome to the spring collection.

00:00:03.500 --> 00:00:07.000
Every piece is made from 100% linen.

Check names, brand terms and mixed-language speech (for example English mixed with Urdu or Arabic) carefully, because auto-captions often get these wrong.

Accessible email HTML basics. If you edit email templates, check for these patterns:

<html lang="en">
  <!-- ... -->
  <h1 style="font-size:24px;">Ramadan collection is here</h1>
  <img src="https://example.com/hero.jpg" alt="Three embroidered kaftans in green, gold and navy" width="600">
  <a href="https://example.com/ramadan" style="background:#0F766E;color:#FFFFFF;padding:14px 24px;">
    Shop the Ramadan collection
  </a>
  <table role="presentation"> <!-- layout tables marked as presentation -->

Social posts. Use camel case for multi-word hashtags (#SmallBusinessTips), put important text in the caption as well as in the image, and avoid decorative Unicode "fonts", which screen readers may read letter by letter or skip.

Documents. Prefer an accessible web page over a PDF. If you must publish a PDF, export from a tool that preserves headings and alt text, and run the built-in accessibility checker in your authoring tool before exporting.

A campaign accessibility sign-off

Add this sign-off to your campaign launch process so accessibility is checked every time, not just once:

CAMPAIGN A11Y SIGN-OFF — [campaign name]
Landing page quick check passed:  [ ] yes  (link to QA notes)
Email checked (live text, alt, contrast, links, plain-text version):  [ ] yes
Videos captioned and reviewed:    [ ] yes   Social alt text added:  [ ] yes
Known issues + fix dates: ______________________   Approved by: ________

How to measure success

Track the share of campaigns that pass the sign-off before launch, the share of images with meaningful alt text on key pages, and the share of videos with reviewed captions. Watch for accessibility feedback and complaints through your contact route.

Summary

Marketers control many accessibility factors: alt text, captions, headings, link text, contrast, forms, keyboard access, documents and emails. Use the quick check on every page and campaign.

Many accessibility barriers live in content that marketers control.
Write concise, purposeful alt text; mark decorative images as decorative.
Review captions, use logical headings and descriptive links.
Forms need visible labels and clear, announced errors; everything must work with a keyboard.

Run the accessibility quick check on one landing page and one email. Fix alt text, links and contrast issues you find, and correct captions on one video.

Enrol for free to save your progress

Reading is always free. Enrol to keep your place, take the final assessment and earn a verifiable certificate.

A practical accessibility checklist for marketers