Expanding Support for Accessible HTML 5 Section Elements

[dlhubble]

This idea has been developed and deployed to Canvas

For details, please read through the Canvas Deploy Notes (2020-02-26) 

---

Certain HTML 5 elements are extremely useful for navigating with a screen reader. These include, but are not limited to, the following elements:

• article
• section
• nav
• aside
• header
• footer
• figure
• figcaption
• main
• time
• mark

When comparing the whitelist of HTML canvas elements to the above list, only the "mark" element is found as allowed when creating Canvas pages. The most important element on the above list is the aside element because it allows the author to indicate to the reader that what is to follow is not part of the main text. This is especially important for screen reader users. Although there are also more specific types of supplementary text, such as <dd> for definitions, at least the aside element could be used to cover the various types of supplementary text.

See the following for a great list of HTML 5 elements: 

HTML elements reference - HTML: Hypertext Markup Language | MDN 

See the following for a great list of elements that have been checked for accessibility across screen reading software:

https://www.html5accessibility.com/ 

UPDATE: Thanks  @eschiebel ‌ for the info! The whitelist is being updated on February 26th to include the elements I requested.

[eschiebel]

The html element whitelist was updated Feb. 6 and is currently in beta and will be in production next Wednesday, Feb. 26.

The updated whitelist is comprised of html elements: 

a, abbr, acronym, address, area, article, aside, audio, b, bdo, big, blockquote, br, caption, cite, code, col, colgroup, dd, del, details, dfn, div, dl, dt, em, embed, figcaption, figure, font, footer, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, ins, kbd, legend, li, map, nav, object, ol, p, param, pre, q, samp, section, small, source, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, track, tt, u, ul, var, video

and mathml elements: 

annotation, annotation-xml, maction, maligngroup, malignmark, mark, math, menclose, merror, mfenced, mfrac, mglyph, mi, mlabeledtr, mlongdiv, mmultiscripts, mn, mo, mover, mpadded, mphantom, mprescripts, mroot, mrow, ms, mscarries, mscarry, msgroup, msline, mspace, msqrt, msrow, mstack, mstyle, msub, msubsup, msup, mtable, mtd, mtext, mtr, munder, munderover, none, semantics

svg elements are not currently whitelisted. If this is an issue, it can be looked into.

[dlhubble]

Do you know if any of these elements will allow someone to specify page breaks for printing? Typically without CSS that is done via <p style="page-break-before: always">, but that style is not currently accepted by the HTML engine in Canvas.

[eschiebel]

Sorry, but no. The recent work addressed the list of acceptable elements, but did not address any other aspects of canvas' html sanitization. (aside: page-break-before has been replaced by break-before, not that it will help you our here). I don't know the history behind its exclusion.  Revisiting the style whitelist is something I will look into.

[Stef_retired]

dlhubble‌, would you take a moment to modify the idea description to reflect  @eschiebel ‌'s update? We'll put this idea back into Moderating status for the moment.

Thanks!

[Stef_retired]

Comments from Instructure

The New Rich Content Editor aligns HTML elements with Canvas TinyMCE-supported elements. To align elements, H7 and H8 have been removed. The following elements have been added: address, acronym, map, area, bdo, dfn, kbd, legend, samp, tt, var, big, article, aside, details, footer, header, nav, section, summary, and time.

For more information, please read through the  Canvas Deploy Notes (2020-02-26).