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 · World Congress 2022

10:20 min

Advocating for semantic HTML over complex framework component workarounds

Chris Heilmann Chris Heilmann +2 · LIVE

3:08 min

Introduction to building accessible web frontends

Konstantin Tieber · World Congress 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 · World Congress 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
almost 3 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

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Supply Chain Security for the Everyday Engineer

  • Pradumna Saraf

    Kestra Technologies

    Quality Assurance Engineer

Open session

Teaching AI Coding Agents to Build It Right the First Time

  • Sajeetharan Sinnathurai

    Microsoft

    Principal Product Manager

Related videos

Extending HTML with Web Components thumbnail
41:54
World Congress 2022 • over 4 years ago

Extending HTML with Web Components

Rowdy Rabouw

Making Interactions Accessible to All Users thumbnail
31:38
World Congress 2023 • about 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
World Congress 2022 • over 4 years ago

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

Konstantin Tieber

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

Mastering Keyboard Accessibility

Tanja Ulianova

Accessibility in React Application thumbnail
30:07
LIVE • almost 2 years 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.