{"id":4803,"date":"2017-07-11T14:16:06","date_gmt":"2017-07-11T04:16:06","guid":{"rendered":"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/?p=4803"},"modified":"2017-07-21T00:46:08","modified_gmt":"2017-07-20T14:46:08","slug":"creating-accessible-content-canvas","status":"publish","type":"post","link":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/creating-accessible-content-canvas\/","title":{"rendered":"Creating accessible content in Canvas"},"content":{"rendered":"<p>In <a href=\"https:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/why-think-about-accessibility\/\">Why Think About Accessibility?<\/a> Heidi Laidler highlighted the importance of making content in Canvas accessible to users with disabilities. As Heidi explained in her\u00a0article, users with auditory, cognitive, physical and visual disabilities interact with content in different ways and may struggle with, or be unable to use, content that is not designed with their needs in mind. In most cases, creating accessible content is relatively easy and improves the user experience for everyone.<\/p>\n<h2>How do we create accessible content in Canvas?<\/h2>\n<p><a href=\"https:\/\/community.canvaslms.com\/docs\/DOC-2061-accessibility-within-canvas\">Accessibility is a key focus for Canvas<\/a> and the platform has important features that make navigating and interacting with pages easier for users with disabilities. Many of the requirements for accessibility are built in to Canvas, but as content creators there is more we can do to ensure our content is accessible to everyone. Below are some practical tips to improve the accessibility of your pages.<\/p>\n<h3>Write text in Canvas<\/h3>\n<p>As much as possible, write text content in Canvas using its easy-to-use\u00a0<a href=\"https:\/\/community.canvaslms.com\/docs\/DOC-10728\">Rich Content Editor<\/a> instead of using images of text or by linking to\u00a0downloadable files. Text written in Canvas pages is readily accessible to users with vision impairment who\u00a0need to enlarge the page or change page colours and fonts to make the text easier to read. Similarly, text in Canvas pages is directly accessible to the screen readers used by people with blindness to speak page content in synthetic speech.<\/p>\n<p>When writing text in Canvas also consider how to maximise the readability of your content. This helps all users digest the text content, but it is particularly beneficial to users with reading disabilities:<\/p>\n<ul>\n<li>Consider <strong>chunking the content<\/strong>, by breaking the text up into smaller units of information, with headings, subheadings and paragraphs separated by whitespace<\/li>\n<li><strong>Use the simplest language appropriate<\/strong> for the content and avoid unnecessary jargon<\/li>\n<li><strong>Avoid ALL CAPS<\/strong> as it can be difficult to read<\/li>\n<\/ul>\n<h3>Use a simple layout and clean design<\/h3>\n<p>Pages with a simple layout and clean design will result in a better user experience for everyone. Uncluttered pages with a consistent look and feel help all users find content and navigate pages more easily. Users with cognitive and learning impairments also benefit when content is presented in a clear and consistent manner. Where possible, try to use linear layouts for Canvas pages, which will make them easier to navigate with screen readers.<\/p>\n<p>The University Canvas templates and sample pages available in Canvas Commons have been designed with accessibility and usability in mind, so try to use these where possible.<\/p>\n<h3>Use descriptive headings<\/h3>\n<p>Headings are used to create an outline and hierarchy of the content that helps all users scan the pages. Headings are essential for screen reader users, who can use headings to generate an outline of the page content. Screen reader users can also jump between headings on a page using a single keystroke.<\/p>\n<figure id=\"attachment_4807\" aria-describedby=\"caption-attachment-4807\" style=\"width: 300px\" class=\"wp-caption alignright\"><a href=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/07\/headings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-4807\" src=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/07\/headings-300x203.png\" alt=\"How Canvas formats and displays different heading levels (H1-H3)\" width=\"300\" height=\"203\" srcset=\"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/headings-300x203.png 300w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/headings-370x251.png 370w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/headings-570x386.png 570w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/headings.png 580w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-4807\" class=\"wp-caption-text\">How Canvas formats and displays different heading levels (H1-H3)<\/figcaption><\/figure>\n<p>Canvas provides several section heading levels and automatically generates the page title as an H1 (level 1 heading).<\/p>\n<p>Good headings provide a clear and short description of each section. Headings should also be correctly nested. Lower level headings should be contained in higher level headings; so for instance, Heading 3 would be used for a subsection of content contained within a Heading 2. It\u2019s also important not to skip heading levels, such as by placing a Heading 3 directly below a Heading 1.<\/p>\n<h3>Provide alternative text for images<\/h3>\n<p>Alternative text or \u2018alt text\u2019 provides a text equivalent for images and is essential for users who are blind and use screen readers. The alt text will be voiced when the page is read with a screen reader.<\/p>\n<p>In Canvas you add images via the insert\/edit button on the rich text editor, which includes a field for adding an alt text description.<\/p>\n<figure id=\"attachment_4805\" aria-describedby=\"caption-attachment-4805\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/07\/alt-text.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-4805\" src=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/07\/alt-text-300x267.png\" alt=\"The insert\/edit image dialog in Canvas\" width=\"300\" height=\"267\" srcset=\"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/alt-text-300x267.png 300w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/alt-text-768x684.png 768w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/alt-text-370x330.png 370w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/alt-text-570x508.png 570w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/alt-text-770x686.png 770w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/alt-text-651x580.png 651w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/alt-text.png 935w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-4805\" class=\"wp-caption-text\">The insert\/edit image dialog in Canvas<\/figcaption><\/figure>\n<p>Good alt text:<\/p>\n<ul>\n<li><strong>Succinctly describes the content and function<\/strong> of an image<\/li>\n<li><strong>Avoids phrases like \u2018image of\u2019, \u2018picture of\u2019<\/strong> in the description. Screen readers automatically inform users if the content is an image<\/li>\n<li>Does <strong>not merely restate information<\/strong> already available in the text content of the page<\/li>\n<\/ul>\n<p>Note that if you don\u2019t add alt text when inserting images, Canvas will use the filename, which is unhelpful for screen reader users.<\/p>\n<h3>Provide meaningful link text<\/h3>\n<p>When writing link text it\u2019s important to describe the content of the link destination instead of providing lengthy URLs. Also avoid using ambiguous link text like \u2018click here\u2019 and \u2018read more\u2019. Screen reader users are able to generate lists of links on pages and jump between links, which means the surrounding content of the page is not always voiced. Providing a meaningful link description ensures that screen reader users can determine the link destination even when links are voiced out of context. For instance:<\/p>\n<p style=\"text-align: center;\"><em>For more information on how to make your content accessible <a href=\"https:\/\/intranet.sydney.edu.au\/services\/marketing-communications\/accessibility.html\">click here<\/a>.<\/em><\/p>\n<p>Could be changed to:<\/p>\n<p style=\"text-align: center;\"><em>The accessibility pages on the <a href=\"https:\/\/intranet.sydney.edu.au\/services\/marketing-communications\/accessibility.html\">staff intranet<\/a> have more information about how to make your web and digital content accessible.<\/em><\/p>\n<h3>Use good colour contrast for text<\/h3>\n<p>Text with good contrast is easier for everyone to read, but is essential for people with low vision and colour blindness. Try to stick with the default colours used for text and links in Canvas, which meet accessibility guidelines. If you wish to use colour, choose colour combinations that provide good contrast.<\/p>\n<p>One way to check whether there is good contrast between text and background colour is to the <a href=\"https:\/\/www.paciellogroup.com\/resources\/contrastanalyser\/\">Colour Contrast Analyser<\/a> , which is free to download and works on Windows and Mac. The tool has an eyedropper function that allows you to select the text and background colour and view the contrast results. The tool also has a feature which simulates the contrast output for different types of colour blindness.<\/p>\n<figure id=\"attachment_4808\" aria-describedby=\"caption-attachment-4808\" style=\"width: 688px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/07\/paciello-contrast-analyser.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4808\" src=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/07\/paciello-contrast-analyser.png\" alt=\"Paciello contrast analyser\" width=\"688\" height=\"520\" srcset=\"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/paciello-contrast-analyser.png 688w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/paciello-contrast-analyser-300x227.png 300w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/paciello-contrast-analyser-370x280.png 370w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/paciello-contrast-analyser-570x431.png 570w\" sizes=\"auto, (max-width: 688px) 100vw, 688px\" \/><\/a><figcaption id=\"caption-attachment-4808\" class=\"wp-caption-text\">Paciello contrast analyser<\/figcaption><\/figure>\n<h3>Create accessible data tables<\/h3>\n<p>Data tables are used to display tabular data in a manner that makes the relationships between the information easy to understand. Accessible data tables provide extra HTML markup so that screen reader users can also perceive these visual relationships. Providing a caption for data tables, and specifying which cells are the column, and\/or row headers will make our data tables easier to navigate with screen readers.<\/p>\n<p>Tables can be added to Canvas pages via the table tool in the Rich Content Editor. When creating tables that contain data, we can add a table caption and specify which cells are the headers for columns or rows in the table. When screen reader users navigate a table with this extra information, the table header cells can be voiced as the user moves between the cells.<\/p>\n<figure id=\"attachment_4806\" aria-describedby=\"caption-attachment-4806\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/07\/data-tables.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-4806\" src=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/07\/data-tables-1024x375.png\" alt=\"Specifying table cell properties in the Canvas Rich Content Editor.\" width=\"1024\" height=\"375\" srcset=\"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/data-tables-1024x375.png 1024w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/data-tables-300x110.png 300w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/data-tables-768x281.png 768w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/data-tables-370x135.png 370w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/data-tables-570x209.png 570w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/data-tables-770x282.png 770w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/07\/data-tables.png 1109w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption id=\"caption-attachment-4806\" class=\"wp-caption-text\">Specifying table cell properties in the Canvas Rich Content Editor.<\/figcaption><\/figure>\n<p>When creating data tables in Canvas, try to keep them simple, with <strong>only one level of column or row heading<\/strong>. Note that table captions and headers should only be used for data tables. If you use tables for layout, you should not include this extra information for screen reader users.<\/p>\n<h3>Add closed captions for videos<\/h3>\n<p>Video captions are essential for people with hearing impairments, but are beneficial for all users. After a recording or uploading a video in Canvas via the <a href=\"https:\/\/community.canvaslms.com\/docs\/DOC-10391-4152719746\">Rich Content Editor<\/a>, an existing caption file can be added or a new one created using the subtitle creation tool. Use the instructions for <a href=\"https:\/\/community.canvaslms.com\/docs\/DOC-10372\">adding captions to new or uploaded video in Canvas<\/a> for more details.<\/p>\n<p>When embedding externally hosted video in Canvas pages, it\u2019s also important to ensure they are captioned. Most video platforms provide the capability to add captions. Captions can be added to our created YouTube videos via the <a href=\"https:\/\/support.google.com\/youtube\/answer\/2734796?hl=en\">Video Manager<\/a>.<\/p>\n<p>See the article on <a href=\"https:\/\/intranet.sydney.edu.au\/services\/marketing-communications\/accessibility\/accessible-video.html\">Accessible video<\/a> on the Staff Intranet for more information.<\/p>\n<h2>Tell me more!<\/h2>\n<p>If you are creating documents for students to download from Canvas, there are resources on the Staff Intranet to make your documents accessible:<\/p>\n<ul>\n<li><a href=\"https:\/\/intranet.sydney.edu.au\/services\/marketing-communications\/accessibility\/accessible-word-documents.html\">Accessible Word<\/a><\/li>\n<li><a href=\"https:\/\/intranet.sydney.edu.au\/services\/marketing-communications\/accessibility\/accessible-powerpoint.html\">Accessible PowerPoint<\/a><\/li>\n<li><a href=\"https:\/\/intranet.sydney.edu.au\/services\/marketing-communications\/accessibility\/accessible-pdfs.html\">Accessible PDF<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In Why Think About Accessibility? Heidi Laidler highlighted the importance of making content in Canvas accessible to users with disabilities. As Heidi explained in&#8230;<\/p>\n","protected":false},"author":186,"featured_media":4813,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[117,57],"tags":[93,200,235],"coauthors":[523],"class_list":["post-4803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lms-transformation","category-teaching-tips","tag-accessibility","tag-canvas","tag-universal-design","post-item","post-even"],"_links":{"self":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/4803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/users\/186"}],"replies":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/comments?post=4803"}],"version-history":[{"count":7,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/4803\/revisions"}],"predecessor-version":[{"id":4854,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/4803\/revisions\/4854"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media\/4813"}],"wp:attachment":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media?parent=4803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/categories?post=4803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/tags?post=4803"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/coauthors?post=4803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}