W3C home > Mailing lists > Public > public-webapps@w3.org > January to March 2015

Re: Minimum viable custom elements

From: Edward O'Connor <eoconnor@apple.com>
Date: Thu, 15 Jan 2015 15:33:12 -0800
To: WebApps WG <public-webapps@w3.org>
Cc:
Message-ID: <m2wq4nd3gn.fsf@eoconnor.apple.com>
Hi all,

Steve wrote:

>> [I]t also does not address subclassing normal elements. Again, while
>> that seems desirable
>
> Given that subclassing normal elements is the easiest and most robust
> method (for developers) of implementing semantics[1] and interaction
> support necessary for accessibility I would suggest it is undesirable
> to punt on it.

Apologies in advance, Steve, if I'm missing something obvious. I
probably am.

I've been writing an article about turtles and I've gotten to the point
that six levels of headings aren't enough. I want to use a seventh-level
heading element in this article, but HTML only has h1–6. Currently,
without custom elements, I can do this:

<div role=heading aria-level=7>Cuora amboinensis, the southeast Asian box turtle</div>

Suppose instead that TedHaitchSeven is a subclass of HTMLElement and
I've registered it as <ted-h7>. In its constructor or createdCallback or
whatever, I add appropriate role and aria-level attributes. Now I can
write this:

<ted-h7>Cuora amboinensis, the southeast Asian box turtle</ted-h7>

This is just as accessible as the <div> was, but is considerably more
straightforward to use. So yay custom elements!

If I wanted to use is="" to do this, I guess I could write:

<h1 is=ted-h7>Cuora amboinensis, the southeast Asian box turtle</h1>

How is this easier? How is this more robust?

I think maybe you could say this is more robust (if not easier) because,
in a browser with JavaScript disabled, AT would see an <h1>. <h1> is at
least a heading, if not one of the right level. But in such a browser
the <div> example above is even better, because AT would see both that
the element is a heading and it would also see the correct level.

OK, so let's work around the wrong-heading-level-when-JS-is-disabled
problem by explicitly overriding <h1>'s implicit heading level:

<h1 is=ted-h7 aria-level=7>Cuora amboinensis, the southeast Asian box turtle</h1>

I guess this is OK, but seeing aria-level=7 on and <h1> rubs me the
wrong way even if it's not technically wrong, and I don't see how this
is easier or more robust than the other options.


Thanks,
Ted
Received on Thursday, 15 January 2015 23:33:40 UTC

This archive was generated by hypermail 2.3.1 : Friday, 27 October 2017 07:27:25 UTC