freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 5.3 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Alternative text and image accessibility

Inside this lesson

  • What alt text does and who uses it
  • Writing alt text for photos, products, and logos
  • Decorative images and empty alt
  • Alt text for linked images and charts

Short answer

Alt text is a short written description in the alt attribute. Screen readers read it aloud, browsers show it if the image fails to load, and search engines use it to understand images. Describe what matters in the image for this page, in about one sentence. If an image is only decoration, use an empty alt="" so screen readers skip it.

Who alt text helps

  • Blind and low vision visitors using screen readers like TalkBack, VoiceOver, or NVDA.
  • Visitors on slow data when images fail to load.
  • Search engines, which read alt text to understand image content for Google Images.

Good vs weak alt text

ImageWeakBetter
Product photoimageAbaca tote bag in natural beige with leather handles
Team photophoto of peopleAna and Ben packing pili tart orders at the bakeshop
LogologoMayon Bakeshop
InfographicchartBar chart: online orders grew from 40 in January to 120 in June

Tips: do not start with image of, since screen readers already say image. Keep it under about 125 characters. Describe what the image is doing on this page.

Decorative images

<img src="images/divider-wave.svg" alt="">

An empty alt, with nothing between the quotes, tells screen readers to skip the image. Use it for borders, background patterns, and icons next to text that already says the same thing. Never remove the alt attribute completely. Without it, some screen readers read the file name.

Linked images and complex images

<a href="/">
  <img src="images/logo.svg" alt="Mayon Bakeshop home">
</a>

When an image is the only thing inside a link, the alt text becomes the link text. Describe the destination. For charts and diagrams, put a short alt and explain the full data in nearby text or a table.

Try it: write alt text

Write alt text for each image. One is decorative, one is a linked logo, and one is a product photo. The preview shows alt text because the images do not exist.

Live preview

Quick quiz

1. Who reads alt text aloud?
2. What alt fits a decorative border?
3. Alt for a logo linking home?
4. Should alt text start with "image of"?

Common mistakes

  • Keyword stuffing alt text. Lists of keywords are spam and useless to listeners.
  • Leaving alt out. Some screen readers then read the file name.
  • Repeating the caption word for word. Listeners hear it twice.
  • Describing every tiny detail. Focus on what matters for the page.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Alt text
A text alternative for an image in the alt attribute.
Screen reader
Software that reads screen content aloud.
Decorative image
An image that adds no information.
Empty alt
alt="" which hides an image from screen readers.
WCAG
Web Content Accessibility Guidelines, the main accessibility standard.

Questions beginners ask

Does alt text help SEO?

Yes, it helps Google understand images and can help in Google Images. Write it for people first.

What about images with text in them?

Put the same text in the alt, or better, use real HTML text instead of an image.

Is there a character limit?

No hard limit, but short and clear works best.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.