Which elements support shadow DOM?

Rob Dodson — Sun, 13 Jan 2019 16:56:36 +0000

Is there a list somewhere of which HTML elements can and can’t have a shadow DOM?

As it turns out, there is! (Big thanks to Anne van Kesteren for showing us the way).

If context object’s local name is not a valid custom element name, article, aside, blockquote, body, div, footer, h1, h2, h3, h4, h5, h6, header, main, nav, p, section, or span, then throw a NotSupportedError DOMException.

Here’s a quick example using div:

Exceptions

It’s worth calling out that button, input, select, img, and a are not on this list and will throw an error if you try to attach a shadow root to them. If you need to use them you'll probably need to look into either wrapping these elements or using a type extension.

Originally published at robdodson.me on January 13, 2019.

Managing focus for accessibility

Rob Dodson — Tue, 22 May 2018 02:19:26 +0000

If I'm building a single page web app, what should happen to focus when the user clicks some navigation?

This is a video I shot a while back, but the question comes up so often I wanted to re-share here on dev.to—plus it's a good excuse to write my first post 😁

Typically in a single page app you'll have a structure that looks roughly something like this:

<nav>
  <a href="/">Home</a>
  <a href="/cart">Shopping Cart</a>
  <a href="/settings">Settings</a>
</nav>
<main>
  <!-- some content -->
</main>

Because it's a single page app, clicking on a link won't do a hard refresh. Instead, it will trigger a route change which usually uses a bit of AJAX to fetch some more data and populate the <main> content area.

For a sighted user this is all good—but what if I'm a non-sighted user navigating with a screen reader? I may not know that the new content has been added to the page (maybe I was expecting a hard refresh) and there's no indication that I should navigate back to the <main> area.

One easy way to improve this experience is to find a good heading in the newly loaded content and direct focus to it. The easiest way to pull this off is to give the heading a tabindex of -1 and call its focus() method.

<main>
  <h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
  // Assuming this gets called every time new content loads...
  function onNewPage() {
    var heading = document.querySelector('h2');
    heading.focus();
    // You can also update the page title :)
    document.title = heading.textContent;
  }
</script>

A screen reader will then announce the new heading, as well as the main landmark area that it's contained within. Note that you probably don't want to do this focus management when a user first arrives at your site—you would only want to do it for subsequent navigation, like when they click a link.

Hope you enjoyed this post! It's an easy trick that could make a big difference for some of your users. And if you're interested in more a11y screencasts check out my playlist over on the YouTubes 📺

✌️

DEV Community: Rob Dodson

Which elements support shadow DOM?

Exceptions

Managing focus for accessibility