{"id":21341,"date":"2025-08-07T12:13:13","date_gmt":"2025-08-07T16:13:13","guid":{"rendered":"https:\/\/carleton.ca\/webaccessibility\/?page_id=21341"},"modified":"2025-08-07T14:21:05","modified_gmt":"2025-08-07T18:21:05","slug":"web-accessibility-checklist","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/web-accessibility-checklist\/","title":{"rendered":"Web accessibility checklist"},"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                        Web accessibility checklist\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>Use this list to make sure your site is as accessible as possible. You can also <a href=\"https:\/\/carleton.ca\/webaccessibility\/wp-content\/uploads\/sites\/96\/2025\/08\/Accessibility-checklist.pdf\">access the information on this page as a document<\/a>.<\/p>\n\n\n\n<p>You can use resources on this website to guide you with some specific aspects.<\/p>\n\n\n\n<p>Tip: You can use the table of contents below as a quick checklist of some of the most important aspects of accessibility, or dive into each section to learn more and make improvements to your content.<\/p>\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=\"#do-images-have-alt-text\" class=\"font-medium hover:underline\">\n                        Do images have alt text?\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=\"#is-an-image-being-used-as-a-link\" class=\"font-medium hover:underline\">\n                        Is an image being used as a link?\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=\"#do-all-pages-have-a-proper-and-consistent-structure-and-hierarchy\" class=\"font-medium hover:underline\">\n                        Do all pages have a proper and consistent structure and hierarchy?\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=\"#are-sub-headings-being-created-properly\" class=\"font-medium hover:underline\">\n                        Are sub-headings being created properly?\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=\"#are-hyperlinks-written-in-proper-language\" class=\"font-medium hover:underline\">\n                        Are hyperlinks written in proper language?\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=\"#does-the-hyperlink-language-indicate-what-will-happen-if-the-link-is-clicked\" class=\"font-medium hover:underline\">\n                        Does the hyperlink language indicate what will happen if the link is clicked?\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=\"#is-information-on-the-pages-clear-concise-and-legible\" class=\"font-medium hover:underline\">\n                        Is information on the pages clear, concise, and legible?\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                        8.\n                    <\/span>\n\n                    <a href=\"#are-tables-being-used-correctly\" class=\"font-medium hover:underline\">\n                        Are tables being used correctly?\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<h2 id=\"do-images-have-alt-text\" class=\"wp-block-heading\">Do images have alt text?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Is the image decorative? No? Then it needs alt text<\/li>\n\n\n\n<li>Is the image a graph, chart or other complex informational piece? Remove the alt text and add a caption or description instead.<\/li>\n\n\n\n<li>Does the alt text describe what is in the image? If no, then change it to describe what is in the picture. And compare with the item below:<\/li>\n\n\n\n<li>Does the image have a caption? Is the alt text doing what the caption should?<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/carleton.ca\/webaccessibility\/alt-text-should-appear-on-some-images\/\">Learn more about alt text<\/a>.<\/p>\n\n\n\n<h2 id=\"is-an-image-being-used-as-a-link\" class=\"wp-block-heading\">Is an image being used as a link?<\/h2>\n\n\n\n<p>If so, it\u2019s a special case: make sure the alt text describes what will happen if a user clicks on the picture. Example: \u201cView a gallery of images from this event\u201d.<\/p>\n\n\n\n<p>You can <a href=\"https:\/\/carleton.ca\/webaccessibility\/alt-text-on-a-linked-image-describes-the-action\/\">read more about using alt text when image linking<\/a> on our website.<\/p>\n\n\n\n<h2 id=\"do-all-pages-have-a-proper-and-consistent-structure-and-hierarchy\" class=\"wp-block-heading\">Do all pages have a proper and consistent structure and hierarchy?<\/h2>\n\n\n\n<p>Pages with more than a couple of paragraphs should be organized under subheadings. Do all pages meet this criterion? <\/p>\n\n\n\n<p><a href=\"https:\/\/carleton.ca\/webaccessibility\/page-organization-2\/\">Read more about page organization<\/a>.<\/p>\n\n\n\n<h2 id=\"are-sub-headings-being-created-properly\" class=\"wp-block-heading\">Are sub-headings being created properly?<\/h2>\n\n\n\n<p>Are the subheadings created properly? They have to be created using the headings block, not by simply bolding ordinary paragraph text. <\/p>\n\n\n\n<p><a href=\"https:\/\/carleton.ca\/webaccessibility\/subheadings-must-be-proper-subheadings\/\">Read more about creating proper subheadings<\/a>.<\/p>\n\n\n\n<h2 id=\"are-hyperlinks-written-in-proper-language\" class=\"wp-block-heading\">Are hyperlinks written in proper language?<\/h2>\n\n\n\n<p>a. Are any links on the site using the address as the link text? Links should never appear in this way, for example <strong class=\"myprefix-text-bold\">andrewriddles@cunet.careleon.ca<\/strong> or <strong class=\"myprefix-text-bold\">https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-05-28-at-4.10.57-PM.png<\/strong>.<\/p>\n\n\n\n<p><a href=\"https:\/\/carleton.ca\/webaccessibility\/hyperlinks-must-be-in-proper-language\/\">Find out why using links as the text for the link is not accessible<\/a>.<\/p>\n\n\n\n<h2 id=\"does-the-hyperlink-language-indicate-what-will-happen-if-the-link-is-clicked\" class=\"wp-block-heading\">Does the hyperlink language indicate what will happen if the link is clicked? <\/h2>\n\n\n\n<p>Linked very closely with the previous point, will a person reading a link<br>(or hearing it from a screen reader) know what will happen when the link is clicked?<\/p>\n\n\n\n<p>Learn more about<a href=\"http:\/\/carleton.ca\/its\"> ITS<\/a>: does not tell someone using a screen reader what the link is about but<\/p>\n\n\n\n<p><a href=\"http:\/\/carleton.ca\/its\">Learn more about ITS<\/a> tells us what the anticipated outcome will be if clicked<\/p>\n\n\n\n<p>By the way, all the links on this page have language to demonstrate what will happen if visited, for example, <a href=\"https:\/\/carleton.ca\/webaccessibility\/hyperlink-text-must-convey-what-a-link-will-do\/\">read more about making link language explicit<\/a>.<\/p>\n\n\n\n<h2 id=\"is-information-on-the-pages-clear-concise-and-legible\" class=\"wp-block-heading\">Is information on the pages clear, concise, and legible?<\/h2>\n\n\n\n<p>a. Are paragraphs on the pages of this site short and succinct? Do they even have paragraphs?<br>b. Do sentences run on, with multiple clauses?<br>c. Are the pages broken up visually? Do they make use of features such as bullet points to break out information?<\/p>\n\n\n\n<p><a href=\"https:\/\/carleton.ca\/webaccessibility\/make-text-clear-concise-and-legible\/\">Read about why clear text and info are important<\/a>.<\/p>\n\n\n\n<h2 id=\"are-tables-being-used-correctly\" class=\"wp-block-heading\">Are tables being used correctly?<\/h2>\n\n\n\n<p>a. Are tables being used to layout page content such as paragraphs and images? (hint: they should never be used for this!)<br>b. Are tables properly formed? Do they have a table header?<br>c. Is the kind of data presented within the table appropriate for being displayed in this way? (for example, tables are a great way to present short amounts of consistent data, such as laboratory results, or a list such as Course name, Course number, Department, Faculty member to present data about a unit\u2019s course offerings).<\/p>\n\n\n\n<p><a href=\"https:\/\/carleton.ca\/webaccessibility\/use-of-tables\/\">Learn more about accessible tables<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use this list to make sure your site is as accessible as possible. You can also access the information on this page as a document. You can use resources on this website to guide you with some specific aspects. Tip: You can use the table of contents below as a quick checklist of some of [&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":[],"class_list":["post-21341","page","type-page","status-publish","hentry"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21341","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=21341"}],"version-history":[{"count":4,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21341\/revisions"}],"predecessor-version":[{"id":21354,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/pages\/21341\/revisions\/21354"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/media?parent=21341"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webaccessibility\/wp-json\/wp\/v2\/cu_page_type?post=21341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}