Intro to Web Accessibility and SEO: Building Inclusive & Search-Friendly Websites

📘 Chapter 4: Optimizing Images, Media & Alt Text for Inclusivity and SEO

🎯 Introduction: Visual Content That’s Accessible and Searchable

Images and media play a critical role in web design and content engagement. However, when not implemented properly, they can pose barriers for users with disabilities and cause your content to rank poorly in search engines.

This chapter teaches you how to:

• Use alt text for accessibility and SEO
• Make images and media keyboard- and screen reader-friendly
• Optimize video and audio with transcripts and captions
• Improve performance through lazy loading and responsive formats
• Use schema and best practices to enhance visibility and inclusivity

📷 1. The Role of Images in UX, Accessibility & SEO

Images serve multiple purposes:

• Visual explanation (e.g., charts, screenshots)
• Emotional engagement (e.g., hero images)
• Branding and trust (e.g., team photos, logos)

But for those who:

• Use screen readers
• Browse with images disabled
• Have slow connections or visual impairments
  ... images need to be accessible and meaningful.

🧠 2. What Is Alt Text?

Alt text (alternative text) is the textual description of an image that:

• Is read aloud by screen readers
• Appears when the image fails to load
• Helps search engines understand image content

🔹 Syntax Example:

html

CopyEdit

<img src="product.jpg" alt="Front view of red running shoes with white sole">

🟩 3. Writing Good Alt Text

✅ Best Practices:

• Be specific and concise
• Don’t use “image of…” (screen readers already know it’s an image)
• Use empty alt (alt="") for purely decorative visuals
• Include keywords when relevant, but don’t stuff

❌ Bad Alt Text:

html

CopyEdit

<img src="photo1.jpg" alt="photo">

✅ Good Alt Text:

html

CopyEdit

<img src="team.jpg" alt="Our support team smiling in the office">

🔄 4. Decorative Images: When and How to Skip Alt Text

✅ Decorative image:

html

CopyEdit

<img src="border.jpg" alt="">

• It’s ignored by screen readers
• Used when images are only visual embellishments

Never leave out the alt attribute entirely — always use an empty string for decorative images.

🎞️ 5. Video & Audio Accessibility

🔸 Captions

• Help users who are deaf or hard of hearing
• Also useful in noisy environments

🔸 Transcripts

• Benefit screen reader users
• Enable search engine indexing of spoken content

🔸 Audio Descriptions

• Describe important visual content for blind users

✅ Example:

html

CopyEdit

<video controls>

  <source src="intro.mp4" type="video/mp4">

  <track kind="captions" src="captions.vtt" srclang="en" label="English">

</video>

💬 6. SEO Benefits of Optimized Media

Search engines can’t “see” images and videos. They rely on:

• Alt text
• File names
• Captions
• Context (surrounding text)
• Structured data

✅ Optimize file names:

html

CopyEdit

<img src="black-leather-office-chair.jpg" alt="Black leather office chair with steel frame">

Improves ranking in Google Images and product search.

⚡ 7. Performance Optimization: Lazy Loading, Format, and Responsiveness

🔹 Lazy Loading

Delays image loading until they enter the viewport.

html

CopyEdit

<img src="team.jpg" alt="Company team at event" loading="lazy">

🔹 Responsive Images

html

CopyEdit

<img src="photo.jpg"

     srcset="photo-small.jpg 480w, photo-medium.jpg 768w, photo-large.jpg 1200w"

     sizes="(max-width: 768px) 100vw, 50vw"

     alt="City skyline at dusk">

🔹 Modern File Formats

• Use: .webp, .avif
• Avoid: Large uncompressed .png unless transparency is needed

🧾 8. Image Sitemap and Structured Data

Help search engines discover and index your media more efficiently.

🔸 Image Sitemap:

xml

CopyEdit

<url>

  <loc>https://example.com/product1</loc>

  <image:image>

    <image:loc>https://example.com/images/product1.jpg</image:loc>

    <image:title>Ergonomic Office Chair</image:title>

  </image:image>

</url>

🔸 Schema for Images (JSON-LD):

html

CopyEdit

<script type="application/ld+json">

{

  "@context": "https://schema.org",

  "@type": "ImageObject",

  "contentUrl": "https://example.com/image.jpg",

  "description": "Red gaming chair with adjustable armrest"

}

</script>

🧠 9. Common Media Accessibility Issues

💡 10. Testing Tools for Image & Media Accessibility

• WAVE Tool – Highlights missing alt text
• axe DevTools – Accessibility issues in media and ARIA
• Screen readers (NVDA, JAWS, VoiceOver)
• Chrome Lighthouse – Accessibility audit for media tags
• Google Search Console – Image indexing coverage

🧩 Bonus Tips for Developers & Content Creators

• Use CMS plugins that enforce alt text (e.g., WordPress plugins like Yoast SEO or A11Y Toolkit)
• Avoid using images with embedded text (screen readers can't parse them)
• When using icon fonts or SVGs, always provide aria-label or <title> inside SVG

📋 Recap Table: Image & Media Optimization