Tanja Ulianova

Mastering Keyboard Accessibility

Solve 80% of your accessibility issues with semantic HTML. This talk breaks down keyboard navigation, from modern focus management to the power of native elements.

Mastering Keyboard Accessibility
#1about 5 minutes

Understanding the scope and importance of web accessibility

Accessibility is a temporary state for everyone and encompasses various permanent, temporary, and situational impairments.

#2about 3 minutes

Legal requirements and user needs for keyboard support

Keyboard accessibility is a legal requirement under laws like the European Accessibility Act and is essential for users with motor impairments and assistive technologies.

#3about 4 minutes

Managing focus flow with tabbing order and tabindex

The browser creates a tabbing order for interactive elements, which can be modified using the tabindex attribute or by making entire sections non-interactive with the inert attribute.

#4about 3 minutes

Avoiding keyboard traps with modern HTML elements

Prevent users from getting stuck by avoiding unintentional keyboard traps and leverage built-in accessible elements like dialog and the popover attribute for complex components.

#5about 3 minutes

Providing clear visual focus indicators using CSS

Ensure keyboard users always know their location on the page by avoiding `outline: none` and using CSS pseudo-classes like `:focus-visible` and `:focus-within` for styling.

#6about 4 minutes

Solving accessibility issues with semantic HTML

Using correct semantic elements like `<button>` and `<a>` instead of generic `<div>`s automatically provides built-in accessibility features, solving the majority of common issues.

#7about 4 minutes

Further resources and common accessibility questions

Explore recommended resources like the W3C's web accessibility course and get answers to common questions about focus traps and custom focus styling.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Choosing the right fonts for web legibility and performance
05:41 MIN

Choosing the right fonts for web legibility and performance

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Empathizing with users over chasing engagement metrics
05:24 MIN

Empathizing with users over chasing engagement metrics

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Featured Partners

Related Videos

See all videos
The What, Why, Who and How of accessibility on the web29:59

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

Konstantin Tieber

Making Interactions Accessible to All Users31:38

Making Interactions Accessible to All Users

Anuradha Kumari

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

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

Emma Dawson

Accessibility with Web Components25:33

Accessibility with Web Components

Manuel Mauky

Decoding web accessibility through audit29:03

Decoding web accessibility through audit

Anuradha Kumari

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

Accessibility powered by AI31:30

Accessibility powered by AI

Ramona Domen

Accessibility Test Driven Development23:33

Accessibility Test Driven Development

Maria Korneeva

Related Articles

View all articles
DC
Daniel Cranney
Web Developer Portfolio Inspiration and Examples - March 2025
Every developer needs a portfolio… of some sort. Whether it’s an all-singing all-dancing portfolio page, a blog, or a simple links page, it’s important to let others know what you have done, what you can do, and how they can contact you. A portfolio ...
Web Developer Portfolio Inspiration and Examples - March 2025

From learning to earning

Jobs that call for the skills explored in this talk.