{"id":21140,"date":"2025-03-26T08:10:45","date_gmt":"2025-03-26T12:10:45","guid":{"rendered":"https:\/\/carleton.ca\/webaccessibility\/?page_id=21140"},"modified":"2025-07-08T15:17:56","modified_gmt":"2025-07-08T19:17:56","slug":"text-and-hyperlinks","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/text-and-hyperlinks\/","title":{"rendered":"Text and hyperlinks"},"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                        Text and hyperlinks\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n    \n\n\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                        \n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white cu-section--cards ml-offset-center md:px-8 lg:px-14\" data-attributes=\"&#x7B;&quot;numberOfPosts&quot;&#x3A;12,&quot;moreButton&quot;&#x3A;&quot;all&quot;,&quot;showDates&quot;&#x3A;false,&quot;showExcerpts&quot;&#x3A;false,&quot;blockType&quot;&#x3A;&quot;cards&quot;,&quot;contentType&quot;&#x3A;&quot;page&quot;,&quot;currentPage&quot;&#x3A;1,&quot;blockBackground&quot;&#x3A;&quot;white&quot;,&quot;numberOfColumns&quot;&#x3A;3,&quot;showImages&quot;&#x3A;false,&quot;showHours&quot;&#x3A;false,&quot;showAllPosts&quot;&#x3A;false,&quot;order&quot;&#x3A;&quot;ASC&quot;,&quot;orderBy&quot;&#x3A;&quot;title&quot;,&quot;showFilter&quot;&#x3A;false,&quot;taxName&quot;&#x3A;&quot;cu_page_type&quot;,&quot;categories&quot;&#x3A;&quot;23&quot;,&quot;tags&quot;&#x3A;&quot;&quot;&#x7D;\" data-page=\"2\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n                \n                \n        <div class=\"cu-loading hidden text-center mx-auto h-6 w-6 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]\" role=\"status\">\n    <span class=\"!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]\">\n        Loading&#8230;\n    <\/span>\n<\/div>\n\n                                        \n        <p class=\"cu-no-posts hidden\">\n            No\n            page\n\n            posts are available.\n        <\/p>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        Avoiding colour to alert users to meaning\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/avoiding-colour-to-alert-users-to-meaning\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Avoiding colour to alert users to meaning\n            <\/span>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        Convey meaning in text, not images\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/no-text-conveying-meaning-in-images\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Convey meaning in text, not images\n            <\/span>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        Create proper subheadings\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/subheadings-must-be-proper-subheadings\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Create proper subheadings\n            <\/span>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        Ensure text colour contrasts with background colour\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/ensure-text-colour-contrasts-with-background-colour\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Ensure text colour contrasts with background colour\n            <\/span>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        Hyperlink text should convey what a link will do\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/hyperlink-text-must-convey-what-a-link-will-do\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Hyperlink text should convey what a link will do\n            <\/span>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        Hyperlinks must be in proper language\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/hyperlinks-must-be-in-proper-language\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Hyperlinks must be in proper language\n            <\/span>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        Make information clear, concise, and legible\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/make-text-clear-concise-and-legible\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Make information clear, concise, and legible\n            <\/span>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        No need to employ visual cues in text aside from sub-headings\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/no-need-to-employ-visual-cues-in-text-aside-from-sub-headings\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                No need to employ visual cues in text aside from sub-headings\n            <\/span>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        Use lower and upper case letters appropriately\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/appropriate-use-of-lower-and-upper-case-letters\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Use lower and upper case letters appropriately\n            <\/span>\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 group duration-300 ease-in hover:scale-[1.02] hover:shadow-cu-black-200\">\n\n    \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        Varying link language\n    <\/h2>\n\n            <\/header>\n\n\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/varying-link-language\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Varying link language\n            <\/span>\n        <\/a>\n    <\/footer>\n<\/div>\n\n                    \n        <\/div>\n        \n                                    \n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","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":[24,14],"class_list":["post-21140","page","type-page","status-publish","hentry","cu_page_type-accessibility-category-listing","cu_page_type-general"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21140","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=21140"}],"version-history":[{"count":2,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21140\/revisions"}],"predecessor-version":[{"id":21331,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21140\/revisions\/21331"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=21140"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=21140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}