M. Ricardo Flores

Using <div> and <hr> tags to create prettier (and accessible) pages in Canvas

Discussion created by M. Ricardo Flores on May 24, 2018
Latest reply on Aug 26, 2019 by Olena Bradford

The <div> tag can be quite useful in Canvas for chunking content. I thought I should share this sample page and instructions in case anyone here would like to try it.  Notice that my first <div> is sitting on top of the page heading <h1>.  The heading is still there for screen readers, but having the page name listed multiple times can be too redundant, and an eyesore, for sighted people. Manipulating the position of the <div> takes care of that. I also use <hr> as to help chunk and avoid having stark white space between my colored <div> tags. 


This layout is accessible and very easy to create. It uses very few graphics (3 only), but it does not have to use any if you don't want it to.


Basic computer literacy and common sense are all that's needed to create this page.


Addendum: Make sure to apply <H2></H2> to your page title, and the corresponding <H3></H3> tags to your subtitles for the different sections. I left that out in the code to keep it super simple, but you can add the headings<> using the text editor so you don't have to look at the HTML. Lastly, make sure your images have proper alt tags. If they are for ornamental purposes you should use "null" if you are adding the alt text through the HTML editor. Alternatively, if you are using the text editor, you should click the box for "Decorative Image." My images are just place-holders in a demo page, so it's not critical for me, but if you have live users, then it is very critical for you, so that your page is accessible



Sample page layout using <div> and <hr> tags


Attached is an MS Word file with instructions and code you can copy and paste, then edit with your own content.

Feel free to use.