Hijacking Screenreaders with CSS

Mislead screenreaders into changing how they announce content or into forgetting the underlying semantics of your page — one CSS rule at a time. Behold, the chaos that can be caused with just a single list-style: none or a text-transform: uppercase! We’ll challenge the separation of presentation and content, go on a tour through browser and operating system internals, and learn how our page is exposed to assistive technology. You won’t want to miss this one.

Ben Myers is a frontend developer with a passion for accessibility. He is a Software Engineer II at USAA’s bank. He blogs about web accessibility at benmyers.dev, and is about to start streaming about accessibility and semantics on Twitch! You can find him on Twitter at @BenDMyers.

Helpful Links

• Get the slides!
• Play with the demos!
• Ben’s blogposts about the accessibility tree and how CSS can influence screenreaders, which inspired this talk
• “Screen Readers and CSS: Are We Going Out of Style (and into Content)?” by John Northup for the WebAIM Blog
• Core Accessibility API Mappings 1.2
• “The Accessibility Tree Training Guide” by WhatSock
• Table heuristics in the Chromium source code
• Table heuristics in the Firefox source code
• “Tables, CSS Display Properties, and ARIA” by Adrian Roselli
• James Craig’s thread on WebKit and lists

Join this event in Discord