{"id":3,"date":"2024-12-16T11:24:13","date_gmt":"2024-12-16T16:24:13","guid":{"rendered":"https:\/\/carleton.ca\/webaccessibility\/homepage\/"},"modified":"2025-08-01T12:12:34","modified_gmt":"2025-08-01T16:12:34","slug":"homepage","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/","title":{"rendered":"Start from Accessibility"},"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-max  md:space-y-10 cu-prose-first-last\">\n\n        \n                    \n                    \n            \n    <div class=\"cu-wideimage relative flex items-center justify-center mx-auto px-8 overflow-hidden md:px-16 rounded-xl not-prose  my-6 md:my-12 first:mt-0 bg-opacity-50 bg-cover bg-cu-black-50 py-24 md:py-28 lg:py-36 xl:py-48\" style=\"background-image: url(https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/wa-banner.png); background-position: 50% 50%;\">\n\n                    <div class=\"absolute top-0 w-full h-screen\" style=\"background-color:rgba(0,0,0,0.600);\"><\/div>\n        \n        <div class=\"relative z-[2] max-w-4xl w-full flex flex-col items-center gap-2 cu-wideimage-image cu-zero-first-last\">\n            <header class=\"mx-auto mb-6 text-center text-white cu-pageheader cu-component-updated cu-pageheader--center md:mb-12\">\n\n                                    <h1 class=\"cu-prose-first-last font-semibold mb-2 text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] cu-pageheader--center text-center mx-auto after:left-px\">\n                        Start from Accessibility\n                    <\/h1>\n                \n                            <\/header>\n        <\/div>\n\n            <\/div>\n\n    \n\n    <\/div>\n<\/section>\n\n\n\n<p>This site has a single aim: to help you to <strong class=\"myprefix-text-bold\">make web content more accessible<\/strong> at Carleton.<\/p>\n\n\n\n<p>It is best to create accessible content from the start. This also improves a website&#8217;s usability and searchability, ensures <a href=\"https:\/\/www.ontario.ca\/laws\/statute\/05a11\" target=\"_blank\" rel=\"noreferrer noopener\">AODA<\/a> compliance, and saves time and money. Approaching accessibility by viewing it as a way to improve a website&#8217;s overall content means that it is a crucial strategy to building great sites.<\/p>\n\n\n\n<h2 id=\"how-to-use-this-site\" class=\"wp-block-heading\">How to use this site<\/h2>\n\n\n\n<p>Use the links below to view areas of best practice in accessibility. Each record demonstrates the importance of the practice and includes examples of how to make your own content more accessible. Check your site to see if you are following best practices. <\/p>\n\n\n\n<h2 id=\"top-accessibility-tips\" class=\"wp-block-heading\">Top accessibility tips<\/h2>\n\n\n\n    \n\n    \n\n\n                                                                                                                                                                                                                                                                                                                                                                                                                                                                        \n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--grey cu-section--cards ml-offset-center  md:px-8 lg:px-14\" data-attributes=\"&#x7B;&quot;blockBackground&quot;&#x3A;&quot;grey&quot;,&quot;showImages&quot;&#x3A;true,&quot;showDates&quot;&#x3A;false,&quot;numberOfColumns&quot;&#x3A;&quot;2&quot;,&quot;numberOfPosts&quot;&#x3A;6,&quot;moreButton&quot;&#x3A;&quot;none&quot;,&quot;currentPage&quot;&#x3A;1,&quot;blockType&quot;&#x3A;&quot;listing&quot;,&quot;contentType&quot;&#x3A;&quot;page&quot;,&quot;taxName&quot;&#x3A;&quot;cu_page_type&quot;,&quot;order&quot;&#x3A;&quot;ASC&quot;,&quot;orderBy&quot;&#x3A;&quot;title&quot;,&quot;showAllPosts&quot;&#x3A;false,&quot;showExcerpts&quot;&#x3A;true,&quot;showFilter&quot;&#x3A;false,&quot;showHours&quot;&#x3A;false,&quot;categories&quot;&#x3A;&quot;25&quot;&#x7D;\" data-page=\"2\">\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        <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=\"w-full max-w-5xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component-updated not-prose\">\n            <ul class=\"grid cu-stackedlist--posts cu-stackedlist--2 md:grid-cols-2\">\n\n                                                        \n<li class=\"cu-listing not-prose relative overflow-hidden @container bg-white p-6 md:p-8 !my-0\">\n    <div class=\"flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full\">\n                    <figure class=\"flex-none max-w-[30%] @sm:md:max-w-[25%] hidden md:block aspect-[3\/2]\">\n                <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/images-for-alt-text-page-600x400.png\" alt=\"\" width=\"600\" height=\"400\" \/>\n            <\/figure>\n        \n        <div class=\"flex flex-col flex-1 gap-3\">\n\n            \n                <header class=\"flex flex-col gap-3 \">\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        Alt text should appear on some images\n    <\/h2>\n\n            <\/header>\n\n\n                        \n\n                            <p class=\"text-base text-cu-black-700\">\n                    Make sure images that need it have a concise description of what is being conveyed in a picture.\n                                    <\/p>\n            \n            <footer class=\"pt-5 mt-auto text-white\">\n                <a href=\"https:\/\/carleton.ca\/webaccessibility\/alt-text-should-appear-on-some-images\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    View Page\n                    <span class=\"sr-only\">\n                        titled\n                        Alt text should appear on some images\n                    <\/span>\n                <\/a>\n            <\/footer>\n        <\/div>\n    <\/div>\n<\/li>\n\n                                        \n<li class=\"cu-listing not-prose relative overflow-hidden @container bg-white p-6 md:p-8 !my-0\">\n    <div class=\"flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full\">\n                    <figure class=\"flex-none max-w-[30%] @sm:md:max-w-[25%] hidden md:block aspect-[3\/2]\">\n                <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/page-hierarchy.png\" alt=\"Rectangles on a chalk board displayed in a triangle formation.\" width=\"600\" height=\"400\" \/>\n            <\/figure>\n        \n        <div class=\"flex flex-col flex-1 gap-3\">\n\n            \n                <header class=\"flex flex-col gap-3 \">\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        Always give a page a proper hierarchy\n    <\/h2>\n\n            <\/header>\n\n\n                        \n\n                            <p class=\"text-base text-cu-black-700\">\n                    Page hierarchy creates a way a page can be read by a screen reader, or by a user who scans the page visually. \n                                    <\/p>\n            \n            <footer class=\"pt-5 mt-auto text-white\">\n                <a href=\"https:\/\/carleton.ca\/webaccessibility\/a-page-must-have-a-proper-hierarchy\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    View Page\n                    <span class=\"sr-only\">\n                        titled\n                        Always give a page a proper hierarchy\n                    <\/span>\n                <\/a>\n            <\/footer>\n        <\/div>\n    <\/div>\n<\/li>\n\n                                        \n<li class=\"cu-listing not-prose relative overflow-hidden @container bg-white p-6 md:p-8 !my-0\">\n    <div class=\"flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full\">\n                    <figure class=\"flex-none max-w-[30%] @sm:md:max-w-[25%] hidden md:block aspect-[3\/2]\">\n                <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/hyperlinks-1-600x400.png\" alt=\"\" width=\"600\" height=\"400\" \/>\n            <\/figure>\n        \n        <div class=\"flex flex-col flex-1 gap-3\">\n\n            \n                <header class=\"flex flex-col gap-3 \">\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\n                            <p class=\"text-base text-cu-black-700\">\n                    Don&#8217;t leave users guessing what will happen when a link is clicked &#8211; give them context and clear wording.\n                                    <\/p>\n            \n            <footer class=\"pt-5 mt-auto text-white\">\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    <\/div>\n<\/li>\n\n                                        \n<li class=\"cu-listing not-prose relative overflow-hidden @container bg-white p-6 md:p-8 !my-0\">\n    <div class=\"flex flex-col @lg:md:flex-row gap-5 @lg:md:gap-7 h-full\">\n                    <figure class=\"flex-none max-w-[30%] @sm:md:max-w-[25%] hidden md:block aspect-[3\/2]\">\n                <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/04\/text-on-a-page-600x400.png\" alt=\"illegible text on a a page\" width=\"600\" height=\"400\" \/>\n            <\/figure>\n        \n        <div class=\"flex flex-col flex-1 gap-3\">\n\n            \n                <header class=\"flex flex-col gap-3 \">\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\n                            <p class=\"text-base text-cu-black-700\">\n                    Accessibility Text information must be clear and concise. It should be broken down visually to help not overwhelm the user. Reason Creating clear and concise\n                                            &#8230;\n                                    <\/p>\n            \n            <footer class=\"pt-5 mt-auto text-white\">\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    <\/div>\n<\/li>\n\n                            \n            <\/ul>\n        <\/div>\n        \n                                    \n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"all-web-accessibility-resources\" class=\"wp-block-heading\">All web accessibility resources<\/h2>\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;numberOfColumns&quot;&#x3A;4,&quot;numberOfPosts&quot;&#x3A;-1,&quot;moreButton&quot;&#x3A;&quot;viewmore&quot;,&quot;showAllPosts&quot;&#x3A;true,&quot;showDates&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;showImages&quot;&#x3A;false,&quot;showExcerpts&quot;&#x3A;true,&quot;showHours&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;18&quot;,&quot;tags&quot;&#x3A;&quot;&quot;&#x7D;\" data-page=\"2\">\n    <div class=\"space-y-6 cu-max-w-child-7xl  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-7xl md:grid-cols-2 lg:grid-cols-4 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        Alt text on a linked image describes the action\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Accessibility Alt text must always appear on an image which is being used as a link. Reason Although not every image needs to have alt\n                                            &#8230;\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/alt-text-on-a-linked-image-describes-the-action\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Alt text on a linked image describes the action\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        Alt text should appear on some images\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Make sure images that need it have a concise description of what is being conveyed in a picture.\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/alt-text-should-appear-on-some-images\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Alt text should appear on some 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        Always give a page a proper hierarchy\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Page hierarchy creates a way a page can be read by a screen reader, or by a user who scans the page visually. \n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/a-page-must-have-a-proper-hierarchy\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Always give a page a proper hierarchy\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        Avoiding colour to alert users to meaning\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Accessibility Alerting your users is important and we have many ways to do this. The best way is almost always text\/language. Reason Some methods used\n                                            &#8230;\n                                    <\/p>\n            \n        <\/div>\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            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Images should not have text that is attempting to convey a meaning or message.\n\n\n                                    <\/p>\n            \n        <\/div>\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            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Accessibility Because subheadings are key to navigable, accessible pages, they must be created correctly, not just by bolding text. Reason Subheadings are critical to accessible\n                                            &#8230;\n                                    <\/p>\n            \n        <\/div>\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            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Accessibility Text should always be rendered on the page in a colour that contrasts well enough with the background to make it most legible. Reason\n                                            &#8230;\n                                    <\/p>\n            \n        <\/div>\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            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Don&#8217;t leave users guessing what will happen when a link is clicked &#8211; give them context and clear wording.\n                                    <\/p>\n            \n        <\/div>\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            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Make sure you use clear text, and never a URL as the text for a link\n                                    <\/p>\n            \n        <\/div>\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            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Accessibility Text information must be clear and concise. It should be broken down visually to help not overwhelm the user. Reason Creating clear and concise\n                                            &#8230;\n                                    <\/p>\n            \n        <\/div>\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            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Accessibility We do not need to provide visual cues in texts to break up a page (for example by using a string of underscores or\n                                            &#8230;\n                                    <\/p>\n            \n        <\/div>\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        Proper use of tables\n    <\/h2>\n\n            <\/header>\n\n\n            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    Accessibility Tables can be used to display the kind of information that is appropriate, and that kind of data only. It has to be created\n                                            &#8230;\n                                    <\/p>\n            \n        <\/div>\n    \n    <footer class=\"px-6 pt-3 mt-auto md:pt-5\">\n        <a href=\"https:\/\/carleton.ca\/webaccessibility\/use-of-tables\/\" class=\"cu-button cu-button--red cu-button--small\">\n            View Page\n            <span class=\"sr-only\">\n                titled\n                Proper use of tables\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            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    The use of appropriate lower and upper case letters makes text much more recognizable, legible, and accessible.\n\n\n                                    <\/p>\n            \n        <\/div>\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            <div class=\"flex flex-col px-6\">\n\n                        \n\n                                        <p class=\"text-base text-cu-black-700\">\n                    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\n                                            &#8230;\n                                    <\/p>\n            \n        <\/div>\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":"<p>This site has a single aim: to help you to make web content more accessible at Carleton. It is best to create accessible content from the start. This also improves a website&#8217;s usability and searchability, ensures AODA compliance, and saves time and money. Approaching accessibility by viewing it as a way to improve a website&#8217;s [&hellip;]<\/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":[14],"class_list":["post-3","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/3","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=3"}],"version-history":[{"count":6,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/3\/revisions"}],"predecessor-version":[{"id":21339,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/3\/revisions\/21339"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}