Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Perceivable Alternatives

perceivable-alternatives

Add to comparison +

Information conveyed through one perceptual channel — a visual image, sound, or color — must also be available through at least one other channel a person can perceive: images get a text alternative serving the equivalent purpose, audio/video gets captions or a transcript, and any state distinguished only by color also gets a visible text, pattern, or shape marker.

Illustration · Editorial artwork, no interactive specimen yet
A fictional interface element named FIELDNOTES rendered three ways in parallel: an image beside a block of text, a waveform with a caption bar beneath it, and a color-coded row that also carries a distinct shape marker.
A fictional interface element named FIELDNOTES rendered three ways in parallel: an image beside a block of text, a waveform with a caption bar beneath it, and a color-coded row that also carries a distinct shape marker.

Recognizing it

  • Every non-text element (image, icon, etc.) has a text alternative serving the equivalent purpose, not merely a note that an image is present
  • Audio/video content has captions or a transcript covering dialogue, speaker identity, and meaningful sound effects
  • Any state, link, or category distinguished only by color also carries a text, pattern, or shape marker

Concept boundary

This entry is more specific than inclusive design: inclusive design is the overall stance of identifying exclusion and offering adapted paths for different groups, while this entry covers only the operational question of how information carried in one sensory channel gets an equivalent form in another — it does not restate inclusive design's methodology. It is also not a new visual style; it adds alternative presentations by perceptual channel and does not change the existing visual design language. Universal design's "perceptible information" principle is the higher-level philosophical stance explaining why key information should be perceivable through redundant channels; this entry is that stance's executable rule set for images, audio/video, and color.

When to consider it

  • An interface includes an image, icon, chart, or other non-text element that conveys information
  • Publishing prerecorded audio or video content
  • Using color to distinguish states, categories, or clickable elements

When to be cautious

  • Writing alt text as a placeholder like "image" or the file name that carries no information
  • Distinguishing something by color alone without an added text or pattern marker
  • Writing long descriptions for purely decorative, non-informative images and adding screen-reader noise

Tradeoff

Writing an equivalent alternative, producing captions, or adding a non-color marker for every informative element raises content-production and maintenance cost; omitting it does not just degrade the experience for screen-reader users, users who cannot hear audio, or users with color-vision differences — it removes their access to that information entirely.

Conditional rules · Editorial advice

When An interface includes a non-text element (image, icon, chart, etc.) that conveys informationMustProvide a text alternative serving the equivalent purpose; use an empty alt text for purely decorative elements to avoid meaningless noise.
When Color is used to distinguish states, categories, or clickable elementsMustColor must not be the only visual means of conveying that information; also provide a text, pattern, or shape marker.
When Writing a text alternative, caption, or transcriptRecommendedMake the alternative content carry the same information as the original, not merely note that an image or audio segment exists there.

Related entries

Inclusive Design ↗Related, but different · Deciding between an overall exclusion-identification approach and executing the specific multi-channel alternative rules

Inclusive design is the overall stance of identifying exclusion and providing adapted paths by group; this entry is the operational rule set for one of its concrete practices — making information available across multiple perceptual channels — so the two are complementary but at different levels.

Universal Design ↗Realized by · Implementing the concrete presentation forms required by universal design's "perceptible information" principle

Universal design requires key information to be presented through at least two redundant perceivable forms; this entry gives the executable practice for that principle across images, audio/video, and color.

Similarity ↗Explains · Using shape or pattern similarity as a marker beyond color

The similarity principle explains that elements sharing a visual feature are perceived as one category, which can supply the extra pattern or shape cue for a state distinguished only by color.

Status Message ↗Works with · A status message uses both color and sound

If a status message relies only on a color change or an alert sound to convey its result, it needs the text or icon supplement this entry requires so more users can perceive it.

Sources and what they support

W3C WAI · Understanding SC 1.1.1 Non-text Content ↗

Requires that all non-text content presented to the user has a text alternative that serves the equivalent purpose (Level A), so the information can be rendered through any sensory modality, such as being read aloud or converted to braille, without losing its function.

Retrieved: 2026-09-15 · Archived 2026-09-16
W3C WAI · Understanding SC 1.4.1 Use of Color ↗

Requires that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (Level A), and that an additional visual marker such as text, a pattern, or a shape be paired with it to cover users with color-vision deficiencies or limited-color displays.

Retrieved: 2026-09-15 · Snapshot unconfirmed
W3C WAI · Understanding SC 1.2.2 Captions (Prerecorded) ↗

Requires that captions be provided for all prerecorded audio content in synchronized media (Level A, except when the media is itself a clearly labeled text alternative), and that captions cover dialogue, speaker identification, and meaningful sound effects.

Retrieved: 2026-09-15 · Archived 2026-09-16
MDN Web Docs · <img>: alt attribute ↗

Recommends that alt text describe an image's content and intent rather than merely noting that an image is present, offers a context test — read the alt text together with the surrounding sentence and check it still makes sense — and recommends an empty alt attribute for purely decorative images.

Retrieved: 2026-09-15 · Snapshot unconfirmed

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

No operable specimen yet; the illustration is editorial. Applying this to a product still requires verifying: whether each text alternative truly conveys information equivalent to the original rather than an empty placeholder, whether captions cover speaker identity and key sound effects, and whether every state distinguished only by color also has a non-color marker.

{
  "evidenceType": "An operationalized rewrite of accessibility-standard clauses",
  "limit": "This specimen does not verify the actual quality of alt text or caption accuracy in any specific product; real applications still require manual review of whether the alternative is truly equivalent."
}
Full Agent entry JSON
{
  "id": "perceivable-alternatives",
  "type": "principle",
  "name": {
    "zh": "可感知的等价替代",
    "en": "Perceivable Alternatives"
  },
  "aliases": [
    "Text Alternatives",
    "文字替代",
    "多感官冗余呈现"
  ],
  "granularity": "component",
  "intents": [
    "include-users",
    "provide-alternative"
  ],
  "tags": [
    "text alternatives",
    "captions",
    "color independence",
    "accessibility",
    "multi-channel"
  ],
  "definition": "Information conveyed through one perceptual channel — a visual image, sound, or color — must also be available through at least one other channel a person can perceive: images get a text alternative serving the equivalent purpose, audio/video gets captions or a transcript, and any state distinguished only by color also gets a visible text, pattern, or shape marker.",
  "boundary": "This entry is more specific than inclusive design: inclusive design is the overall stance of identifying exclusion and offering adapted paths for different groups, while this entry covers only the operational question of how information carried in one sensory channel gets an equivalent form in another — it does not restate inclusive design's methodology. It is also not a new visual style; it adds alternative presentations by perceptual channel and does not change the existing visual design language. Universal design's \"perceptible information\" principle is the higher-level philosophical stance explaining why key information should be perceivable through redundant channels; this entry is that stance's executable rule set for images, audio/video, and color.",
  "signature": [
    "Every non-text element (image, icon, etc.) has a text alternative serving the equivalent purpose, not merely a note that an image is present",
    "Audio/video content has captions or a transcript covering dialogue, speaker identity, and meaningful sound effects",
    "Any state, link, or category distinguished only by color also carries a text, pattern, or shape marker"
  ],
  "when": [
    "An interface includes an image, icon, chart, or other non-text element that conveys information",
    "Publishing prerecorded audio or video content",
    "Using color to distinguish states, categories, or clickable elements"
  ],
  "when_not": [
    "Writing alt text as a placeholder like \"image\" or the file name that carries no information",
    "Distinguishing something by color alone without an added text or pattern marker",
    "Writing long descriptions for purely decorative, non-informative images and adding screen-reader noise"
  ],
  "tradeoff": "Writing an equivalent alternative, producing captions, or adding a non-color marker for every informative element raises content-production and maintenance cost; omitting it does not just degrade the experience for screen-reader users, users who cannot hear audio, or users with color-vision differences — it removes their access to that information entirely.",
  "comparison": {
    "focus": "Whether the same information can be fully retrieved through a channel other than the one it was originally presented in",
    "mechanism": "Provide a text alternative serving the equivalent purpose for non-text content, captions or a transcript for audio/video, and a non-color marker for any distinction made only by color",
    "cost": "The ongoing effort to write, translate, and maintain alternative content as the source content changes"
  },
  "sources": [
    {
      "id": "wcag-non-text-content",
      "title": "W3C WAI · Understanding SC 1.1.1 Non-text Content",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html",
      "claim": "Requires that all non-text content presented to the user has a text alternative that serves the equivalent purpose (Level A), so the information can be rendered through any sensory modality, such as being read aloud or converted to braille, without losing its function.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html",
        "status": "available",
        "checkedAt": "2026-09-16T05:50:48.751Z",
        "jobId": "spn2-edba1db0a2ae3508f8ae581839e1d9f5de212159",
        "url": "https://web.archive.org/web/20260916055115/https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html",
        "timestamp": "20260916055115"
      }
    },
    {
      "id": "wcag-use-of-color",
      "title": "W3C WAI · Understanding SC 1.4.1 Use of Color",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html",
      "claim": "Requires that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (Level A), and that an additional visual marker such as text, a pattern, or a shape be paired with it to cover users with color-vision deficiencies or limited-color displays.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html",
        "status": "pending",
        "checkedAt": "2026-09-16T05:51:02.098Z",
        "error": "status-request-failed",
        "jobId": "spn2-35636813b2bd8d7fa175171301aa6ad630a2130d"
      }
    },
    {
      "id": "wcag-captions-prerecorded",
      "title": "W3C WAI · Understanding SC 1.2.2 Captions (Prerecorded)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html",
      "claim": "Requires that captions be provided for all prerecorded audio content in synchronized media (Level A, except when the media is itself a clearly labeled text alternative), and that captions cover dialogue, speaker identification, and meaningful sound effects.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html",
        "status": "available",
        "checkedAt": "2026-09-16T05:51:28.130Z",
        "jobId": "spn2-03e9bfa21396c83f48d328329d7b4978e03cb5f8",
        "url": "https://web.archive.org/web/20260916055151/https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html",
        "timestamp": "20260916055151"
      }
    },
    {
      "id": "mdn-img-alt",
      "title": "MDN Web Docs · <img>: alt attribute",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#alt",
      "claim": "Recommends that alt text describe an image's content and intent rather than merely noting that an image is present, offers a context test — read the alt text together with the surrounding sentence and check it still makes sense — and recommends an empty alt attribute for purely decorative images.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#alt",
        "status": "pending",
        "checkedAt": "2026-09-16T05:51:46.349Z",
        "error": "status-request-failed",
        "jobId": "spn2-d124fb782965aca7280f9254712fac6ad6b8d767"
      }
    }
  ],
  "relations": [
    {
      "target": "inclusive-design",
      "kind": "related",
      "condition": "Deciding between an overall exclusion-identification approach and executing the specific multi-channel alternative rules",
      "reason": "Inclusive design is the overall stance of identifying exclusion and providing adapted paths by group; this entry is the operational rule set for one of its concrete practices — making information available across multiple perceptual channels — so the two are complementary but at different levels.",
      "basis": "editorial"
    },
    {
      "target": "universal-design",
      "kind": "realized_by",
      "condition": "Implementing the concrete presentation forms required by universal design's \"perceptible information\" principle",
      "reason": "Universal design requires key information to be presented through at least two redundant perceivable forms; this entry gives the executable practice for that principle across images, audio/video, and color.",
      "basis": "editorial"
    },
    {
      "target": "similarity",
      "kind": "informs",
      "condition": "Using shape or pattern similarity as a marker beyond color",
      "reason": "The similarity principle explains that elements sharing a visual feature are perceived as one category, which can supply the extra pattern or shape cue for a state distinguished only by color.",
      "basis": "editorial"
    },
    {
      "target": "status-message",
      "kind": "composes_with",
      "condition": "A status message uses both color and sound",
      "reason": "If a status message relies only on a color change or an alert sound to convey its result, it needs the text or icon supplement this entry requires so more users can perceive it.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "An interface includes a non-text element (image, icon, chart, etc.) that conveys information",
      "instruction": "Provide a text alternative serving the equivalent purpose; use an empty alt text for purely decorative elements to avoid meaningless noise.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Color is used to distinguish states, categories, or clickable elements",
      "instruction": "Color must not be the only visual means of conveying that information; also provide a text, pattern, or shape marker.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Writing a text alternative, caption, or transcript",
      "instruction": "Make the alternative content carry the same information as the original, not merely note that an image or audio segment exists there.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "principle": {
    "evidenceType": "An operationalized rewrite of accessibility-standard clauses",
    "limit": "This specimen does not verify the actual quality of alt text or caption accuracy in any specific product; real applications still require manual review of whether the alternative is truly equivalent."
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "No operable specimen yet; the illustration is editorial. Applying this to a product still requires verifying: whether each text alternative truly conveys information equivalent to the original rather than an empty placeholder, whether captions cover speaker identity and key sound effects, and whether every state distinguished only by color also has a non-color marker.",
  "image": {
    "src": "/images/perceivable-alternatives.webp",
    "alt": "A fictional interface element named FIELDNOTES rendered three ways in parallel: an image beside a block of text, a waveform with a caption bar beneath it, and a color-coded row that also carries a distinct shape marker."
  },
  "searchTerms": [
    "替代文本",
    "字幕",
    "色彩独立",
    "无障碍",
    "多通道"
  ]
}