--- title: "A practical accessibility checklist for marketers" description: "Most barriers are in content, not code Marketers control much of what makes a page accessible: images, videos, headings, link text, colors, forms…" url: https://optimizeall.com/learn/ui-ux-design-basics-for-marketers/accessibility-checklist-for-marketers updated: 2026-10-05 --- UI/UX Design Basics for Marketers · Accessibility essentials (WCAG basics) · lesson 17 of 21 · 11 min # A practical accessibility checklist for marketers ## 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: ```text Write alt text for this product image for an online store. Context: . 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: ```text 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

Ramadan collection is here

Three embroidered kaftans in green, gold and navy Shop the Ramadan collection ``` **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: ```text 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. ## Video lecture: A practical accessibility checklist for marketers Lecture coming soon · 12 chapters · about 8 minutes. Read the full transcript below. 1. An accessibility checklist for marketers 2. Why it matters 3. Images 4. Video and audio 5. Text, structure and color 6. Forms and keyboard 7. Worked example 1: email campaign 8. Worked example 2: 2,000 product images (illustrative) 9. Watch me do it: alt text + captions 10. Social and documents 11. Common mistakes and measures 12. Recap and try this now ## Lecture transcript ### 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. ### 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. ### 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. ### 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. ### 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. ### 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. ### 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. ### 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. ### 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. ### 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. ### 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. ### 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. ## Key takeaways - 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. ## Try it 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. - [Previous: WCAG 2.2 in practice: the new criteria on real marketing pages](https://optimizeall.com/learn/ui-ux-design-basics-for-marketers/wcag-22-in-practice) - [Next: Testing accessibility with tools and assistive technology](https://optimizeall.com/learn/ui-ux-design-basics-for-marketers/accessibility-testing) - [All lessons of UI/UX Design Basics for Marketers](https://optimizeall.com/learn/ui-ux-design-basics-for-marketers)