WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2023 • Aug 11, 2023

Accessibility with Web Components

Manuel Mauky

Are your custom web components invisible to screen readers? Learn how the ElementInternals API adds robust accessibility semantics without cluttering your DOM.

Pause
Mute Enter Fullscreen
#1 about 5 min

Building a framework-agnostic design system with web components

Achieving a consistent user interface across diverse application teams requires a framework-agnostic web component library.

#2 about 5 min

Understanding standard technologies behind web component architecture

Utilizing browser standards like custom elements and shadow DOM prevents vendor lock-in across implementation frameworks.

#3 about 5 min

Resolving default accessibility limitations in custom web components

Unrecognized custom elements require explicit ARIA attributes and design patterns to function correctly with assistive technologies.

#4 about 4 min

Implementing the accessibility object model for web component internals

Upcoming browser APIs enable internal JavaScript definitions for default accessibility properties without awkwardly modifying the target DOM.

#5 about 4 min

Managing keyboard interaction and focus states across shadow boundaries

Emulating standard form behaviors demands manual event listeners and programmatic focus transitions across customized shadow boundaries.

#6 about 2 min

Evaluating the limitations when extending standard HTML elements

Inheriting built-in semantic structures by expanding native inputs faces severe cross-browser support and encapsulation challenges.

#7 about 3 min

Addressing audience inquiries on component styling and validation constraints

Applying external layout modifications and tracking internal form validation require specialized techniques to bypass default encapsulation architectures.

Matching moments

3:51 min

Audience questions on accessibility and framework tradeoffs

Rowdy Rabouw Rowdy Rabouw · WWC 2022

10:20 min

Advocating for semantic HTML over complex framework component workarounds

Chris Heilmann +2 · LIVE

3:08 min

Introduction to building accessible web frontends

Konstantin Tieber · WWC 2022

2:46 min

Implementing low-hanging accessibility fixes in frontend web applications

Ramona Schwering Ramona Schwering · Coffee With Developers

5:38 min

Why the developer community mistakenly rejects native HTML components

Keith Cirkle · Coffee With Developers

2:15 min

Overcoming challenges in building accessible interfaces

Aurora Scharff Aurora Scharff · WWC 2025

More from World Congress 2023

The year 3000, a brief history of Web Development thumbnail
25:30
over 2 years ago

The year 3000, a brief history of Web Development

Lorenzo Pieri

Demografie nutzen um jedem Bewerber das passende Angebot zu machen! thumbnail
8:52
over 2 years ago

Demografie nutzen um jedem Bewerber das passende Angebot zu machen!

Nathalie Gierth

Guided Memory Management: Rust's Ownership Model thumbnail
0:18
almost 3 years ago

Guided Memory Management: Rust's Ownership Model

Stefan Baumgartner

Passwordless future: WebAuthn and Passkeys in practice thumbnail
32:32
almost 3 years ago

Passwordless future: WebAuthn and Passkeys in practice

Clemens Hübner

External Secrets Operator: the secrets management toolbox for self-sufficient teams thumbnail
30:07
almost 3 years ago

External Secrets Operator: the secrets management toolbox for self-sufficient teams

Moritz Johner

Building Reliable Serverless Applications with AWS CDK and Testing thumbnail
25:18
almost 3 years ago

Building Reliable Serverless Applications with AWS CDK and Testing

Raphael Manke

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia

Related videos

Extending HTML with Web Components thumbnail
41:54
WWC 2022 • about 4 years ago

Extending HTML with Web Components

Rowdy Rabouw

Making Interactions Accessible to All Users thumbnail
31:38
WWC 2023 • almost 3 years ago

Making Interactions Accessible to All Users

Anuradha Kumari

The What, Why, Who and How of accessibility on the web thumbnail
29:59
WWC 2022 • about 4 years ago

The What, Why, Who and How of accessibility on the web

Konstantin Tieber

Mastering Keyboard Accessibility thumbnail
27:16
WWC 2023 • almost 3 years ago

Mastering Keyboard Accessibility

Tanja Ulianova

Accessibility in React Application thumbnail
30:07
LIVE • over 1 year ago

Accessibility in React Application

Julia Undeutsch

WeAreDevelopers LIVE - Gaps in CSS, EU Accessibility Act and more! thumbnail
1:10:08
LIVE • over 1 year ago

WeAreDevelopers LIVE - Gaps in CSS, EU Accessibility Act and more!

Chris Heilmann, Daniel Cranney, Emma Dawson

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.