Web Components Accessibility FAQ

posted on

I specialize in HTML and CSS, but I also write JS. Especially in the last year or so, I wrote quite a lot of JavaScript because we decided to port the front end of one of my clients to web components.

When I first learned about web components, I had a lot of questions, especially regarding accessibility. While I found answers to many of them, I didn’t know everything I would’ve wanted to know. I wish I had a catalog of all the essential questions and answers when I started. That’s why I decided to design this post in a Q&A format. I’ll ask a question regarding the accessibility of web components, and then I’ll answer it.

Questions

  1. What are web components?
  2. Is JavaScript a dependency?
  3. Is there a polyfill for Declarative Shadow DOM?
  4. Can I enhance a custom element progressively?
  5. Is shadow DOM a requirement?
  6. Can I tab to an element in shadow DOM?
  7. Can I focus an element in shadow DOM programmatically?
  8. Can a skip link target an element in shadow DOM?
  9. Can I connect a label in light DOM to an input in shadow DOM?
  10. Can I create an ARIA reference to an element in shadow DOM?
  11. Can I access a live region in light DOM from shadow DOM?
  12. Can I change the role of a custom element?
  13. Can I create a custom element based on a native element?
  14. Can web components help improve accessibility?
  15. Are there any constraints regarding keyboard accessibility?
  16. Are there any constraints regarding screen reader accessibility?
  17. Are there any constraints regarding accessibility testing?
  18. Send me your questions!