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

bzimport added a subscriber: wikibugs-l.
bzimport set Reference to bz457.
bzimport created this task.Via LegacySep 12 2004, 1:41 AM
bzimport added a comment.Via ConduitSep 12 2004, 1:42 AM

aaron.j.angel wrote:

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

brion added a comment.Via ConduitSep 12 2004, 2:21 AM

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.

bzimport added a comment.Via ConduitSep 12 2004, 2:34 AM

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.

brion added a comment.Via ConduitSep 12 2004, 7:14 AM

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

bzimport added a comment.Via ConduitApr 21 2007, 9:24 PM

evgeniy1985 wrote:

attachment missing in source

bzimport added a comment.Via ConduitApr 21 2007, 9:24 PM

evgeniy1985 wrote:

attachment missing in source

bzimport added a comment.Via ConduitApr 21 2007, 9:24 PM

evgeniy1985 wrote:

attachment missing in source

bzimport added a comment.Via ConduitApr 21 2007, 9:24 PM

evgeniy1985 wrote:

attachment missing in source

bzimport added a comment.Via ConduitApr 21 2007, 9:24 PM

evgeniy1985 wrote:

attachment missing in source

bzimport added a comment.Via ConduitApr 21 2007, 9:24 PM

evgeniy1985 wrote:

attachment missing in source

bzimport added a comment.Via ConduitApr 21 2007, 9:25 PM

evgeniy1985 wrote:

attachment missing in source

bzimport added a comment.Via ConduitApr 21 2007, 9:25 PM

evgeniy1985 wrote:

attachment missing in source

bzimport added a comment.Via ConduitApr 21 2007, 9:25 PM

evgeniy1985 wrote:

attachment missing in source

bzimport added a comment.Via ConduitApr 21 2007, 9:25 PM

evgeniy1985 wrote:

attachment missing in source

daniel added a comment.Via ConduitApr 21 2007, 9:33 PM

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

bzimport added a comment.Via ConduitApr 22 2007, 3:01 AM

ayg wrote:

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

bzimport added a comment.Via ConduitSep 1 2008, 10:23 PM

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/

bzimport added a comment.Via ConduitJan 21 2009, 12:31 AM

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).

bzimport added a comment.Via ConduitJan 21 2009, 12:58 AM

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.

bzimport added a comment.Via ConduitJul 19 2010, 1:17 PM

danny.b wrote:

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

matmarex added a comment.Via ConduitSep 22 2012, 9:46 PM

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

matmarex added a comment.Via ConduitSep 22 2012, 10:58 PM

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

Comments welcome (preferably on the patch).

matmarex added a comment.Via ConduitOct 12 2012, 5:27 PM

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.

matmarex added a comment.Via ConduitOct 29 2012, 1:25 PM

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

matmarex added a comment.Via ConduitNov 24 2012, 12:17 PM

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.

Edokter added a comment.Via ConduitNov 29 2012, 10:10 PM

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.

bzimport added a comment.Via ConduitNov 29 2012, 11:06 PM

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.

Aklapper added a comment.Via ConduitNov 30 2012, 1:01 PM

[Restoring previous state.]

Add Comment