alt-text-design

Name: alt-text-design
Author: Owl-Listener

82stars25forks

How to install alt-text-design?

owl-listener/inclusive-design-skills/alt-text-design

$npx -y skills add Owl-Listener/inclusive-design-skills --skill alt-text-design

Installs into the current project.

Summary

Write meaningful alternative text for images, charts, diagrams, and visual content. Use when creating or reviewing alt text, image descriptions, chart summaries, or any visual content that needs a text equivalent. Triggers on: alt text, image description, alternative text, screen

Files · 1

View on GitHub

SKILL.md

1	# Alt Text Design
2
3	Write alt text that conveys the same information and purpose as the
4	visual content — not just what the image looks like, but what it
5	communicates.
6
7	## Core Principle
8
9	Alt text answers the question: if this image disappeared, what
10	information would be lost? That's what needs to be in the alt text.
11
12	## Decision Tree
13
14	### 1. Is the image purely decorative?
15	- Background textures, dividers, visual flourishes
16	- Images that repeat information already in adjacent text
17	- Action: use empty alt (alt="") so screen readers skip it
18
19	### 2. Is the image functional?
20	- A linked logo, an icon button, an image link
21	- Action: alt text describes the function, not the image
22	- Logo linking to homepage: alt="Company name — home"
23	- Search icon button: alt="Search"
24	- NOT alt="magnifying glass icon"
25
26	### 3. Is the image informative?
27	- Photos, illustrations, screenshots that add information
28	- Action: describe the information the image conveys
29	- Photo of a damaged product: alt="Crack running along the
30	bottom edge of the screen"
31	- NOT alt="Photo of a phone" or alt="product-image-032.jpg"
32
33	### 4. Is the image complex?
34	- Charts, graphs, diagrams, infographics, maps
35	- Action: short alt text summarising the key message PLUS a
36	longer description nearby (in the page text or a linked detail)
37	- Bar chart: alt="Bar chart showing sales growth — details below"
38	followed by a text summary of the data
39	- NOT alt="bar chart" and not the entire data set in the alt attribute
40
41	## Writing Good Alt Text
42
43	### Be Specific
44	- Bad: "A group of people"
45	- Good: "Three team members reviewing a prototype on a whiteboard"
46
47	### Convey Purpose, Not Just Appearance
48	- Bad: "Red circle with a number"
49	- Good: "3 unread notifications"
50
51	### Match the Context
52	The same image needs different alt text in different contexts:
53	- On a recipe page: "Finished risotto in a white bowl, garnished
54	with parmesan and basil"
55	- On a kitchenware product page: "Round white ceramic serving bowl,
56	22cm diameter"
57
58	### Keep It Concise
59	- Aim for one sentence, two at most
60	- Don't start with "Image of..." or "Picture of..." — screen readers
61	already announce it as an image
62	- For complex images: keep alt text short and provide detail elsewhere
63
64	## Specific Content Types
65
66	### Charts and Graphs
67	- Alt text: state the type and the key takeaway
68	- Provide a text summary or data table nearby
69	- "Line chart showing website traffic doubling between January and
70	June 2026. Full data in the table below."
71
72	### Screenshots
73	- Describe what the screenshot shows that matters to the reader
74	- "Settings panel with the notifications toggle switched off"
75	- NOT "Screenshot of the settings page"
76
77	### Icons with Labels
78	- If the icon has a visible text label, the icon is decorative (alt="")
79	- If the icon is the only indicator, the alt text must convey the meaning
80
81	### Images of Text
82	- Avoid images of text wherever possible — use real text
83	- If unavoidable: the alt text must contain the full text in the image
84
85	## Assessment Questions
86
87	1. Does every non-decorative image have meaningful alt text?
88	2. Does the alt text convey purpose, not just appearance?
89	3. Are decorative images marked with empty alt?
90	4. Do complex images have both short alt text and a longer description?
91	5. Would someone using a screen reader get the same information as
92	someone seeing the image?

People who liked this also viewed

6 picks

Type

alt-text-design

82stars25forks

View on GitHub

How to install alt-text-design?

owl-listener/inclusive-design-skills/alt-text-design

$npx -y skills add Owl-Listener/inclusive-design-skills --skill alt-text-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Alt Text Design
2
3	Write alt text that conveys the same information and purpose as the
4	visual content — not just what the image looks like, but what it
5	communicates.
6
7	## Core Principle
8
9	Alt text answers the question: if this image disappeared, what
10	information would be lost? That's what needs to be in the alt text.
11
12	## Decision Tree
13
14	### 1. Is the image purely decorative?
15	- Background textures, dividers, visual flourishes
16	- Images that repeat information already in adjacent text
17	- Action: use empty alt (alt="") so screen readers skip it
18
19	### 2. Is the image functional?
20	- A linked logo, an icon button, an image link
21	- Action: alt text describes the function, not the image
22	- Logo linking to homepage: alt="Company name — home"
23	- Search icon button: alt="Search"
24	- NOT alt="magnifying glass icon"
25
26	### 3. Is the image informative?
27	- Photos, illustrations, screenshots that add information
28	- Action: describe the information the image conveys
29	- Photo of a damaged product: alt="Crack running along the
30	bottom edge of the screen"
31	- NOT alt="Photo of a phone" or alt="product-image-032.jpg"
32
33	### 4. Is the image complex?
34	- Charts, graphs, diagrams, infographics, maps
35	- Action: short alt text summarising the key message PLUS a
36	longer description nearby (in the page text or a linked detail)
37	- Bar chart: alt="Bar chart showing sales growth — details below"
38	followed by a text summary of the data
39	- NOT alt="bar chart" and not the entire data set in the alt attribute
40
41	## Writing Good Alt Text
42
43	### Be Specific
44	- Bad: "A group of people"
45	- Good: "Three team members reviewing a prototype on a whiteboard"
46
47	### Convey Purpose, Not Just Appearance
48	- Bad: "Red circle with a number"
49	- Good: "3 unread notifications"
50
51	### Match the Context
52	The same image needs different alt text in different contexts:
53	- On a recipe page: "Finished risotto in a white bowl, garnished
54	with parmesan and basil"
55	- On a kitchenware product page: "Round white ceramic serving bowl,
56	22cm diameter"
57
58	### Keep It Concise
59	- Aim for one sentence, two at most
60	- Don't start with "Image of..." or "Picture of..." — screen readers
61	already announce it as an image
62	- For complex images: keep alt text short and provide detail elsewhere
63
64	## Specific Content Types
65
66	### Charts and Graphs
67	- Alt text: state the type and the key takeaway
68	- Provide a text summary or data table nearby
69	- "Line chart showing website traffic doubling between January and
70	June 2026. Full data in the table below."
71
72	### Screenshots
73	- Describe what the screenshot shows that matters to the reader
74	- "Settings panel with the notifications toggle switched off"
75	- NOT "Screenshot of the settings page"
76
77	### Icons with Labels
78	- If the icon has a visible text label, the icon is decorative (alt="")
79	- If the icon is the only indicator, the alt text must convey the meaning
80
81	### Images of Text
82	- Avoid images of text wherever possible — use real text
83	- If unavoidable: the alt text must contain the full text in the image
84
85	## Assessment Questions
86
87	1. Does every non-decorative image have meaningful alt text?
88	2. Does the alt text convey purpose, not just appearance?
89	3. Are decorative images marked with empty alt?
90	4. Do complex images have both short alt text and a longer description?
91	5. Would someone using a screen reader get the same information as
92	someone seeing the image?

People who liked this also viewed

6 picks

Type