Sticky, Floating, and Completely Inaccessible? Not Anymore - Web Accessibility For All

Sticky Isn’t Always Smart — Unless You Build It That Way.

Sticky headers and floating toolbars may look sleek, but without accessibility in mind, they can silently block users from getting things done.

In this episode, we explore the real-world accessibility impact of sticky and floating UI patterns across modern web apps — from data tables and popovers to drawing interfaces. You'll learn when these patterns help, when they hurt, and how to design them to support screen readers, keyboard users, and switch devices alike.

I’m Ariel Ferro — a frontend engineer, web accessibility specialist, with over 10 years of experience creating inclusive interfaces as a blind person. In this episode of Web Accessibility For All, I bring you hard-earned lessons and smart design strategies to build floating UI that works for everyone — not just those with perfect vision and a mouse.

👉 If you’re building modern web apps or design systems, this one’s a must-watch.

Chapters:
0:00 Intro
0:33 Presentation
1:35 What We Mean by Sticky and Floating UI?
4:45 Case 1: Sticky Headers in Tables
7:21 Case 2: Popovers, The Good Kind of Floating
9:29 Case 3: Drawing Canvases and Floating Controls
11:21 Rules for Accessible Sticky and Floating UI
12:34 Closing thoughts
13:15 Outro

If you enjoyed this video, you'll love my podcast! We dive deeper into Web Accessibility and explore even more. Listen here: https://www.youtube.com/playlist?list=PLG0JgqKlOPB_Bj5hJxnOdFVHaQdjeQkXB

👍 Like the episode? Subscribe to the channel for more hands-on accessibility guidance, developer insights, and practical tips from someone who navigates the web differently — every single day.

Mentioned in this episode:
- CSS position: sticky: https://developer.mozilla.org/en-US/docs/Web/CSS/position
- CSS position: fixed: https://developer.mozilla.org/en-US/docs/Web/CSS/position
- ARIA Roles (role="dialog", aria-modal, etc.): https://www.w3.org/WAI/ARIA/apg/patterns/dialog/
- ARIA Attributes (aria-haspopup, aria-controls, aria-live): https://www.w3.org/WAI/standards-guidelines/aria/
- HTML Table Semantics: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
- Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
- W3C WAI (Web Accessibility Initiative): https://www.w3.org/WAI/
- WCAG – Web Content Accessibility Guidelines: https://www.w3.org/WAI/standards-guidelines/wcag/

Legal Notice:
All brands, technologies, APIs, and trademarks mentioned in this episode are property of their respective owners. I am not affiliated with, sponsored by, or representing any of them. All opinions are my own, based on professional experience and accessibility testing.

#WebAccessibility #InclusiveDesign #A11y #UXDesign #AccessibleWeb #StickyUI #FrontendAccessibility #AccessibleDesign #ScreenReaderTesting #DesignSystems

Видео Sticky, Floating, and Completely Inaccessible? Not Anymore - Web Accessibility For All канала Ariel Ferro