{"id":22,"date":"2023-01-02T08:00:09","date_gmt":"2023-01-02T16:00:09","guid":{"rendered":"https:\/\/wsu.edu\/digital-accessibility\/?page_id=22"},"modified":"2025-10-15T11:29:50","modified_gmt":"2025-10-15T18:29:50","slug":"links","status":"publish","type":"page","link":"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/links\/","title":{"rendered":"Links"},"content":{"rendered":"<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"importance-of-links\">Importance of Links<\/h2>\n\n\n\n<p>Having clear, concise, and meaningful links can improve both the accessibility and usability of your digital content.<\/p>\n\n\n\n<p>Links should provide a quick and clear understanding of the <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/link-destination\/\">link destination<\/a>. People scan the content for links whether they use <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/assistive-technology\/\">assistive technology<\/a> or not. Providing a link that describes its destination allows the link to be understood out of context from its surrounding text. This is especially helpful to those using assistive technology to scan through a list of links pulled from the page content or who are navigating through a page by the links.<\/p>\n\n\n\n<p>Lengthy text links, links that span multiple lines, ambiguous links, and some URLs (web addresses) hinder people\u2019s ability to assess the links quickly and easily in the content. Providing concise, meaningful, descriptive, and clearly identifiable links lets people quickly understand their purpose and decide whether to select them.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3 id=\"link-text-examples\">Link Text Examples<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Meaningful, Concise Link Text<\/th><th>Ambiguous or Lengthy Link Text<\/th><\/tr><\/thead><tbody><tr><td><a href=\"https:\/\/admission.wsu.edu\/academics\/fos\/Public\/index.castle\">Majors and degree programs<\/a><\/td><td><a href=\"https:\/\/admission.wsu.edu\/academics\/fos\/Public\/index.castle\">https:\/\/admission.wsu.edu\/academics\/fos\/Public\/index.castle<\/a><\/td><\/tr><tr><td><a href=\"https:\/\/visitor.wsu.edu\/cougar-spirit\/\">About Butch Cougar<\/a><\/td><td><a href=\"https:\/\/visitor.wsu.edu\/cougar-spirit\/\">This first cougar mascot was named Butch in honor of Herbert &#8220;Butch&#8221; Meeker of Spokane, who was WSU&#8217;s football star at the time.<\/a><\/td><\/tr><tr><td><a href=\"https:\/\/wsu.edu\/about\/facts\/\">Learn more about WSU<\/a><\/td><td><a href=\"https:\/\/wsu.edu\/about\/facts\/\">More Information<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n<\/div>\r\n\n<\/div>\n\n<section  class=\"wsu-section  wsu-width--full wsu-position--relative\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-container  wsu-position--relative\" >\r\n    \n<div class=\"wsu-decorator  wsu-decorator--style-lines-gray  wsu-decorator--white\" style=\"bottom:-15px;left:-15px;height:60%;width:60%\"><\/div>\n\n<div class=\"wsu-container wsu-spacing-bottom--xxmedium wsu-spacing-padding-left--xxmedium wsu-spacing-padding-right--xxmedium wsu-border--add-top wsu-border--color-autumn wsu-spacing-top--medium wsu-color-background--white wsu-spacing-after--xxmedium wsu-position--relative wsu-zindex--level-1 wsu-notch--small\" >\r\n    \n\n<h2 id=\"common-errors\">Common Errors<\/h2>\n\n\n\n<p class=\"wsu-spacing-after--xsmall\">These common errors hinder the accessibility and usability of digital content.<\/p>\n\n\n\n<ul class=\"wsu-list--style-arrow\"><li>Link text does not describe the <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/link-destination\/\">link destination<\/a>.<\/li><li>Links with the same link text go to different destinations.<\/li><li>Linked images do not have alternative text or have an alternative text that describes the image.<\/li><li>Links open into a new tab without warning (web pages only).<\/li><li>Links to files and other digital formats are not indicated in the link text.<\/li><li>Links are not distinguishable from the rest of the text content, either through color contrast, or underline. Or for hovering on web pages only.<\/li><li>Links do not have a focus indicator (web pages only).<\/li><\/ul>\n\n<\/div>\n<\/div>\n    <\/div><\/section>\n\n<section  class=\"wsu-section  wsu-width--full wsu-color-background--white\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-container  wsu-position--relative\" >\r\n    \n<div class=\"wsu-decorator  wsu-decorator--style-lines-gray\" style=\"top:-20px;right:-20px;height:40%;width:40%\"><\/div>\n\n<div class=\"wsu-callout  wsu-color-background--gray-5 wsu-callout--color-vineyard wsu-notch--small wsu-position--relative\" >\r\n        \n\n<h2 id=\"best-practices\">Best Practices<\/h2>\n\n\n\n<p class=\"wsu-spacing-after--xsmall\">Follow these best practices to improve the accessibility and usability of links in your digital content.<\/p>\n\n\n\n<ul><li>Use clear and concise language for link text.<ul><li>Avoid link text that is more than a few words.<\/li><\/ul><\/li><li>Use unique and meaningful link text that describes the <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/link-destination\/\">link destination<\/a> that can be understood out of context.<ul><li>Avoid the same link text that goes to the different destinations.<\/li><\/ul><ul><li>Avoid vague link text.<br>Examples: like, click, click here, more information, read more.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul><li>The alternative text of linked images must describe the link destination and not a description of the image.<\/li><li>Use the same link text for links to the same destination.<\/li><li>Avoid using a URL (web address) as the link text.<\/li><li>Text underlining should be reserved for links and not used for emphasizing text.<\/li><li>Avoid opening links into a new tab unless specifically indicated (web pages only).<\/li><li>Links to files or other digital formats should be indicated in the link.<br>Example: <a href=\"https:\/\/wsu.edu\/digital-accessibility\/documents\/2023\/10\/core-concept-check-sheet.pdf\/\">Core Concept Check Sheet (PDF)<\/a><\/li><li>Links are visually distinguishable from the surrounding text content.<ul><li>Links have appropriate color contrast: Link color should contrast sufficiently and meet the color contrast ratio requirements (WCAG 2, AA).<ul><li>4.5:1 color contrast ratio for link text color to background color.<\/li><\/ul><ul><li>3:1 color contrast ratio for link text color to surrounding text color.<\/li><\/ul><\/li><\/ul><ul><li>Underline links when the link color is less than a 3:1 contrast ratio with the surrounding text.<\/li><\/ul><ul><li>Link on hover &amp; focus formatting options (web pages only):<ul><li>Underline text on hover and focus when link text color is a 3:1 ratio with surrounding text.<\/li><\/ul><ul><li>Use a different background color when link text color is a 3:1 ratio with surrounding text or when link text is also underlined.<\/li><\/ul><ul><li>Use an outline or border when link text color is a 3:1 ratio with surrounding text or when link text is also underlined.<\/li><\/ul><ul><li>A hover state color change (i.e., non-text interface component) should have a color contrast ratio of at least 3:1 with adjacent colors and with its default state color.<\/li><\/ul><\/li><\/ul><\/li><li>Links have a visual focus indicator (web pages only).<ul><li>A link focus indicator is a visual feature that brings focus to a link when navigated to either by using a mouse, keyboard, or <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/assistive-technology\/\">assistive technology<\/a>.<br>Example: A rectangle may appear around a link when it is navigated to.<\/li><\/ul><\/li><li>A link focus indicator (i.e., non-text interface component) should have a color contrast ratio of at least 3:1 with adjacent colors (web pages only).<\/li><\/ul>\n\n<\/div>\r\n\n<\/div>\n    <\/div><\/section>\n\n<section  class=\"wsu-section  wsu-width--full wsu-color-background--gray-5\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-container  wsu-position--relative\" >\r\n    \n<div class=\"wsu-decorator  wsu-decorator--style-block-gray\" style=\"bottom:-15px;left:-15px;height:60%;width:60%\"><\/div>\n\n<div class=\"wsu-callout wsu-callout--color-crimson wsu-spacing-padding-left--xxmedium wsu-spacing-padding-right--xxmedium wsu-color-background--white wsu-notch--small wsu-position--relative\" >\r\n        \n\n<h2 id=\"accessibility-checks\">Accessibility Checks&nbsp;<\/h2>\n\n\n\n<p>Use this checklist as a guide to ensure your links are in an accessible format.<\/p>\n\n\n\n<ul class=\"wsu-list--checkmark\"><li>Link text is concise, meaningful, and describes the <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/link-destination\/\">link destination<\/a>. Links for the same link destination have the same link text.<\/li><li>Links to different destinations use different link text.<\/li><li>Linked image\u2019s alternative text indicates the link destination and not a description of the image.<\/li><li>Link indicates it opens into a new tab when it does (web pages only).<\/li><li>Underline, when used, is used only for indicating text links.<\/li><li>Links are visually distinguishable from the rest of the text content.<\/li><li>Links have a visible link focus indicator (web pages only).<\/li><\/ul>\n\n<\/div>\r\n\n\n\n<p><\/p>\n\n<\/div>\n\n<div class=\"wsu-cta \" >\n\t<a \t\t\t\t\thref=\"https:\/\/wsu.edu\/digital-accessibility\/documents\/2023\/10\/core-concept-check-sheet.pdf\/\"\t\n\t\tclass=\"wsu-button \">\n\t\t\t\n\t\tDownload Digital Accessibility Check Sheet (PDF)\u00a0\t\t\t\t\t<i class=\"wsu-icon wsu-i-download\"><\/i>\n\t\t\t<\/a>\n<\/div>\n\n\n\n<p><\/p>\n\n    <\/div><\/section>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<section  class=\"wsu-section\"  >\r\n        \n\n<h2>Resources from WSU Digital Accessibility<\/h2>\n\n\n<div class=\"wsu-card-wrapper wsu-card-wrapper--per-row-3\" >\r\n    \n<article class=\"wsu-card  wsu-color-background--white wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title \">\r\n\t\t\t<a href=\"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/links\/links-and-accessibility\/\">\t\t\t\tLinks and Accessibility\t\t\t<\/a>\t\t<\/h3>\r\n\t\t\t\t\t\t<div class=\"wsu-caption\">\r\n\t\t\tA review of 5 types of link accessibility errors and alerts with best practice information, tools for checking, and additional resources about links.\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t<\/article>\n<\/div>\n    <\/section>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<div class=\"wsu-row wsu-spacing-before--xxmedium wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"additional-resources\">Additional Resources&nbsp;<\/h2>\n\n\n<div class=\"wsu-card-wrapper wsu-card-wrapper--per-row-2\" >\r\n    \n<article class=\"wsu-card  wsu-color-background--gray-5 wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title  wsu-font-size--large\">\r\n\t\t\t\t\t\t\tWebpages\t\t\t\t\t<\/h3>\r\n\t\t\t\t\t\t\t\t<span class=\"wsu-card__content-custom\">\r\n\t\t\t\n\n<ul id=\"block-b1cbdb77-18a3-4236-8189-48ecaf6eb8bf\" class=\"wsu-list--style-arrow\"><li><a href=\"https:\/\/webaim.org\/techniques\/hypertext\/\"><strong>WebAim<\/strong>: Links and Hypertext<\/a><\/li><li><a href=\"https:\/\/www.section508.gov\/content\/guide-accessible-web-design-development\/#links_and_buttons\"><strong>Section508.gov<\/strong>: Links and Buttons<\/a><\/li><\/ul>\n\n\t\t<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t<\/article>\n\n<article class=\"wsu-card  wsu-color-background--gray-5 wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title  wsu-font-size--large\">\r\n\t\t\t\t\t\t\tLink Color Contrast Checker Tool\t\t\t\t\t<\/h3>\r\n\t\t\t\t\t\t\t\t<span class=\"wsu-card__content-custom\">\r\n\t\t\t\n\n<ul class=\"wsu-list--style-arrow\"><li><a href=\"https:\/\/www.section508.gov\/create\/documents\"><\/a><a href=\"https:\/\/webaim.org\/resources\/linkcontrastchecker\/\"><strong>WebAIM.org<\/strong>: Link Color Contrast Checker<\/a><\/li><\/ul>\n\n\t\t<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t<\/article>\n<\/div>\n<\/div>\r\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Clear, concise, and meaningful link text improves the accessibility and usability of digital content. Lengthy link text, ambiguous link text, and URLs as links hinders people&#8217;s ability to comprehend and access links quickly. <\/p>\n","protected":false},"author":2695,"featured_media":0,"parent":15,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"categories":[9],"tags":[],"wsuwp_university_category":[],"wsuwp_university_location":[],"wsuwp_university_org":[],"_links":{"self":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/22"}],"collection":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/users\/2695"}],"replies":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":40,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":3517,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/22\/revisions\/3517"}],"up":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/tags?post=22"},{"taxonomy":"wsuwp_university_category","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_category?post=22"},{"taxonomy":"wsuwp_university_location","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_location?post=22"},{"taxonomy":"wsuwp_university_org","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_org?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}