{"id":21355,"date":"2025-09-16T07:43:06","date_gmt":"2025-09-16T11:43:06","guid":{"rendered":"https:\/\/carleton.ca\/webaccessibility\/?page_id=21355"},"modified":"2025-09-16T07:46:39","modified_gmt":"2025-09-16T11:46:39","slug":"varying-link-language","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/varying-link-language\/","title":{"rendered":"Varying link language"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Varying link language\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#accessibility\" class=\"font-medium hover:underline\">\n                        Accessibility\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#reason\" class=\"font-medium hover:underline\">\n                        Reason\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#best-practice\" class=\"font-medium hover:underline\">\n                        Best practice\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        4.\n                    <\/span>\n\n                    <a href=\"#quick-links\" class=\"font-medium hover:underline\">\n                        Quick Links\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        5.\n                    <\/span>\n\n                    <a href=\"#example-of-poor-practice\" class=\"font-medium hover:underline\">\n                        Example of poor practice\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        6.\n                    <\/span>\n\n                    <a href=\"#additional-benefits\" class=\"font-medium hover:underline\">\n                        Additional benefits\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        7.\n                    <\/span>\n\n                    <a href=\"#what-wcag-says\" class=\"font-medium hover:underline\">\n                        What WCAG says\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<h2 id=\"accessibility\" class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>Hyperlinks and button text should not be repetitive across a page.<\/p>\n\n\n\n<h2 id=\"reason\" class=\"wp-block-heading\">Reason<\/h2>\n\n\n\n<p>A common method for users who employ a screen reader is to browse from link-to-link. If the link is the same for every link for the whole, or in a section of a page these links become meaningless and unusable.<\/p>\n\n\n\n<h2 id=\"best-practice\" class=\"wp-block-heading\">Best practice<\/h2>\n\n\n\n<p>If you have several links performing the same function but for different targets, you can vary them. For example:<\/p>\n\n\n\n<p><a href=\"https:\/\/carleton.ca\/sjc\/journalism\/\">Learn more about Journalism<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/carleton.ca\/sjc\/communication\/\">Learn more about Communication &amp; Media Studies<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/carleton.ca\/history\/\">Learn more about History<\/a> <\/p>\n\n\n\n<p>(Note how the link also includes the call to action &#8211; crucial for allowing visitors to understand what will happen when they click the link.)<\/p>\n\n\n\n<p>The same goes for buttons. <\/p>\n\n\n\n<p>In addition, one of the great aspects of Featured Content cards is that each of their buttons can have different messaging:<\/p>\n\n\n    \n<section class=\"w-screen px-6 cu-section cu-section--grey ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl bg-cu-black-50 max-w-screen-2xl mx-auto rounded-xl px-6 py-5 md:px-14 md:py-12 md:space-y-10 cu-prose-first-last\">\n\n                            \n\n\n<header class=\"mb-6 cu-pageheader cu-component-updated md:mb-12\">\n    <h2 id=\"quick-links\" class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] pb-4 after:w-8 after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px\">\n        Quick Links\n    <\/h2>\n\n            <p class=\"max-w-5xl font-light prose-lg md:prose-2xl\">\n            Find resources and support for your research initiatives.\n        <\/p>\n    <\/header>\n        \n        <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-3 gap-6 md:gap-10\">\n            \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100   \">\n            <figure class=\"mx-6 mt-6 mb-2 overflow-hidden max-w-[45%] @xl:md:max-w-[25%] rounded-md aspect-[4\/2.7]\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/its-cuthemedev1.carleton.ca\/research\/wp-content\/uploads\/sites\/42\/Research-Achievement-Awards-2024-web-1-e1725983496678-300x200.jpg\" alt=\"\" width=\"200\" height=\"133\"><\/figure>\n        \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Funding and Awards\n    <\/h2>\n\n            <\/header>\n\n        \n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/its-cuthemedev1.carleton.ca\/research\/research-support\/funding-and-awards\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Read more about Funding\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100   \">\n            <figure class=\"mx-6 mt-6 mb-2 overflow-hidden max-w-[45%] @xl:md:max-w-[25%] rounded-md aspect-[4\/2.7]\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/its-cuthemedev1.carleton.ca\/research\/wp-content\/uploads\/sites\/42\/307277-award-generic-700435x290-1.jpg\" alt=\"\" width=\"200\" height=\"133\"><\/figure>\n        \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Award-Winning Researchers\n    <\/h2>\n\n            <\/header>\n\n        \n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/its-cuthemedev1.carleton.ca\/research\/our-impact\/award-winning-researchers\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Read about our Researchers\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100   \">\n            <figure class=\"mx-6 mt-6 mb-2 overflow-hidden max-w-[45%] @xl:md:max-w-[25%] rounded-md aspect-[4\/2.7]\">\n            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/its-cuthemedev1.carleton.ca\/research\/wp-content\/uploads\/sites\/42\/2025\/06\/Ericsson-杏吧原创-Group-TechTalks-June-2025-300x200.jpg\" alt=\"\" width=\"200\" height=\"133\"><\/figure>\n        \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Partner with 杏吧原创\n    <\/h2>\n\n            <\/header>\n\n        \n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/its-cuthemedev1.carleton.ca\/research\/partnerships\/partner-with-carleton\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Partner with 杏吧原创\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n        <\/div>\n\n        \n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"example-of-poor-practice\" class=\"wp-block-heading\">Example of poor practice<\/h2>\n\n\n\n<p>A person encountering this content:<\/p>\n\n\n\n<p>Journalism <a href=\"https:\/\/google.com\">Learn more<\/a><\/p>\n\n\n\n<p>Communications &amp; Media Studies <a href=\"https:\/\/google.com\">Learn more<\/a><\/p>\n\n\n\n<p>History <a href=\"https:\/\/google.com\">Learn more<\/a><\/p>\n\n\n\n<p>when using a screen reader will only hear: &#8220;<a href=\"https:\/\/google.com\">Link: learn more<\/a><a href=\"Link: learn more\"> <\/a><a href=\"https:\/\/google.com\">Link: learn more<\/a> <a href=\"https:\/\/google.com\">Link: learn more<\/a><\/p>\n\n\n\n<h2 id=\"additional-benefits\" class=\"wp-block-heading\">Additional benefits<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong class=\"myprefix-text-bold\">Usability<\/strong>: A link that is more accessible to someone with a screen reader is more accessible to all humans too &#8211; tjey have more info about what the link will do.<\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">SEO<\/strong>: Google etc. will rank a site more highly when the content, including hyperlinks, is more specific.<\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">Marketing<\/strong>: Contributing to more accessible websites, more accessible links show we are serious about making sites easier to scan and use. <\/li>\n<\/ul>\n\n\n\n<h2 id=\"what-wcag-says\" class=\"wp-block-heading\">What WCAG says<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-refs.html\">Learn more about link text<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Accessibility Hyperlinks and button text should not be repetitive across a page. Reason A common method for users who employ a screen reader is to browse from link-to-link. If the link is the same for every link for the whole, or in a section of a page these links become meaningless and unusable. Best practice [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[18,14,23],"class_list":["post-21355","page","type-page","status-publish","hentry","cu_page_type-accessibility","cu_page_type-general","cu_page_type-text-and-hyperlinks"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/comments?post=21355"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21355\/revisions"}],"predecessor-version":[{"id":21360,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21355\/revisions\/21360"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=21355"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=21355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}