{"id":20898,"date":"2024-12-16T11:34:58","date_gmt":"2024-12-16T16:34:58","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?page_id=20898"},"modified":"2025-08-01T14:46:29","modified_gmt":"2025-08-01T18:46:29","slug":"hyperlinks-must-be-in-proper-language","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/hyperlinks-must-be-in-proper-language\/","title":{"rendered":"Hyperlinks must be in proper 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                        Hyperlinks must be in proper language\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"accessibility\" class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>Hyperlinks must be in clear language and be meaningful (you can <a href=\"https:\/\/carleton.ca\/webaccessibility\/hyperlink-text-must-convey-what-a-link-will-do\/\">learn more about accessible hyperlinks<\/a> in another post)<\/p>\n\n\n\n<h2 id=\"reason\" class=\"wp-block-heading\">Reason<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Having hypertext read to you can be a frustrating and confusing ordeal if these links aren&#8217;t well-worded<\/li>\n\n\n\n<li>If the URL itself is used it will be read to the user &#8211; also frustrating!<\/li>\n\n\n\n<li>The meaning of a URL may never become apparent &#8211; or at the very end of several seconds of reading<\/li>\n\n\n\n<li>For anyone, reading a URL to try to understand when the link is annoying and possibly never going to be enlightening. <\/li>\n<\/ul>\n\n\n\n<h2 id=\"best-practice\" class=\"wp-block-heading\">Best practice<\/h2>\n\n\n\n<p>Some examples of hyperlink text that makes it easy to comprehend what will happen when the link is clicked:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/cuag.ca\/\">Visit the 杏吧原创 University Art Gallery<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/library.carleton.ca\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the MacOdrum&nbsp;Library website [in a new tab]<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/carleton.ca\/webservices\">Find out about Web Services<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/sprott.carleton.ca\/wp-content\/uploads\/2101A-S21-R.Smart-May5-1.pdf\">Read about BUSI2101A Organizational Behaviour [opens a PDF file]<\/a><\/li>\n<\/ul>\n\n\n\n<p>With email addresses this is important so that names are not garbled. It is best to use a call to action that describes what the anticipated outcome will be. For example, <\/p>\n\n\n\n<p><a href=\"mailto:web@carleton.ca\">Email Web Services<\/a> <\/p>\n\n\n\n<h2 id=\"example-of-less-accessible-practices\" class=\"wp-block-heading\">Example of less accessible practices<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Read about the class:<br><a href=\"https:\/\/www.universityaffairs.ca\/news\/news-article\/role-playing-games-are-breathing-new-life-into-the-history-classroom\/\">https:\/\/www.universityaffairs.ca\/news\/news-article\/role-playing-games-are-breathing-new-life-into-the-history-classroom\/<\/a>\n<ul class=\"wp-block-list\">\n<li>Note how this will be read to the user of a screen reader. It depends on settings but it might be something like: &#8220;Link &#8211; aitch tee tee pee ess colon back-slash back-slash double yoo double yoo double yoo universityaffairs dot ka back-slash news back-slash news dash article back-slash role dash playing dash games dash are-breathing dash new dash life dash into dash the dash history dash classroom back slash&#8221;<\/li>\n\n\n\n<li>Also note that the way many URLs are constructed, it is often only by listening to the end that a user will understand what the link leads to &#8211; even after they have mentally parsed out the dashes and slashes. Even people reading the link visually have to decipher to understand where they are going.<\/li>\n\n\n\n<li>We also don&#8217;t know how words, abbreviations, acronyms, or contractions will be read by a screen reader. For example &#8220;.ca&#8221; may be read out as &#8220;dot see ay&#8221;, &#8220;dot ka&#8221;, or &#8220;dot car&#8221;. In some languages it might even be &#8220;dot sah&#8221; or &#8220;dot sar&#8221;. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>The same is true of email addresses and often is worse. For example <a href=\"mailto:fmp.service.centre@carleton.ca\" target=\"_blank\" rel=\"noreferrer noopener\">fmp.service.centre@carleton.ca<\/a>&nbsp;\n<ul class=\"wp-block-list\">\n<li>This might be read as &#8220;Link &#8211; [either] Famump [or ] eff em pee dot service dot centre at carleton dot cah&#8221;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Email addresses at 杏吧原创 are usually rendered in the CUNET format &#8211; first name and last name are concatenated as in this example <a href=\"mailto:emmanuel.estephanides@cunet.carleton.ca\">georgeestephanides@cunet.carleton.ca<\/a>. You can bet that however a screen reader manages to read Professor Estephanides&#8217; name is not how Professor Estephanides pronounces it.<\/li>\n<\/ul>\n\n\n\n<p>It is also important to not use all capital letters as link text. Sometimes this is chosen in the belief that the text will jump out more. In fact, the link text being a vivid red does that for you. In this example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/carleton.ca\/upass\/opt-in-and-opt-out\/\">OPT-IN NOW<\/a> <\/li>\n<\/ul>\n\n\n\n<p>If someone sees a word rendered differently they might not be able to do what so many people do unconsciously: read not phonetically but by the shape of the word. <\/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>: It takes some cognitive energy to look at <a href=\"mailto:emmanuel.estephanides@cunet.carleton.ca\">georgeestephanides@cunet.carleton.ca<\/a> and it decipher it as <em class=\"myprefix-text-italic\">George Estephapnides<\/em> (Georgee Stephanides? George E. Stephanides?)<\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">SEO<\/strong>: Text has to be easily parsable by search engines. <a href=\"https:\/\/graduate.carleton.ca\/programs\/masters-programs\/\">杏吧原创 University&#8217;s Master&#8217;s Program<\/a> is easier to parse than <a href=\"https:\/\/graduate.carleton.ca\/programs\/masters-programs\/ \">https:\/\/graduate.carleton.ca\/programs\/masters-programs\/ <\/a><\/li>\n\n\n\n<li><strong class=\"myprefix-text-bold\">Marketing<\/strong>: Using less energy to decipher a link (see Usability) makes people more likely to stay longer on the site and so to visit\/apply to the University.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"what-wcag-wave-aim-says\" class=\"wp-block-heading\">What WCAG\/WAVE-AIM says<\/h2>\n\n\n\n<p>WCAG only refers to text links being as easy to read as possible. It doesn&#8217;t mention specific measures around not using URLs but simply says that &#8220;The&nbsp;purpose of each link&nbsp;can be determined from the link text alone,&#8221; which it cannot be when only the URL is used. <\/p>\n\n\n\n<p><a href=\"https:\/\/webaim.org\/techniques\/hypertext\/link_text#urls\">AIM summarizes the best practices around use of URLs<\/a> on their site.<\/p>\n\n\n\n<p>WAVE does not issue a specific error or alert for this. However, that does not mean it is not a critical barrier to accessibility if ignored. <\/p>\n\n\n\n<p>(Be sure to <a href=\"https:\/\/app.pope.tech\/result-documentation\">learn more about errors and alerts<\/a>.)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Make sure you use clear text, and never a URL as the text for a link<\/p>\n","protected":false},"author":6,"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-20898","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\/20898","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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/comments?post=20898"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20898\/revisions"}],"predecessor-version":[{"id":21338,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/20898\/revisions\/21338"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=20898"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=20898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}