This is certainly a lot better than just divs and spans, however there are also some quirks with HTML5's section elements.
Section and Aside bring some nasty-ness to the outline for example.
Using more than one h1 (like in your example) is also generally discouraged for accessibility, even though the spec seems to encourage it.
I usually don't include a heading in the nav (even though the outline wants it), and only use 1 h1 element on the page at all times (literally the main heading on the page, the rest gets an h2/h3/etc where it makes hierarchical sense).
So in your example I would change the 2nd h1 to h2 and all the h2 to h3 for a somewhat nicer outline.
Other than that, I really encourage writing more semantic markup in general. There's a ton of useful tags out there that are way better than your styling hooks (div/span)!
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
Thanks for the context! I'll readily admit that I'm no expert on the outline algorithm, but I will say that the rumors I've heard suggest that an updated outline algorithm is beginning to be implemented in a few browsers, and the updated algorithm prefers a new <h1> within each sectioning context, e.g. within each <section>, <article>, etc. But even so, it's not the predominate algorithm in the wild right now, so fair point, one <h1> per page.
How do you examine the generated outline for a page, as perceived by assistive tech? Are there good tools out there to help with this?
Yeah the spec calls for a new outline in each section, so multiple H1's are technically allowed, but assistive technologies and (as much as I hate this argument) SEO don't always line up with the spec. So for now it's safer to go the 1 H1 route.
Usually I use W3C's validator (validator.w3.org/nu) with the outline option checked to test for at least the basics.
Then there's some other tools (like the "Siteimprove Accessibility Checker" plugin for Chrome) that help a bunch as well (but they focus less on semantics and more on pure a11y).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
This is certainly a lot better than just divs and spans, however there are also some quirks with HTML5's section elements.
Section and Aside bring some nasty-ness to the outline for example.
Using more than one h1 (like in your example) is also generally discouraged for accessibility, even though the spec seems to encourage it.
I usually don't include a heading in the nav (even though the outline wants it), and only use 1 h1 element on the page at all times (literally the main heading on the page, the rest gets an h2/h3/etc where it makes hierarchical sense).
So in your example I would change the 2nd h1 to h2 and all the h2 to h3 for a somewhat nicer outline.
Other than that, I really encourage writing more semantic markup in general. There's a ton of useful tags out there that are way better than your styling hooks (div/span)!
Thanks for the context! I'll readily admit that I'm no expert on the outline algorithm, but I will say that the rumors I've heard suggest that an updated outline algorithm is beginning to be implemented in a few browsers, and the updated algorithm prefers a new
<h1>within each sectioning context, e.g. within each<section>,<article>, etc. But even so, it's not the predominate algorithm in the wild right now, so fair point, one<h1>per page.How do you examine the generated outline for a page, as perceived by assistive tech? Are there good tools out there to help with this?
Hey Ken!
Yeah the spec calls for a new outline in each section, so multiple H1's are technically allowed, but assistive technologies and (as much as I hate this argument) SEO don't always line up with the spec. So for now it's safer to go the 1 H1 route.
Usually I use W3C's validator (validator.w3.org/nu) with the outline option checked to test for at least the basics.
Then there's some other tools (like the "Siteimprove Accessibility Checker" plugin for Chrome) that help a bunch as well (but they focus less on semantics and more on pure a11y).