Alt Text

The alt text must serve the identical communicative purpose as the image itself. If the image is a link, the alt text must describe the link's destination or action, not the visual scene.

• Decorative images: Use an empty string (alt="") to signal to the accessibility tree that the element is presentational.
• Functional images: Describe the action, e.g., alt="Submit registration form" for a button icon.
• Informative images: Convey the specific data or concept the image illustrates.

The appropriate text alternative shifts based on the surrounding content and document structure. An image of a chart might have different alt text in a financial report versus a design blog.

• Proximity: If a caption already explains the image, the alt text should avoid redundancy.
• Semantic HTML: The meaning is derived from the parent element's role (e.g., <figure> vs <button>).
• Document Outline: The heading hierarchy informs the AI of the topic's scope, refining the expected context for the image.

Alt text is a concise replacement, not an exhaustive description. Most screen readers truncate alt text at around 125 characters. AI parsers prioritize the first few tokens.

• Token efficiency: Place the most critical identifying entity at the beginning.
• Avoid redundancy: Do not include phrases like "image of" or "graphic shows." The <img> element already conveys this role.
• Long descriptions: For complex diagrams, use the longdesc attribute or a linked textual description, keeping the alt attribute as a high-level summary.

When an image contains text or data, the alt text must extract and linearize that information for machine consumption.

• Logos: The alt text should be the company name, not a description of the logo shape.
• Charts: Summarize the trend or key data point, e.g., alt="Sales increased 20% in Q4".
• Screenshots: Transcribe the relevant visible text or UI state.
• This process directly supports semantic extraction by converting visual glyphs into machine-readable strings.

Alt text provides a high-confidence signal for entity recognition. Use precise, unambiguous names for people, places, and objects to populate the knowledge graph.

• Named Entities: Use full, official names (e.g., "President Volodymyr Zelenskyy" not "a man giving a speech").
• Object Classification: Be specific (e.g., "2024 Tesla Cybertruck" not "silver truck").
• This explicit labeling reduces the semantic gap for vision-language models and improves entity salience within the document.

The alt attribute is the primary mechanism for exposing an accessible name for an image. It must be reliably interpretable by software.

• Validation: Ensure the attribute is present on all <img> elements (even if null).
• CSS Content: Never rely on CSS generated content to convey image meaning; it is ignored by the accessibility tree.
• Shadow DOM: When using custom elements, ensure the alt text is properly reflected into the component's semantic interface.

The practice of using HTML elements according to their intrinsic, programmatically determined meaning rather than solely for visual presentation. Elements like <article>, <nav>, and <aside> explicitly communicate content role and structure to AI parsers, forming the foundational layer of machine-readable documents. Without semantic elements, AI models must rely on heuristics to guess content purpose, introducing extraction errors.

A logical, nested structure of <h1> through <h6> elements that defines the document outline. This hierarchy communicates the relative importance and parent-child relationships of content sections to search engine parsers and accessibility bots.

• An <h1> represents the primary topic
• <h2> elements denote major subtopics
• Subsequent levels create nested subsections A flat or broken hierarchy obscures content relationships from AI extraction algorithms.

A parallel structure generated by the browser from the DOM that exposes semantic information, properties, and relationships of UI elements exclusively to assistive technologies and programmatic agents. This tree is what AI crawlers and screen readers actually consume—not the raw HTML. The computed accessible name, role, and state of each node determine how content is interpreted and conveyed to users and machines alike.

The principle that the meaning, state, and value of a user interface component can be reliably interpreted by software, including AI agents, through standardized, machine-readable properties. This requires:

• Explicit semantic markup over visual conventions
• Proper ARIA states for dynamic widgets
• Deterministic accessible names for all interactive elements Ambiguity in any of these areas forces AI models to infer meaning, degrading extraction accuracy.

Discrete blocks of JSON-LD or Microdata embedded within an HTML document that provide explicit, machine-readable entity definitions. These serve as high-confidence extraction targets for AI-driven search engines, offering unambiguous statements about entities, their attributes, and relationships. When combined with semantic HTML, structured data islands create a dual-layer of machine interpretability that dramatically improves AI comprehension.

The automated process by which AI models and search engines parse an HTML document to identify and isolate key entities, facts, and structural relationships based on the underlying semantic markup. Effective extraction depends on:

• Proper use of sectioning elements
• Explicit heading hierarchies
• Correctly associated data tables
• High-quality alt text on images Poor semantics force extraction algorithms into error-prone heuristic guessing.