Link
Link
Resources
Link allows users to navigate to a different site or other pages within the current site. You can use it inline in a sentence, standalone on its own, or after a sentence.
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
- Screen reader users will use the Tab key to jump from link to link or pull up a list of links on a page. Avoid using the same link text to link to different content and ensure that links make sense out of context.
- When a link contains an icon and text, pass
aria-hidden=”true"to the icon so that its label is not announced by screen readers. - When a link has an icon and no text, pass an
aria-labelto the link to describe the content that the link leads to.
| Key | Function |
|---|---|
| Enter | If the link has an href, Enter navigates the user. |
- Screen reader users will use the Tab key to jump from link to link or pull up a list of links on a page. Avoid using the same link text to link to different content and ensure that links make sense out of context.
- When a link contains an icon and text, pass
aria-hidden=”true"to the icon so that its label is not announced by screen readers. - When a link has an icon and no text, pass an
aria-labelto the link to describe the content that the link leads to.
| Key | Function |
|---|---|
| Enter | If the link has an href, Enter navigates the user. |
- Screen reader users will use the Tab key to jump from link to link or pull up a list of links on a page. Avoid using the same link text to link to different content and ensure that links make sense out of context.
- When a link contains an icon and text, pass
aria-hidden=”true"to the icon so that its label is not announced by screen readers. - When a link has an icon and no text, pass an
aria-labelto the link to describe the content that the link leads to.
| Key | Function |
|---|---|
| Enter | If the link has an href, Enter navigates the user. |