{"id":7410,"date":"2018-11-20T09:30:16","date_gmt":"2018-11-20T09:30:16","guid":{"rendered":"http:\/\/blogs.sussex.ac.uk\/tel\/?p=7410"},"modified":"2025-02-24T15:02:43","modified_gmt":"2025-02-24T15:02:43","slug":"canvas-know-how-accessibility-checker","status":"publish","type":"post","link":"https:\/\/blogs.sussex.ac.uk\/tel\/2018\/11\/20\/canvas-know-how-accessibility-checker\/","title":{"rendered":"Canvas Know-How: Using the Accessibility Checker"},"content":{"rendered":"\n<p>Thankyou for reading this EE blog post this is representative at the time it was written. <\/p>\n\n\n<p><span style=\"font-weight: 400\"><a href=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/CanvasKnowhow6.png\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7418\" src=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/CanvasKnowhow6.png\" alt=\"Decorative image of title.\" width=\"712\" height=\"400\" srcset=\"https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/CanvasKnowhow6.png 712w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/CanvasKnowhow6-300x169.png 300w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/CanvasKnowhow6-100x56.png 100w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/CanvasKnowhow6-150x84.png 150w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/CanvasKnowhow6-200x112.png 200w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/CanvasKnowhow6-450x253.png 450w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/CanvasKnowhow6-600x337.png 600w\" sizes=\"(max-width: 712px) 100vw, 712px\" \/><\/a>When developing your teaching materials in Canvas, it is important to consider online standards of accessibility to ensure that your content is inclusive of as many individual students as possible. This is important to ensure that equal access and opportunity is provided to all students including consideration for those who may diverse levels of ability for processing information. To support you in this, Canvas has a built in Accessibility checker feature in the Rich Content Editor that will help you to do this.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The accessibility checker will check for 11 different accessibility errors in total: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Table captions: Tables should include a caption describing the contents of the table.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Table header scope: Table headers should specify scope and the appropriate structure.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Table header: Tables should include at least one header.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Sequential headings: Heading levels should not be skipped (e.g. H2 to H4). However, the tool does not check if the first header starts with H2 or whether the headings are sequential with the rest of the content in the page. Tables do not begin with H1, which is designated for the page title.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Heading paragraphs: Headings should not contain more than 120 characters.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Image alt text: Images should include an alt attribute describing the image content.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Image alt filename: Image filenames should not be used as the alt attribute describing the image content. Currently, files uploaded directly to Canvas create a redirect that does not properly verify image filenames.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Image alt length: Alt attribute text should not contain more than 120 characters.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Adjacent links: Adjacent links with the same URL should be a single link. This rule verifies link errors where the link text may include spaces and break the link into multiple links.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Large text contrast: Text larger than 18pt (or bold 14pt) should display a minimum contrast ratio of 3:1.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Small text contrast: Text smaller than 18pt (or bold 14pt) should display a minimum contrast ratio of 4.5:1.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">The Accessibility checker is a feature within the Rich Content Editor, which is used for editing all pages and descriptive text within your Canvas modules. It can be used for checking accessibility of specific pieces of content that you editing. <\/span><\/p>\n<p><span style=\"font-weight: 400\">Select the button from the Rich Content Editor toolbar to begin a check.<\/span><\/p>\n<div id=\"attachment_7411\" style=\"width: 729px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0.png\"><img aria-describedby=\"caption-attachment-7411\" loading=\"lazy\" class=\"wp-image-7411 size-full\" src=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0.png\" alt=\"Illustrative image - the accessibility checker button is positioned as the last button on the Rich Content Editor toolbar\" width=\"719\" height=\"108\" srcset=\"https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0.png 719w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-300x45.png 300w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-100x15.png 100w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-150x23.png 150w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-200x30.png 200w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-450x68.png 450w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-600x90.png 600w\" sizes=\"(max-width: 719px) 100vw, 719px\" \/><\/a><p id=\"caption-attachment-7411\" class=\"wp-caption-text\">The accessibility checker button is positioned as the last button on the Rich Content Editor toolbar.<\/p><\/div>\n<p><span style=\"font-weight: 400\">After selecting the icon the Accessibility checker menu will appear on the right hand sign of the screen. If any accessibility errors are detected then they will be highlighted in a blue overlay. <\/span><\/p>\n<div id=\"attachment_7412\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1.png\"><img aria-describedby=\"caption-attachment-7412\" loading=\"lazy\" class=\"size-full wp-image-7412\" src=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1.png\" alt=\"Illustrative image - text highlights indicating errors appear within the Rich Content Editor content preview after a check has run.\" width=\"1600\" height=\"634\" srcset=\"https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1.png 1600w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1-300x119.png 300w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1-768x304.png 768w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1-1024x406.png 1024w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1-100x40.png 100w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1-150x59.png 150w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1-200x79.png 200w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1-450x178.png 450w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1-600x238.png 600w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-1-900x357.png 900w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-7412\" class=\"wp-caption-text\">Text highlights indicating errors appear within the Rich Content Editor content preview after a check has run.<\/p><\/div>\n<p><span style=\"font-weight: 400\">Where issues are detected, the Accessibility checker menu will explain the nature of the issue encountered and offer guidance on how to correct each issue. <\/span><\/p>\n<div id=\"attachment_7413\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2.png\"><img aria-describedby=\"caption-attachment-7413\" loading=\"lazy\" class=\"size-full wp-image-7413\" src=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2.png\" alt=\"Illustrative image - The accessibility checker has displayed a box allowing the text colour within the blue overlay to be altered.\" width=\"1600\" height=\"694\" srcset=\"https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2.png 1600w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2-300x130.png 300w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2-768x333.png 768w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2-1024x444.png 1024w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2-100x43.png 100w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2-150x65.png 150w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2-200x87.png 200w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2-450x195.png 450w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2-600x260.png 600w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-2-900x390.png 900w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-7413\" class=\"wp-caption-text\">The accessibility checker has displayed a box allowing the text colour within the blue overlay to be altered.<\/p><\/div>\n<p><span style=\"font-weight: 400\">In the example above the text header colour has a contrast ratio that is too low against the page background colour. This means that students, especially those with visual impairments may find it hard to read the text due to the difference in colour between the text and the background. As a result, the Accessibility checker has detected this and offered the option of changing the text to a more accessible colour.<\/span><\/p>\n<div id=\"attachment_7414\" style=\"width: 328px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-3.png\"><img aria-describedby=\"caption-attachment-7414\" loading=\"lazy\" class=\"size-full wp-image-7414\" src=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-3.png\" alt=\"Illustrative image - An image of the Accessibility checker showing the option to alter the text colour.\" width=\"318\" height=\"631\" srcset=\"https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-3.png 318w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-3-151x300.png 151w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-3-100x198.png 100w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-3-150x298.png 150w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-3-200x397.png 200w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-3-300x595.png 300w\" sizes=\"(max-width: 318px) 100vw, 318px\" \/><\/a><p id=\"caption-attachment-7414\" class=\"wp-caption-text\">An image of the Accessibility checker showing the option to alter the text colour.<\/p><\/div>\n<p><span style=\"font-weight: 400\">Once it has detected that an appropriate colour has been chosen it will allow you to click apply and resolve the issue.<\/span><\/p>\n<div id=\"attachment_7415\" style=\"width: 312px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/unnamed.png\"><img aria-describedby=\"caption-attachment-7415\" loading=\"lazy\" class=\" wp-image-7415\" src=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/unnamed.png\" alt=\"Illustrative image - The Accessibility checker changes can be applied by clicking the Apply button that appears in the bottom right hand corner.\" width=\"302\" height=\"604\" srcset=\"https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/unnamed.png 256w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/unnamed-150x300.png 150w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/unnamed-100x200.png 100w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/unnamed-200x400.png 200w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/a><p id=\"caption-attachment-7415\" class=\"wp-caption-text\">The Accessibility checker changes can be applied by clicking the Apply button that appears in the bottom right hand corner.<\/p><\/div>\n<p><span style=\"font-weight: 400\">If there are any other issues detected the checker will then move onto them, once all detected issues have been corrected the below screen will be displayed. This screen will also display if the Accessibility checker is used and no issues are detected. <\/span><\/p>\n<div id=\"attachment_7416\" style=\"width: 324px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-4.png\"><img aria-describedby=\"caption-attachment-7416\" loading=\"lazy\" class=\"size-full wp-image-7416\" src=\"http:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-4.png\" alt=\"Illustrative image - The Accessibility checker menu displays three balloons floating and showing text saying that no accessibility issues were detected.\" width=\"314\" height=\"531\" srcset=\"https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-4.png 314w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-4-177x300.png 177w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-4-100x169.png 100w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-4-150x254.png 150w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-4-200x338.png 200w, https:\/\/blogs.sussex.ac.uk\/tel\/files\/2018\/11\/pasted-image-0-4-300x507.png 300w\" sizes=\"(max-width: 314px) 100vw, 314px\" \/><\/a><p id=\"caption-attachment-7416\" class=\"wp-caption-text\">The Accessibility checker menu displays three balloons floating and showing text saying that no accessibility issues were detected.<\/p><\/div>\n<p><span style=\"font-weight: 400\">Please note that whilst the Accessibility checker does check for a range of accessibility issues it is not fully comprehensive and only acts as an supplemental aid in making your site more accessible. &nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Please see the <\/span><a href=\"https:\/\/community.canvaslms.com\/docs\/DOC-2061-accessibility-within-canvas\"><span style=\"font-weight: 400\">Accessibility within Canvas <\/span><\/a><span style=\"font-weight: 400\">and <\/span><a href=\"https:\/\/community.canvaslms.com\/docs\/DOC-2060-general-accessibility-design-guidelines\"><span style=\"font-weight: 400\">General Accessibility Design Guidelines <\/span><\/a><span style=\"font-weight: 400\">pages for more information on Accessibility within Canvas.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For more general information on web content accessibility guidelines please see the <\/span><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\"><span style=\"font-weight: 400\">WCAG overview page<\/span><\/a><span style=\"font-weight: 400\">. <\/span><\/p>","protected":false},"excerpt":{"rendered":"<p>Thankyou for reading this EE blog post this is representative at the time it was written. When developing your teaching materials in Canvas, it is important to consider online standards of accessibility to ensure that your content is inclusive of<span class=\"ellipsis\">&hellip;<\/span><\/p>\n<div class=\"read-more\"><a href=\"https:\/\/blogs.sussex.ac.uk\/tel\/2018\/11\/20\/canvas-know-how-accessibility-checker\/\">Read more &#8250;<\/a><\/div>\n<p><!-- end of .read-more --><\/p>\n","protected":false},"author":229,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[36,137836],"tags":[36,137836],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/posts\/7410"}],"collection":[{"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/users\/229"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/comments?post=7410"}],"version-history":[{"count":6,"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/posts\/7410\/revisions"}],"predecessor-version":[{"id":10236,"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/posts\/7410\/revisions\/10236"}],"wp:attachment":[{"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/media?parent=7410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/categories?post=7410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/tel\/wp-json\/wp\/v2\/tags?post=7410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}