WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2023 • Nov 10, 2023

Mastering Keyboard Accessibility

Tanja Ulianova

Ditch the `<div>` click listeners. Master modern focus management, native HTML, and the `:focus-visible` pseudo-class to eliminate up to 80% of your keyboard accessibility bugs instantly.

Pause
Mute Enter Fullscreen
#1 about 3 min

Understanding accessibility and universal impairment reasons

How different physical, situational, and age-related impairments create the universal need for accessible software interfaces.

#2 about 3 min

Identifying disabilities and assessing assistive technology tools

Familiarizing developers with the alternative input output devices users rely on to navigate digital content effectively.

#3 about 2 min

Meeting legal requirements for keyboard accessibility standards

Preparing for legal mandates like the European Accessibility Act which require digital platforms to provide equal access.

#4 about 2 min

Targeting web content accessibility guidelines for keyboards

Applying assistive technologies to leverage operating system keyboard APIs strictly following standardized web guidelines.

#5 about 4 min

Managing browser tabbing order and the tab index

Aligning the markup structure with natural reading flows ensures a logical path for reliable keyboard positioning.

#6 about 3 min

Controlling complex interactions using inert elements

The HTML inert attribute and carefully constructed focus traps prevent visitors from accidentally bypassing modular form content.

#7 about 2 min

Simplifying component development with native popovers

Modern HTML tags implicitly handle intricate keyboard events across overlapping components like modal dialogs and toasts.

#8 about 3 min

Providing clear visual feedback with focus indicators

Styling focused interaction states prominently via robust CSS pseudo-classes prevents operators from losing screen context tracking.

#9 about 4 min

Choosing native semantic HTML over custom wrappers

Utilizing standardized button tags completely bypasses building convoluted synthetic events and automatic accessibility property bindings.

#10 about 2 min

Reviewing the standard keyboard accessibility testing checklist

Validating structural markup trees and verifying element highlighting logic systematically helps guarantee functional input flows everywhere.

#11 about 2 min

Finding professional training and web accessibility resources

Supporting team advancement through specialized online training modules helps modern organizations achieve technical standards certifications securely.

#12 about 3 min

Validating custom software focus traps and contrast stylings

Balancing aesthetic visual overrides with accessible contrast profiles handles extreme variations effectively for custom interactive utilities.

Matching moments

4:49 min

Finding accessibility issues through manual keyboard navigation testing

Emma Dawson Emma Dawson · WWC 2025

3:08 min

Introduction to building accessible web frontends

Konstantin Tieber · WWC 2022

3:36 min

Enhancing website navigation through logical keyboard accessibility

Chris Heilmann +2 · LIVE

8:18 min

Building interactive accessibility learning resources for web developers

Chris Heilmann +2 · LIVE

6:11 min

Preventing UI overlays from breaking standard keyboard accessibility

Chris Heilmann +2 · LIVE

3:52 min

Fixing keyboard focus and outline styling for buttons

Anuradha Kumari · WWC 2023

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
over 2 years ago

Guided Memory Management: Rust's Ownership Model

Stefan Baumgartner

Passwordless future: WebAuthn and Passkeys in practice thumbnail
32:32
over 2 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
over 2 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
over 2 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

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

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

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer

Related videos

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

Preventing Accessibility Issues Instead Of Fixing Them thumbnail
56:01
LIVE • almost 3 years ago

Preventing Accessibility Issues Instead Of Fixing Them

Dirk Ginader

Accessibility with Web Components thumbnail
25:33
WWC 2023 • almost 3 years ago

Accessibility with Web Components

Manuel Mauky

Oh S***! There's a New Accessibility Law and I'm Not Ready! thumbnail
24:30
WWC 2025 • 12 months ago

Oh S***! There's a New Accessibility Law and I'm Not Ready!

Emma Dawson

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.