Importance of HTML Headings for Accessibility

Aaron Cannon
2 HN recommenders · recommended in 2 months, 2011–2013
YouTube
42K views · 18 years ago · demo · intermediate · evergreen

Aaron Cannon, a blind web developer, demonstrates how a screen reader user moves through web pages that do and do not use HTML headings properly. It shows concretely how heading structure shapes navigation for people using assistive technology.

HN people recommend it as an eye-opening demonstration of what flat or missing heading structure does to screen reader users.

“It literally changed the way I thought about web development and accessibility.”
AccessibilityWeb design
#accessibility#screenreaders#htmlheadings#blindusers#semantichtml

2 comments from Hacker News

q
@qeorge2011 · in “On using h1 for all heading levels in HTML5”
For context on what the OP means by "this makes the document structure completely flat to screen reader users", I highly recommend this video. It features a blind web developer navigating websites which do and do not make proper use of headings: ▶ this video It literally changed the way I thought about web development and accessibility.
Strongly recommendsView on HN
r
@ricardobeat2013 · in “CSS Absolute Centering”
I used to work at a company specialized in front-end development, where we used NVDA, Voiceover, Window-Eyes and Jaws extensively while building and testing websites, sometimes for legal compliance. Lynx is a text-mode browser, not a screen reader; it's still visual. Assistive tech has a whole lot more going on. They have a slew of navigation modes and need cues from content to prevent the user from getting lost, you can't just scroll or look back up to where you where. I recommend looking at the resources below, and trying to use an iPhone or mac with voiceover and screen curtain enabled to really experience what it is like. link (collection of videos & articles) link link ▶ this video link (linked by PavlovsCat below)
RecommendsView on HN