The alt Attribute – Accessibility Essential

Technical Deep Dive & Specifications

The Accessibility Tree & Screen Reader Pipeline

Browsers maintain two primary internal tree structures:

1. The DOM Tree (Document Object Model): Represents all HTML tags and attributes for rendering and scripting.
2. The Accessibility Tree (a11y Tree): A filtered, semantic representation of the DOM passed directly to OS-level assistive APIs (UI Automation on Windows, NSAccessibility on macOS/iOS, AT-SPI on Linux).

   HTML Markup: <img src="cart.svg" alt="View shopping cart (3 items)">
                            |
                            v
   +-----------------------------------------------------------------+
   | DOM Element: HTMLImageElement                                   |
   +-----------------------------------------------------------------+
                            |
                            v (Computed by Browser Engine)
   +-----------------------------------------------------------------+
   | Accessibility Node                                              |
   | - Role: "image" (or "graphic")                                  |
   | - Accessible Name: "View shopping cart (3 items)"               |
   +-----------------------------------------------------------------+
                            |
                            v
   +-----------------------------------------------------------------+
   | Screen Reader (NVDA / VoiceOver / JAWS) Output:                 |
   | "Graphic, View shopping cart (3 items)"                         |
   +-----------------------------------------------------------------+

The Crucial Difference: alt="" vs. Omitted alt

This is one of the most critical rules in web development:

[!CAUTION] When the alt attribute is omitted entirely, the browser is forced to guess. Screen readers will often announce: "Graphic, https slash slash cdn dot company dot com slash assets slash upload underscore 77291a dot jpeg". This creates a frustrating, hostile user experience for blind users.

The W3C Alt-Text Decision Tree

                                  [ Does the image exist? ]
                                             |
                                             v
                       [ Does the image convey critical information? ]
                                     /               \
                                   YES                NO
                                   /                    \
  [ Is the image inside an <a> or <button>? ]     [ Is it purely decorative? ]
          /                     \                          /            \
        YES                      NO                      YES             NO
        /                         \                      /                 \
 [ FUNCTIONAL ]            [ INFORMATIVE ]         [ DECORATIVE ]      [ COMPLEX CHART ]
 Describe action:          Describe meaning:       Use null alt:       Use short alt +
 alt="Print invoice"       alt="Smiling team"      alt=""              detailed text fallback

The 5 Functional Categories of Alt-Text

1. Informative Images: Images that visually add new concepts, instructions, or context to the page.
   • Example: An infographic illustrating photosynthesis.
   • Alt rule: Summarize the visual finding concisely.
2. Decorative Images: Stylistic flourishes, borders, background gradients, or images already described verbatim in adjacent text.
   • Example: A decorative swoosh line under a heading.
   • Alt rule: Use alt="" (empty string) to remove it from the Accessibility Tree.
3. Functional Images: Images that act as interactive triggers (inside <a> or <button>).
   • Example: A printer icon that prints the document.
   • Alt rule: Describe the action (alt="Print document"), NOT the appearance (alt="Black printer icon").
4. Images of Text: Visual graphics containing rendered typographic text (logos, promotional banners).
   • Example: A company logo banner reading "Cyber Monday 50% Off".
   • Alt rule: Transcribe the exact words contained within the image (alt="Cyber Monday 50% Off").
5. Complex Images: Data charts, architectural diagrams, schematics, and maps.
   • Example: A multi-line quarterly sales chart.
   • Alt rule: Provide a high-level summary in alt, and provide full data in an adjacent HTML <table> or <figcaption>.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 46 (alt="A scientist in a cleanroom..."): Provides a vivid, contextual description of the visual scene.
• Line 58 (<img src="..." alt="" width="20" height="20">): Inside the <button>, the text label "Print Invoice" is already present in the DOM (<span>Print Invoice</span>). Giving the printer icon an alt="Print" would cause a screen reader to announce: "Graphic Print, Print Invoice button". Using alt="" silences the decorative icon, ensuring the screen reader announces only "Print Invoice, button".
• Line 72 (alt="" role="presentation"): Explicitly removes the horizontal divider graphic from the Accessibility Tree.

Expected Browser Render Output

+-------------------------------------------------------------+
| WCAG 2.2 Alt-Text Implementation Showcase                   |
|                                                             |
| [1. Informative Image]                                      |
| +---------------------------------------------------------+ |
| | [SCIENTIST IN CLEANROOM EXAMINING SILICON WAFER]        | |
| +---------------------------------------------------------+ |
| Semiconductor manufacturing cleanroom operations.           |
|                                                             |
| [2. Functional Image (Button)]                              |
| [ 🖨️  Print Invoice ]                                      |
|                                                             |
| [3. Decorative Flourish]                                    |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| Section separator ignored by screen readers.                |
+-------------------------------------------------------------+