Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
<div class="do-dont-container"> <div class="do-dont-item"> <div class="do-header">✓ Do</div> <img src="https://user-images.githubusercontent.com/40274682/160483376-a88eb64f-ce80-4a11-93b5-6d882b1970eb.png" alt="Descriptive links example"> <div class="caption">Be descriptive with your links so that they can stand alone and be understood.</div> </div> <div class="do-dont-item"> <div class="dont-header">✗ Don't</div> <img src="https://user-images.githubusercontent.com/40274682/160474793-2fd3085f-0813-43ed-8b43-c1a5f14aaea9.png" alt="Generic link text example"> <div class="caption">Don't use generic terms like 'click here' that can't be understood out of context.</div> </div> </div> <div class="do-dont-container"> <div class="do-dont-item"> <div class="do-header">✓ Do</div> <img src="https://user-images.githubusercontent.com/40274682/160474794-06a75b30-06d3-475e-863f-605e8a6dad72.png" alt="Underlined links example"> <div class="caption">Underline links in paragraphs and sentences</div> </div> <div class="do-dont-item"> <div class="dont-header">✗ Don't</div> <img src="https://user-images.githubusercontent.com/40274682/160474800-b505369e-1730-4c14-b426-70b5bd016a6c.png" alt="Non-underlined links example"> <div class="caption">Don't use underlines for non-link highlights or forget to demarcate links</div> </div> </div> </div> <!-- Implementation --> <div class="component-section"> <h2 class="h2 mb-3">Implementation requirements</h2> <p class="mb-3">Setting the muted property changes the visual presentation of the link to use a more subdued color. However, this visual change is not conveyed programmatically – so muted links will be announced the same way as regular links by screen readers.</p> <h3 class="h3 mb-2">Code Examples</h3> <div class="code-example"> <div class="mb-2">Good example with descriptive text:</div> <code>There are various plans available.<a href="..." aria-label="Learn more about GitHub pricing plans">Learn more</a></code> </div> <div class="code-example"> <div class="mb-2">Avoid this pattern:</div> <code><a href="..." aria-label="Learn more about keyboard shortcuts">Keyboard shortcuts</a> allow you to access common commands more quickly.</code> </div> </div> <!-- Testing --> <div class="component-section"> <h2 class="h2 mb-3">How to test links</h2> <h3 class="h3 mb-2">Integration tests</h3> <ul class="mb-3"> <li>Activating a link changes the URL. It is not intended to be used as a trigger for an action.</li> <li>Where muted links are used, this visual presentation is not used as the only way to differentiate links</li> <li>The links have appropriately descriptive link text</li> </ul> <h3 class="h3 mb-2">Component tests</h3> <ul class="mb-3"> <li>Links are rendered as standard <a href="…"> … </a> links</li> <li>Content passed into the component is output as the link's visible text</li> </ul> </div> <!-- Resources --> <div class="component-section"> <h2 class="h2 mb-3">Additional resources</h2> <ul> <li><a href="https://webaim.org/techniques/hypertext/" class="Link">WebAIM: Links and Hypertext</a></li> <li><a href="https://accessibilityinsights.io/en/" class="Link">Accessibility Insights plugin</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html" class="Link">Understanding Success Criterion 2.4.4: Link Purpose</a></li> </ul> </div> <!-- Footer --> <div class="component-section border-top pt-4"> <p class="color-fg-muted"> <a href="#" class="Link">Source code</a> | <a href="#" class="Link">Usage guidelines</a> | <a href="#" class="Link">Accessibility</a> </p> <h3 class="h3 mb-2">Feedback</h3> <p class="color-fg-muted">Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> </div></body></html>' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">