Skip to content

Instantly share code, notes, and snippets.

@bkardell
Last active February 28, 2018 18:28
Show Gist options
  • Select an option

  • Save bkardell/d293064bb72a523f86e774e012c57a83 to your computer and use it in GitHub Desktop.

Select an option

Save bkardell/d293064bb72a523f86e774e012c57a83 to your computer and use it in GitHub Desktop.
6409149

I think you can sort of roughly define a few different very distinct situations that will occur here.. As I thought through what my opinion on this is I found myself asking "what happens in those cases with this proposal" and "is that good or bad or what?" - I'm noting each below..

  1. Pages that used headings only for visual effect or SEO, or just wildly misunderstood headings and used no sectioning elements

This is really a lot of the web. Basically, nothing changes for them. They useless/confusing for accessibility. It changes precisely nothing for them.

  1. Same as #1, but with the addition of sectioning elements

People seem to like those sectioning elements whether they are thinking about a11y or not. I think there's probably no measurable or predictable significant practical gain or loss here. They were confusing for accessibility before, their particular kind of brokenness simply changes to match the default UA sheet more.

  1. Pages that made good efforts to use h1...h6 without sectioning elements

These were good before and this has no impact either way. A document created by good use of # headings in markdown is a kind of example.

  1. Pages that used only sectioning/h1

This is really what we're aiming for I think, a future path. It's basically the same thing TimBL mentioned in the first useful email to the mailing list in 1991: Wouldn't it be much better if we just had sectioning and 'heading' rather than these wonky flat h1...h6 things? However, because of lots of mixed messaging about document outlines and default UA-stylesheets breaking the previous 'insides match the outsides' default visual/a11y relationship that got created in 'HTML 5', there are at least some sites out there that did this (though, see the next comment).

This is kind of a weird place to be in because it means that there are sites out there that are measurably worse on this count by following what they thought were recommendations. Currently a site that did that perfectly would just be presented to the AT as all h1's which is kind of terrible and the kind of thing we would generally advise authors to not write themselves (though, at least they are headings, I guess?). So this is, more or less what we would be asking people to write again.

With this change they would take on levels, however those levels would potentially skip levels. Skipping level is something we currently advise authors not to write, so if feels like we need a good explanation/justification. I'm not personally 'against' this because as I have written before, I think the idea of a 'structural outline' is much different than simply trying to imply structure based on flat content and I dont know that numbers are potentially as useful to users as relationships. I simply mention it because someone is gonna call shenenigans if they have been told for years "don't" and then we codify the thing we said "don't". It just deserves a good explantion of how we circle that square and requires a lot of buy-in.

  1. Pages that made good efforts to use h1...h6 with sectioning elements. Note my use of 'good efforts' here by which I mean that they didn't skip levels and that their organizational intent would be at least clear by looking at the source.

By this I mean 'have tried to deal with the reality of what is actually shipped and give users a good experience'. So, in this, people use sectioning elements, but they use h1...h6 in historically fairly sensible ways. Lots and lots of examples in top search results show something like this:

  <article>
    <h1>Apple varieties</h1>
    <p>The apple is the pomaceous fruit of the apple tree...</p>

    <section>
      <h2>Red Delicious</h2>
      <p>These bright red apples are the most common found in many supermarkets...</p>
    </section>

    <section>
      <h2>Granny Smith</h2>
      <p>These juicy, green apples make a great filling for apple pies...</p>
      <div role="heading" class="note" aria-level="3">The origin of the name</div>
      <p>...blah...</p>
    </section>
  </article>

Something like that today, as a result, has a pretty decent AT tree and comminicate sensible heading relationships. While there is no 'outline', it's totally all 'there' for you to make sense of with the navigational tools available in the AT... If you used them Some even use their to their advantage to autogenerate TOCs and things so that everyone benefits from this, and the relantionships look like this:

  • Apple Varieties
  • Red Delicious
  • Granny Smith
  • The origin of the name

But, the result of this approach to their trees is that it gets less sensible - depending on where this fragment falls, the 'Apple Varieties'level will move and the relationship between that and the thing it are about get confused. That's really the thing that worries me just a bit, because authors who did this tried extra hard - sometimes even by spending a lot of money going back and revising mountains of old stuff... They thought about the hierarchy and organization and what they were communicating and it seems like, again, it seends a little bit of a mixed message. We said "it's quite important you get this right" and then once they did, the bar moved. Mostly, I think I am worried about the message that this sends and the level of frustration and confusion it seems like it will ultimately create because again, my own position is that numbering headings is generally not the really useful bit, it's just the one we have.

  1. Mixed

I'm not really sure how/where to slot this, but it's just pointing out the reality that Jake mentions and how that slots into any possible answer here. Very often a site (or sections of a site) can be very structured, but what is frequently just referred to as content is authored in a way a lot more like it is read - either with a decent rich text editor or as simple markdown or something. Speaking "by volume" this is a huge huge huge amount of the web for the simple reason that tools like this dramatically increase the potential number of authors by specifically being not intensely structured, more like the traditional 'flat' documents. It's entirely possible to author "good" content with good/sensible headings that just mess up outlines when they get included in the page - It doesn't seem like we've given a really good way to do that, in any actually achieveable proposal really. It feels like if we don't address the fact that both flat/structured exist and are a little different in a way that really helps, we're really not ultimately making a significant enough dent.

What if we added to this proposal a non-reflected, non-dynamic policy attribute or something (forgive my potential butchering/overloading of terms here as I try to explain) so that you could identify that this container will hold 'flat' content so that we could maybe choose a slightly different strategy. I'm not entirely sure what that strategy would be, I can think of 3 - but the 3rd is far and away my preference:

  1. Just do absolutely nothing with the stuff in there, this would at least have the effect of keeping the two major parts 'in tact' with no surprises (your h1 doesn't become an h4 or something while your next logical h2 remains untouched, which totally can happen otherwise).

  2. Mark all these as role="presentation". This is probably bad or unfortunate, but at least the stuff you consciously devised remains in tact and nothing exceptionally confusing happens.

  3. Calculate the effective level of the container with the heading policy attribute and simply modify the heading by adjusting their aria-level (as we are doing on the h1) by that many instead. This option seems the best to me and it seems pretty simple to do. This would allow cases like Jake's where he has good website stuff using sectioning and h1s, but then bits that are pulled in from markdown that contain themselves, good use of # headings. Even in the case that you mix this up and put it on things that already have sections, you still wind up with pretty sane trees.

I have a mod of Anne's polyfill which does #3, it seems like a fairly minor tweak.

@jakearchibald

Copy link
Copy Markdown

With this change they would take on levels, however those levels would potentially skip levels.

Only in the same way that <h1>Hello</h1><h3>World</h3> skips levels.

if it was so important to stress to people not write that, why is it now ok to create it automatically?

You lost me here. What are we telling people not to write that we're creating automatically? Maybe this needs a markup example?

Pages that made good efforts to use h1...h6 with sectioning elements.

It isn't clear what this means. Does it mean using flat headings, or the Hixie outline?

In this case, very frequently that pretty AT tree will get less sensible.

I'm lost again. Can you give examples of a good-practice case that will become worse?

@bkardell

Copy link
Copy Markdown
Author

Your first two questions/comments are related. A11Y advice has historically been do not write <h1>Hello</h1><h3>World</h3>. That's what steve was saying here. I'm not taking a side there, I'm just wondering how you circle that square of saying "don't do that", and then we go and make it do that. Surely some people are going to point that out with bright lights.

Pages that made good efforts to use h1...h6 with sectioning elements.
It isn't clear what this means. Does it mean using flat headings, or the Hixie outline?

I means 'reality in browsers for the last few years' really where you used h1...h6 I rewrote from there down, I don't know if it helps?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment