Semantics and How to Get Them Right

on YouTube ↗46m

" summary

Claim: using the right HTML elements actually gives screen readers jump lists, reader mode, form autofill and native keyboard/form behavior; tools used are browser devtools and the Firefox Accessibility panel to inspect computed roles; gotchas found include CSS like display:grid or list-style-type:none removing table or list semantics, headings inside summary losing heading semantics, ::before/::after joining accessible names and uppercase becoming abbreviations; ARIA is a polyfill until HTML adds missing components and Open UI works on tabs popovers and carousels.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 10:32HTML is a standard way for your website to declare its semantics
3. 16:42Hire for HTML expertise
4. 39:52Heuristics in the platform and assistive technologies

" related talks

• 33mMarkup mattersCharlie Morris · Laracon AU 2025
• 44mWeb accessibility for ArtisansFranz Liedke · Laracon EU 2016
• 52mCommon Accessibility PitfallsChris DeMars · DevReach 2022
• 38mWeb accessibility - it's not just about HTMLIre Aderinokun · ffconf 2023
• 28mDeveloper's Guide to Accessibility MechanicsLéonie Watson · You Gotta Love Frontend 2016
• 42mCSS, JavaScript and AccessibilityIre Aderinokun · Pixel Pioneers 2023
• 22mBetter accessibility with a user-centric viewMarianna Österlund · React Finland 2022
• 33mIt's the markup that mattersHidde de Vries · JSConf Budapest 2022