When using paragraph styles in RCE, can I use the header 3 more than once? Do the headings need to be in order? I appreciate any help with this
For accessibility and usability purposes, headers should be nested properly. You should not go directly from an H2 to an H4. You can use any of the headers multiple times, though.
The Headings • Page Structure • WAI Web Accessibility Tutorials states:
Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.
Some people hold design philosophies that are different about how many levels of headings you should use. Tufte CSS states:
Tufte CSS uses h1 for the document title, p with class subtitle for the document subtitle, h2 for section headings, and h3 for low-level headings. More specific headings are not supported. If you feel the urge to reach for a heading of level 4 or greater, consider redesigning your document:
If you're following that design principle, then you would certainly need to use a level-3 heading more than once.
James Jones, If I wanted to use H3 as my highest level heading (because the H2 font is HUGE) - that is, use h3 as section headings, will that cause problems in terms of accessibility?
Yes. The title of the page is an H1, so skipping to H3 would be skipping over H2 and improperly nesting things.
If you feel that H2 is HUGE, then you could talk to your local Canvas admin(s) and see if they want to override what Canvas is doing through custom CSS. I imagine they won't, but every now and then Canvas gets it wrong (especially with H3) and people want to change it.
You can also go into the HTML editor and specify a font-size within the style element and make it smaller.
I would not do either one. The problem with HUGE is that is how you perceive it, but it may not be how someone else perceives it on a different device or browser, and it definitely isn't how a person using a screen reader will perceive it. The CSS spec doesn't define a size and browsers are free to implement their own. A good overview of the what goes into a font size is explained when someone asked what is the default font size for h2?
It’s not a fixed size. It’s an accumulation of whatever the html engine of your browser sets as a default, adapted by the screen resolution of the device, the preference of the user, the possible zoom factor, and eventually the CSS file stating a base font size…
As I mentioned before, some people take issue with the h3 element in Canvas. Canvas' h2 is only 0.3 em larger than it's h3 (1.8 em vs 1.5 em). There is a problem with h3 (well, many people feel so) that it has extra space around it so it looks smaller than the h2 heading does. The margin on h2 in Canvas is 6px, but the top and bottom margins for an h3 are a full 1em. You can see this through the browser's inspector:
Here's a heading 2:
Here's a heading 3:
Notice that there's less than 5 pixels difference in the actual size, but there's 4 times the difference in the margins.
Thanks, James Jones! That clears it up for me. I'm sure our local Canvas admin won't want to change the font size & I agree that changing the font size on h2 is bad idea (I'd have to remember to do it all the time & I'm sure I'd forget - not worth the trouble. )
James Jones said something very wise (which is not unusual for him)...........
"The problem with HUGE is that is how you perceive it, but it may not be how someone else perceives it"
Instead of thinking in terms of disability, we need to think in terms of an "ability spectrum", and apply Universal Design principles. In your example of font size, consider individuals who are not legally blind; but rather, fall somewhere along the spectrum from 20/20 to total loss of vision. I am an elderly person with elderly vision, and for me that 21 point H2 font works just fine. And as James also noted, screen readers do not care about the size of the font, just that the purpose of the text has been identified as H2. I actually use this fact to hink tables that need a header row for screen readers, but headings really are not needed for sighted users - I create a header row with 4 pt. white text on a white background with no lines. Sighted readers might notice a slightly larger break between rows, but those using screen-reading tech will have the headings read to them.
By the way, you are totally right - I took a good look at a page with h2 and h3 headings & it's really the spacing I have an issue with (more so than the font size).
You may be able more likely to get your Canvas Admin to do something about the spacing than the size.
Here are links to some of the discussions and feature ideas from the past (mostly 2016) about the H3 and H4 issues, just so you know I wasn't making that part up.
I've been lurking around here long enough to know that you don't make stuff up.
Retrieving data ...