Page MenuHomePhabricator

Blueprint should make use of HTML5 <header> and <main> element with correct ARIA roles
Closed, ResolvedPublic

Description

Blueprint currently uses semantically non-correct to its contents <nav class="navbar navbar-fixed-top"> for elements that are semantically better represented by <header role="banner"> element. Same goes for <div class="container" id="content">, which should be replaced by <main class="container" id="content" role="main">.

Related Objects

StatusAssignedTask
Resolved Spage
Resolved Spage
Resolved Spage
Resolvedori
DeclinedNone
ResolvedNone
DeclinedNone
ResolvedAnomie
DeclinedNone
OpenNone
OpenNone
Resolved Spage
DeclinedNone
Resolvedjeropbrenda
OpenNone
DeclinedQgil
Resolved Spage
ResolvedQgil
ResolvedQgil
ResolvedQgil
Resolved Spage
Resolved Spage
Resolved Spage
DeclinedNone
DeclinedNone
Resolved Spage
Resolved Spage
DeclinedNone
DeclinedNone
DeclinedNone
ResolvedNone
DeclinedNone
DeclinedNone
ResolvedVolker_E
ResolvedNone
ResolvedPrtksxna
ResolvedVolker_E

Event Timeline

Volker_E created this task.Jul 28 2015, 9:03 PM
Volker_E claimed this task.
Volker_E raised the priority of this task from to Normal.
Volker_E updated the task description. (Show Details)
Volker_E added a project: Blueprint.
Volker_E added subscribers: Prtksxna, Spage.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 28 2015, 9:03 PM
Volker_E renamed this task from Blueprint should use a `<header>` element with a correct ARIA role to Blueprint should make use of HTML5 `<header>` and `<main>` element with correct ARIA roles.Jul 28 2015, 9:12 PM
Volker_E updated the task description. (Show Details)
Volker_E set Security to None.
Volker_E added a project: Accessibility.
Volker_E renamed this task from Blueprint should make use of HTML5 `<header>` and `<main>` element with correct ARIA roles to Blueprint should make use of HTML5 <header> and <main> element with correct ARIA roles.Aug 2 2015, 10:37 PM

Change 227582 had a related patch set uploaded (by Prtksxna):
Make use of HTML5 sectioning elements

https://gerrit.wikimedia.org/r/227582

As MediaWiki 1.26 is currently integrating jQuery 1.11.3 it's not yet providing support for `<main>´ element in IE<9.
Therefore we need to include html5shiv-printshiv.js as well. Why html5shiv-printshiv and not just html5shiv? Blueprint is us for the Living Style Guide, there is a probabiliy for people printing pages.

Change 227582 abandoned by VolkerE:
Make use of HTML5 sectioning elements

Reason:
abandoning this, starting with new patch

https://gerrit.wikimedia.org/r/227582

Change 227582 restored by VolkerE:
Make use of HTML5 sectioning elements

Reason:
reverting wrong decision beforehand

https://gerrit.wikimedia.org/r/227582

Volker_E added a comment.EditedAug 30 2015, 5:19 PM

@Prtksxna (Commenting here again, aside from T88023) Latest patch set #4 includes role="navigation" and footer[role="contentinfo"].
I've also altered markup order, so that <header> comes before <nav> for better screen-reader/keyboard user experience and added a skip-to-nav link.

A question still open is translation of skip link. Is wfMessage() the right approach?

A question still open is translation of skip link. Is wfMessage() the right approach?

Looks like the right way to go about this, yes!

@Prtksxna I'd prefer to go for another task caring about i18n and just merge that with changes included so far.

Opened T112308 on skip-links.

As a comment by @Pastakhov went about necessity of including ARIA landmark role attributes, instead of relying to native semantic roles:
As long as not all browsers (ex: Fx<21, Ch<26) map the ARIA landmark roles to the elements, it's recommended to include the role attributes. See f.e. on `role="main" over at http://html5doctor.com/the-main-element/#comment-35495

Change 227582 merged by jenkins-bot:
Use HTML5 sectioning elements and ARIA roles

https://gerrit.wikimedia.org/r/227582

Volker_E closed this task as Resolved.Oct 23 2015, 2:10 AM
Volker_E raised the priority of this task from Normal to High.
Volker_E removed a project: Patch-For-Review.