link-text-design

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

82stars25forks

How to install link-text-design?

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

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

Installs into the current project.

Summary

Write link text that makes sense out of context for screen reader users and improves usability for everyone. Use when writing or reviewing links, calls to action, navigation labels, or any clickable text. Triggers on: link text, click here, read more, learn more, screen reader li

Files · 1

View on GitHub

SKILL.md

1	# Link Text Design
2
3	Write link text that tells users where they're going before they get
4	there. Screen reader users often navigate by pulling up a list of all
5	links on a page — if every link says "click here" or "read more",
6	that list is useless.
7
8	## Core Principle
9
10	Every link should make sense when read completely on its own, outside
11	of any surrounding sentence or context.
12
13	## Rules
14
15	### Link Text Describes the Destination
16	- Good: "View your order history"
17	- Bad: "Click here"
18	- Good: "Download the accessibility guidelines (PDF, 2.4MB)"
19	- Bad: "Download"
20	- Good: "Read the full Q3 performance report"
21	- Bad: "Read more"
22
23	### Never Use Generic Link Text
24	These phrases mean nothing out of context:
25	- "Click here"
26	- "Read more"
27	- "Learn more"
28	- "Here"
29	- "This"
30	- "More"
31	- "Link"
32
33	If you find yourself writing these, ask: more about what? Here where?
34	That answer is your link text.
35
36	### Same Text, Same Destination
37	If two links have the same text, they must go to the same place.
38	Two different "Learn more" links going to different pages is confusing
39	for everyone and disorienting for screen reader users.
40
41	### Different Destinations, Different Text
42	If two links go to different places, their text must be different.
43	- Bad: "View details" / "View details" (going to different products)
44	- Good: "View details for Standard Plan" / "View details for Pro Plan"
45
46	## Special Cases
47
48	### Links That Open New Windows or Tabs
49	- Warn the user: "View the policy (opens in new tab)"
50	- Or use a visible external link icon with alt text
51
52	### Links to Files
53	- State the file type and size: "Annual report (PDF, 3.1MB)"
54	- This helps users decide before committing to a download
55
56	### Links Within Body Text
57	- The link text should be the meaningful phrase, not the whole sentence
58	- Good: "See the full list of supported languages"
59	- Bad: "To see the full list of supported languages, click here"
60	- Don't link URLs as text unless the URL itself is the information
61
62	### Image Links
63	- The image's alt text serves as the link text
64	- A linked logo: alt="Company name — home page"
65	- A linked icon: alt describes the action, not the icon
66
67	## Assessment Checklist
68
69	- [ ] Every link makes sense read on its own
70	- [ ] No generic "click here" or "read more" links
71	- [ ] Same link text always goes to the same destination
72	- [ ] File links state type and size
73	- [ ] New-window links warn the user
74	- [ ] Image links have descriptive alt text

People who liked this also viewed

6 picks

Type

link-text-design

82stars25forks

View on GitHub

How to install link-text-design?

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

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Link Text Design
2
3	Write link text that tells users where they're going before they get
4	there. Screen reader users often navigate by pulling up a list of all
5	links on a page — if every link says "click here" or "read more",
6	that list is useless.
7
8	## Core Principle
9
10	Every link should make sense when read completely on its own, outside
11	of any surrounding sentence or context.
12
13	## Rules
14
15	### Link Text Describes the Destination
16	- Good: "View your order history"
17	- Bad: "Click here"
18	- Good: "Download the accessibility guidelines (PDF, 2.4MB)"
19	- Bad: "Download"
20	- Good: "Read the full Q3 performance report"
21	- Bad: "Read more"
22
23	### Never Use Generic Link Text
24	These phrases mean nothing out of context:
25	- "Click here"
26	- "Read more"
27	- "Learn more"
28	- "Here"
29	- "This"
30	- "More"
31	- "Link"
32
33	If you find yourself writing these, ask: more about what? Here where?
34	That answer is your link text.
35
36	### Same Text, Same Destination
37	If two links have the same text, they must go to the same place.
38	Two different "Learn more" links going to different pages is confusing
39	for everyone and disorienting for screen reader users.
40
41	### Different Destinations, Different Text
42	If two links go to different places, their text must be different.
43	- Bad: "View details" / "View details" (going to different products)
44	- Good: "View details for Standard Plan" / "View details for Pro Plan"
45
46	## Special Cases
47
48	### Links That Open New Windows or Tabs
49	- Warn the user: "View the policy (opens in new tab)"
50	- Or use a visible external link icon with alt text
51
52	### Links to Files
53	- State the file type and size: "Annual report (PDF, 3.1MB)"
54	- This helps users decide before committing to a download
55
56	### Links Within Body Text
57	- The link text should be the meaningful phrase, not the whole sentence
58	- Good: "See the full list of supported languages"
59	- Bad: "To see the full list of supported languages, click here"
60	- Don't link URLs as text unless the URL itself is the information
61
62	### Image Links
63	- The image's alt text serves as the link text
64	- A linked logo: alt="Company name — home page"
65	- A linked icon: alt describes the action, not the icon
66
67	## Assessment Checklist
68
69	- [ ] Every link makes sense read on its own
70	- [ ] No generic "click here" or "read more" links
71	- [ ] Same link text always goes to the same destination
72	- [ ] File links state type and size
73	- [ ] New-window links warn the user
74	- [ ] Image links have descriptive alt text

People who liked this also viewed

6 picks

Type