926405 - [a11y] Title order makes difficult to use the MDN home page with a screen reader

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Jean-Yves Perrier [:teoli]]

Attachment: titres.png

Headings are linearly read by screen reader.

The ones we have on the MDN Home page make the MDN very difficult to use.

Basically, it start with 5 titles from Tabzilla, without an enclosing <h1> or similar to skip them (like Navigate to other Mozilla real estate). (A <h1> there would be bad for SEO anyway.

But even our regular headings are not optimal. Search is difficult to find and the hierarchy is confusing (<h3> in a <h1> followed by <h2> in that very same <h1>

Comment 1

[Isac Lagerblad (:icaaq)]

The headings in tabzilla is not a problem because the content inside that is hidden with display:none; and it wont be announced to screenreaders (unless you open it)

But the header-outline for the rest of the page can be improved a lot.

Roger Johansson has written quite a few articles on the subject and this one summarizes it quite good i think http://www.456bereastreet.com/archive/201104/html5_document_outline_revisited/

Comment 2

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/a052ed28ac4eb5a249fa7e624dbf1a610923eb3f
fix bug 926405 - Update homepage heading structure

https://github.com/mozilla/kuma/commit/7a78f86e89e8a84f9625cbbf6f631750152ce5bf
Merge pull request #1614 from darkwing/a11y-titles-926405-too

fix bug 926405 - Update homepage heading structure