Page MenuHomePhabricator

Clean up use of header tags in MonoBook & Vector skin UI elements
Closed, ResolvedPublic

Description

Author: aaron.j.angel

Description:
Current usage does not follow the guideline that headings represent logical
structure of documents. The sitesubtitle and personal, navigation, toolbar and
search box labels appear to use HTML heading tags for font and/or emphasis
rather than logical structure. Below is the output from the W3C HTML Validator
using the Outline option; the outline generated is incomplete as headings are
used inappropriately.

Outline

Below is an outline for this document, automatically generated from the heading
tags (<h1> through <h6>.)

  • Main Page o A level 2 heading is missing! <----- problem + From PhutureWiki o Development projects + A level 3 heading is missing! <----- problem
    1. A level 4 heading is missing! <----- problem
      • Views
      • Personal tools
      • Navigation
      • Search
      • Toolbox

If this does not look like a real outline, it is likely that the heading tags
are not being used properly. (Headings should reflect the logical structure of
the document; they should not be used simply to add emphasis, or to change the
font size.)


Version: 1.20.x
Severity: normal

Details

Reference
bz457

Event Timeline

bzimport raised the priority of this task from to Low.Nov 21 2014, 6:53 PM
bzimport set Reference to bz457.
bzimport added a subscriber: Unknown Object (MLST).

aaron.j.angel wrote:

er, forgot to mention, this was with the default Monobook skin.

Here's the use of heading tags in MediaWiki:

<h1> page title
<h2> == Heading ==
<h3> === Heading ===
<h4> ==== Heading ====
<h5> ===== Heading =====
<h6> ====== Heading ======

If there's something wrong in the usage of these tags, please fix the relevant articles.

If that's not sufficient, please reopen the bug and clarify. If you can cite the guidelines you're talking about that would be very helpful.

aaron.j.angel wrote:

As far as wiki markup goes, headers are generated correctly. The problem
appears to exist in the template(s) applied to the article source used to
generate the HTML output for the page. Please review the Outline in the original
comments more carefully, the problems are pointed out rather clearly. Several
outline entries do not relate to the contents article itself, such as the
sitesubtitle, and the box labels, none of which have parent headers (though they
have grandparent headers). The problem that exists cannot be fixed by modifying
the source of any wiki article; the problem is in the skin template.

The guidelines mentioned were pasted right in the original comments for the bug;
see the outline pasted , it came from the W3C Validator (as do the guidelines),
also mentioned in the original comments for the bug.

Set component, changed summary to reflect the issue at hand.

evgeniy1985 wrote:

attachment missing in source

evgeniy1985 wrote:

attachment missing in source

evgeniy1985 wrote:

attachment missing in source

evgeniy1985 wrote:

attachment missing in source

evgeniy1985 wrote:

attachment missing in source

evgeniy1985 wrote:

attachment missing in source

evgeniy1985 wrote:

attachment missing in source

evgeniy1985 wrote:

attachment missing in source

evgeniy1985 wrote:

attachment missing in source

evgeniy1985 wrote:

attachment missing in source

you know, putting everything into *one* diff would be much nicer. Try svn help diff

ayg wrote:

Perhaps you would care to examine the contents of those patches before
commenting on the best format for them.

wikimediabugzilla wrote:

Is anything happening with this? There are accessibility impacts when headers are not structured correctly:

http://www.accessibilitytips.com/2008/03/10/avoid-skipping-header-levels/

michael wrote:

This blocks accessibility (Bug 367).

Ideally, the headings should be nested in order without skipping any—this deficiency blocks WCAG 1.0 AA and AAA conformance. The site subtitle (h3#siteSub) is not a heading organizing the document or describing the content below, so it shouldn't be marked up as a heading element at all—this blocks WCAG 1.0 AA and AAA, WCAG 2.0 AA and AAA conformance.

WCAG 1.0 requires headings to be used and nested correctly (Priority 2, http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings)

WCAG 2.0 requires headings to describe topic and purpose (AA, http://www.w3.org/TR/WCAG20/#navigation-mechanisms-descriptive) and section headings to organize a document (AAA, http://www.w3.org/TR/WCAG20/#navigation-mechanisms-headings). Proper nesting is recommended, but not required (http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G141).

michael wrote:

Although WCAG 2.0 doesn't require proper nesting, having sidebar boxes (h5) contained within the last article section (if it's headed by h2, h3, or h4) is an incorrect representation of the document structure, and arguably breaks WCAG 2.0 AAA conformance. the h5's should be changed to h2's, below the page title (h1), and at the same level as the article's main section subheadings (h2).

Of course the CSS skins should be adjusted so the presentation remains the same.

The h3#siteSub replaced by div#siteSub in r69545.

Assigning to myself. I'm going to work on it.

Here's a draft of a change I would do: https://gerrit.wikimedia.org/r/#/c/24674/

Comments welcome (preferably on the patch).

Unassigning, I abandoned the patch.

People do not like my proposed solution(s), and frankly I don't like theirs. I won't oppose it, but I don't feel like implementing it myself.

I've attempted a fix once again, this time in a much less controversial way, in I9a2ebd50.

Patch merged by Siebrand. There is a follow-up submitted by Aude to adjust the Vector extension to the changes that is not merged yet (I64794145), but apart from that this bug is done, so I'm marking this RESOLVED FIXED.

One question: Why?

The reason H5 is used in Vector's tab design is *because* is is the same size as regular text, so the exact height of the top bar is exactly 5em (2 x 2.5em). I see absolutely no benefit in chaging the headers to H3. Apart from completely killing my tabs gadget, we now have inconsistent sizing issues, which may break other gadgets and templates as well who's positioning rely on the top bar being 5em.

Fixing HTML is fine, but changing elements in the core design is a big no-no, and should be reverted. All the H5s were invisible, so there was nothing to fix.

michael wrote:

Erwin Dokter, obviously, the style sheet should be updated to format the H3 replacing an H5 to maintain the same visual styles. Hopefully this will prevent breaking gadgets. If your gadget relies on particular visual styling, can it be made less fragile by incorporating the required styles?

If the core design has improper HTML, then it should be fixed. Choosing H5 because it happens to be a particular size (with a particular style sheet in a particular visual browser) is a bad idea in the first place.