Advanced HTML for Performance & Accessibility
summary
Claim: better semantic HTML measurably improves accessibility and runtime performance. Demonstrations use Firefox’s accessibility tree and Apple VoiceOver to show a div-only page collapsing into “sections and text leaves” versus proper headings, nav, main and landmarks. Recommendations include add width and height to images to cut cumulative layout shift, loading="lazy" on images and iframes, use native elements not divs for buttons/labels, and use fetchpriority, preload, preconnect and 103 Early Hints. Lighthouse warns at 800 nodes and recommends under 1500.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:09HTML for performance & accessibility
- 8:27Semantic HTML benefits
- 14:44Native HTML features
- 15:05Image optimization with HTML
- 20:05Fetch priority hints
- 24:21Resource hints
- 26:08Preload critical resources
- 29:21Conclusion and key takeaways
related talks
57mAdvanced HTML for Performance & Accessibility
50mAdvanced HTML for Good Developers
33mMarkup matters
28mHumanizing The Markup Language: Thoughtful Semantics for Better Web Experiences
45mA Web for Anyone, Anywhere, Anytime
01h 07mA web for anyone, anywhere, anytime
01h 01mA web for anyone, anywhere, anytime
46mSemantics and How to Get Them Right