Comparisons tool explained

Talking about how a document outline should work in theory is interesting, but in a lot of cases imagining the impact of proposed solutions can be really hard. The aim of this project is to encourage us to collect use cases and, if possible, speculative polyfills of the implementations of our theories. The aim of the comparison tool then is to allow a number of people to more easily examine the impacts of such a solution.

There are a lot of impacts to consider here and, as such, it was difficult to think of a way to do this that both makes as much as possible as clear as possible and yet still doesn't excessively "get in the way" because headings are and always kind of have been a little of a wonky outlier in a lot of ways. For example, any element at all can have a role=heading and an aria-level=N which makes it "mean" something very like h1-h6 from a lot of points of view, but has no impact on style, selectors, etc. While you can select anything with an attribute of role=heading, you still can't select anything with that implicit role.

In order to keep things as unconfusing as possible, the testing tool itself does not affect heading sizes in any way. If a proposal/polyfill affects the style in the manner of traditional headings, you'll see that. Additionally, in order to give some insight into what's happening/proposed, some minor other styling is used instead:

Note that not all proposals/polyfills will have the same capabilities.

Start Comparing