Alt-text
Alt text is a text alternative associated with non-text content that conveys its meaningful content or purpose to people who cannot perceive it visually or access it directly.
WordPress Power Toolkit: Harness AI to build next-level websites
Alternative text (alt text) is a textual description associated with an image that conveys its meaningful content when it cannot be seen or is read by assistive technology.
- How it is used
- Makes image content available to screen-reader users and visitors when images fail to display.
- How deep it goes
- Gives a short WordPress procedure for entering descriptions but does not teach detailed writing criteria.
- Examples
- Uses the Media Library’s Edit Image screen and Alternative Text field as the hands-on example.
- What you can do after
- Operate/configure it by adding image descriptions in WordPress and reviewing them through a Lighthouse accessibility audit.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains alt-text →
Build a Website with ChatGPT
Semantic alternative text is prose marked as having a different voice, mood, or role from the surrounding regular text.
- How it is used
- Marks prose with a distinct voice, mood, or role, including titles and foreign phrases.
- How deep it goes
- Defines the semantic purpose, gives common categories and HTML markup, and notes nesting with other text-level elements.
- Examples
- Uses a Narnia book title, plus publication names, technical terms, foreign phrases, and thoughts.
- What you can do after
- Apply it via the HTML i element to mark text with a distinct semantic role.
Everyday Data Visualization
Text associated with an image or other non-text content that communicates its content for users who cannot perceive it visually, including through assistive software.
- How it is used
- Supports accessible data visualization by communicating images and charts to screen-reader users and people who cannot perceive them visually.
- How deep it goes
- Explains the definition, purpose, concise-writing guideline, chart example, and nearby data alternative without detailing platform-specific implementation.
- Examples
- Uses social-media images, HTML image tags, BI reports, and a bar graph contrasted with its unhelpful filename.
- What you can do after
- Apply it by writing concise image and chart descriptions and providing nearby tabular data for deeper exploration.
Web Design Playground, Second Edition
Alternative text is textual content intended to be interpreted differently from the surrounding regular text, such as a title, technical term, foreign phrase, or thought.
- How it is used
- Marks semantically distinct prose and supplies accessible image descriptions or replacements.
- How deep it goes
- Explains i versus em, image fallback, and decorative-image handling, but stops short of broader accessibility guidance.
- Examples
- Uses book titles, technical terms, foreign phrases, thoughts, logos, and decorative images.
- What you can do after
- Apply it via HTML by marking alternative prose with i and adding useful or empty alt values to images.
Read how Web Design Playground, Second Edition explains alt-text →
Related concepts
- screen readeruses · A screen reader is assistive software that presents digital content and interface information through synthesized speech, refreshable braille, or other nonvisual output.
- img elementpart of · The HTML img element embeds an image resource in a document.
- i elementimplemented by · The i element is an HTML element that marks text set apart from surrounding prose by a different voice, mood, or semantic role.
- assistive technologyuses · Assistive technology is hardware or software that enables people with disabilities to access, perceive, control, or interact with digital content and systems.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.