Ordinal number word attribute

[jfbrennan]

When building a UI you often have elements (usually buttons) that go in an order of precedence. Like:

( SAVE ) CANCEL

Higher precedence typically means a more bold/bright design, but this is semantic too not just styles.

Pretty much every UI library out there comes with classes for doing this and they use ordinal number words in their class names, e.g. "primary", "secondary", "tertiary".

An attribute for this would be really nice to have when authoring HTML and CSS and would maybe be a benefit for people using screen-readers too.

M- has an ord attribute for some of its components:

<button ord="primary">Publish</button>
<button ord="secondary">Save draft</button>
<button ord="tertiary">Cancel</button>

<m-box ord="primary">...</m-box>
<m-box ord="secondary">...</m-box>

I'm the creator of M-, so I like this, but I think it would make sense as a native attribute that everyone could use.

[domenic]

This seems exactly what the class attribute is designed for. It's unclear what the benefit of creating a new classification attribute would be.

[jfbrennan]

I think there's more to it. Benefits off the top of my head:

• Semantic attribute to describe an element's precedence is helpful for developers understanding the content and code (order in markup does not help, e.g. sometimes "Cancel" comes before "Save", sometimes "Save" before "Cancel", but in both cases "Save" is of higher precedence. And again, it's not just for buttons and there can be zero styles involved)
• Helps blind users understand elements' precedence, e.g. you can have two elements, both have all the right ARIA stuff, but it's still not clear which of the two the app is prefers/recommending to the user because they don't have the benefit of visual cues. I'm looking at GitHub's big green "Comment" button right now...but despite it having Bootstrap's btn-primary class, there's nothing in the markup that helps blind users understand what I see: it is the preferred action vs. "Close with comment" which is visually AND semantically a secondary action)
• A standard attribute enables CSS framework creators like Bootstrap to drop all these unique classes and standardize around an attribute. That makes markup more portable, e.g. I could switch from M- to Bootstrap w/o losing ordinal precedence styles.
• Maybe browsers can optimize the paint of higher precedence elements?
• Custom Element creators could make good use of this attribute just like CSS framework creators
• Cool things developers will come up with that weren't anticipated!

[Yay295]

What about tabindex?

[domenic]

Semantic attribute to describe an element's precedence is helpful for developers

A class seems just as helpful.

Helps blind users understand elements' precedence

Tabindex, or other technology that actually affects accessibility technology, would work better for this. Since no accessibility technology keys off of unknown attributes like this one, it isn't beneficial.

If accessibility technology vendors were suggesting that this would be helpful (more than tabindex), then we could reconsider this point. But I'm very skeptical of people claiming accessibility benefits without AT vendors lined up to implement based off of them.

A standard attribute enables CSS framework creators like Bootstrap to drop all these unique classes and standardize around an attribute.

This can be done without changing the HTML Standard to introduce a no-op attribute. They can just collaborate themselves.

Maybe browsers can optimize the paint of higher precedence elements?

This is not feasible given how browser painting architecture works.

Custom Element creators could make good use of this kind of like CSS framework creators

I don't understand this point, or how they could make use of it differently than class=""

Cool things developers will come up with that weren't anticipated!

This is not really the way standardization works. We work from use cases and benefits first, instead of going through the trouble of writing specs/tests/implementations in 3 browser engines, and only then hoping that it helps someone.

You can learn more about this in https://whatwg.org/faq#adding-new-features . In particular I'd strongly suggest you focus on steps 1 and 2.

[jfbrennan]

@Yay295 good point, but tabindex is for the context of the whole page and is only meant for interactive elements. ord, assuming that would be the name, can be used on non-interactive elements (like M-'s Box), but more importantly the precedence is not at the page level. Using GitHub again...on this page there are two sets of buttons and both sets have a primary and secondary action ("Edit" and "New issue" up top, and "Close with comment" and "Comment" here in the comment box). HTML offers no way of marking the precedence of these buttons.

[jfbrennan]

@domenic Please take into consideration that these precedence classes are incredibly ubiquitous. It's a strong signal for spec authors to consider that maybe HTML should step in and offer a standard.

no accessibility technology keys off of unknown attributes like this one
Well, that's because it doesn't exist :)

Tabindex is not really the same thing. See reply to @Yay295

[domenic]

It's a strong signal for spec authors to consider that maybe HTML should step in and offer a standard.

Again, the ubiquity of a class is not a reason for HTML to move that out of the perfectly-working class="" attribute. If anything, it's a strong signal to keep it there, since it would be disruptive and duplicative to move it out.

A signal that something needs standardization is instead a set of use cases. Again, see https://whatwg.org/faq#adding-new-features, especially step 1 and 2.

[jfbrennan]

It might help to see it from a different perspective.

If HTML had this kind of precedence attribute since say, 2008 (HTML5 release year), do you think Bootstrap and all the others would have used it or would they have ignored it and created precedence classes?

Do you think screen-readers would have included support for it to help users understand the HTML author's intention of giving elements meaningful order?

Do you think developers would have used it in helpful ways like matching this precedence attribute selector with flexbox's order in responsive designs?

Anyway, I figured since so many web sites implement element precedence (usually buttons) it might be worth a discussion. I'll share more use cases as I run into them.