The LMS Canvas by Instructure comes with a decent set of styled elements to start with, but diving into the HTML editor is where you can really modify content, giving it a specific look and feel.\u00a0Recently I have found that I am going to these customized elements more often to help achieve learning outcomes and provide a different look and feel for accessible course pages.<\/p>\n
It is not limitless, however, or even as open as regular web development would be. Canvas has an HTML Editor Allowlist<\/a> for elements, styles and classes (though some absent from this list will work if you give it a go!). Many of these are activated by using in-line Without further ado, here are three of the more popular elements I have been drawn to when creating courses over the past few terms.<\/p>\n Defined as<\/p>\n a set of attributes that define ways to make web content and web applications more accessible to people with disabilities These attributes are some of the most popular because they help with accessibility (particularly, screen readers) on the course site. Where native HTML5 elements are not available, these ARIA attributes help to explain what a particular piece of content does and how a learner should interact with it. By using these, we help to make courses open to a wider set of learners.<\/p>\n See the Canvas HTML Editor Allowlist<\/a>\u00a0for a full list of supported ARIA attributes.<\/p>\n You want to include an element on your course site that expands to reveal more content. You will need to make a screen reader aware that the content is there, and what it does. Using the following should get you off to a good start:<\/p>\n You have a particularly visual element on the page, and you want to write a larger piece of text for a screen reader to explain this. You can use Next up, is hidden content. So you added the element_toggler above, but your learners with the Canvas Mobile App let you know they cannot click it!<\/p>\n Some of the projects I work on with these elements require an entirely different way of accessing the content on a mobile device.<\/p>\n Create different versions of the content by hiding each one depending on the device.<\/p>\n To do this, you will need to divide the content using two containers. Using the same element_toggler code from above, we can easily add a separate, but hidden part underneath for Canvas app users.<\/p>\n The addition of the Note<\/strong>: if you have access to the stylesheet for your institution, it would be more beneficial to add these changes there than on a per-page basis.<\/p>\n If you have ever seen text content that says something similar to this\u2026<\/p>\n As we discussed before\u2026<\/p><\/blockquote>\n As I mentioned previously\u2026<\/p><\/blockquote>\n Back in Module 3, we talked about\u2026<\/p><\/blockquote>\n \u2026then you need to use this simple feature of the anchor element!<\/p>\n I use this a lot on course content that requires students to refer to previous material. Everyone will have heard of a hyperlink using the Give an element an id, like this:<\/p>\n Then, when you want to send a learner back to that part of the page, just reference it by adding the id to the end of the page link with a `#`. For example:<\/p>\n This will take the learner directly to the heading with the id of \u2018section_2\u2019, which you set up before.<\/p>\n You can even do this within the same page to jump to that part of the page. Just link it like this without the rest of the URL.<\/p>\n These are a sample of the elements, classes, and styles I have used to enhance content over the last few terms. With each, accessibility has been a must, which requires a bit of reflection on how learners would interact with the content. There are a lot more available, and you have a list in the Canvas HTML Editor Allowlist<\/a> to start experimenting. By thinking of accessibility from the early stages of course design, more users can appreciate these page elements and content.<\/p>\n 1. The Canvas Style Allowlist: [http:\/\/bit.ly\/cnvs-allowlist<\/a>] Introduction The LMS Canvas by Instructure comes with a decent set of styled elements to start with, but diving into the HTML editor is where you can really modify content, giving it a specific look and feel.\u00a0Recently I have found that I am going to these customized elements more often to help achieve learning outcomes… Continue reading class<\/code> or style<\/code>, but other attributes are also available.<\/p>\nAccessible Rich Internet Applications (ARIA)<\/h2>\n
\nSource<\/a><\/p><\/blockquote>\nExample 1: Element Togglers<\/h3>\n
<span<\/span> class<\/span>=\"element_toggler<\/span>\" role<\/span>=\"button<\/span>\" aria-controls<\/span>=\"something<\/span>\" \r\naria-label<\/span>=\"longer description of the element<\/span>\" aria-expanded<\/span>=\"false<\/span>\">\r\nClick here to see the explanation<\/span<\/span>>\r\n\r\n<div<\/span> id<\/span>=\"something<\/span>\" style<\/span>=\"display<\/span>: none<\/span>;\">\r\nThe explanation.\r\n<\/div<\/span>><\/pre>\n\n
aria-controls=\"something\"<\/code><\/dt>\nid=\"something\"<\/code> later on in the code. The value must match the id<\/code> value for it to work correctly. This is used to interact with the element.<\/dd>\naria-label=\"longer description of the element\"<\/code><\/dt>\naria-expanded=\"false<\/code><\/dt>\nExample 2: Descriptions<\/h3>\n
aria-describedby<\/code> and then link it to the id of an element (in the <span><\/code> below):<\/p>\n<p<\/span>><img<\/span> src<\/span>=\"close_up.jpg<\/span>\" aria-describedby<\/span>=\"close_up<\/span>\">\r\n<br<\/span>>\r\n<span<\/span> id<\/span>=\"close_up<\/span>\">A close-up view of the rock target named \"M\u00e1az\" from the SuperCam \r\ninstrument on NASA's Perseverance Mars rover.<\/span<\/span>> \r\nAnalysis of SuperCam data shows that M\u00e1az has a basaltic composition. \r\nIt is either an igneous rock or consists of fine grains of igneous material \r\nthat were cemented together in a watery environment.<br<\/span>>\r\nFull image and caption from \r\n<a<\/span> href<\/span>=\"https:\/\/www.jpl.nasa.gov\/images\/supercam-close-up-of-maaz<\/span>\">\r\nNASA Jet Propulsion Labratory.<\/a<\/span>> NASA\/JPL-Caltech\/LANL\/CNES\/CNRS\r\n<\/p<\/span>><\/pre>\nDevice specific content<\/h2>\n
A potential fix<\/h3>\n
<span<\/span> class<\/span>=\"element_toggler<\/span>\" role<\/span>=\"button<\/span>\" aria-controls<\/span>=\"something<\/span>\" \r\naria-label<\/span>=\"longer description of the element<\/span>\" aria-expanded<\/span>=\"false<\/span>\">\r\nView the explanation<\/span<\/span>>\r\n\r\n<div<\/span> id<\/span>=\"something<\/span>\" style=\"display<\/span>: none<\/span>;\">\r\nThe explanation.\r\n<\/div<\/span>>\r\n\r\n<div<\/span> class<\/span>=\"hidden-desktop hidden-tablet hidden-phone<\/span>\">\r\nThe explanation.\r\n<\/div<\/span>><\/pre>\nclass=\"hidden-desktop hidden-tablet hidden-phone\"<\/code> attributes will hide this container for most users. As it is sitting outside of the element toggler, however, mobile app users do not need to click the element toggler to see the explanation! This provides a more accessible option for users of those devices.<\/p>\nAnchoring to part of a page<\/h2>\n
<a><\/code> tag, but you can also use this anchor to link to a certain part of the page. I regularly use it to send learners to particular headings or content that they would find relevant for assignments. If you set up your course from the start with this in mind, it can be a fast way to group revision material from certain parts of a page, or create more accessible navigation menus.<\/p>\n<h3 id=\"section_2\">Section 2<\/h3><\/code><\/p>\n<a href=\"https:\/\/yoursite\/page#section_2\">Section 2<\/a><\/code><\/p>\n<a href=\"#section_2\u201d>Section 2<\/a><\/code><\/p>\nConclusion<\/h2>\n
References<\/h2>\n
\n2. \u201cARIA\u201d from MDN Web Docs\/Mozilla [https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA<\/a>]<\/p>\n","protected":false},"excerpt":{"rendered":"