General bad headings example
To be meaningful, heading outlines must be coherent on both a technical and textual level. While headings often are omitted completely by naive web developers, existing heading outlines can suffer of various accessibility problems on both a syntactical and a semantical level.
This heading outline in the following example has three problems.
<h1> My Hobbies </h1> <p> These all are activities I love to do on a regular basis. </p> <h2> Physical Activities </h2> <h4> Playing Soccer </h4> <p> Soccer is a team sport played between two teams of eleven players with a spherical ball. </p> <h3> Dancing </h3> <p> Dance is a performing art form consisting of purposefully selected sequences of human movement. </p> <h4> Salsa </h4> <p> Salsa is a popular form of social dance that originated in the Caribbean. </p> <h4> Rock'n'Roll </h4> <p> Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop. </p> <h4> Gardening </h4> <p> Gardening is the practice of growing and cultivating plants as part of horticulture. </p> <h2> Relaxing Activities </h2> <h3> Watching Movies </h3> <p> A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. </p> <p> <strong>Meditate</strong> </p> <p> Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself. </p>
On the visual level, the problems are hard to spot. So let's take a closer look at the document outline.
The problems are:
- A heading level is skipped: "Playing Soccer" is on level 4, but should be on level 3.
- A heading belongs to the wrong parent: "Gardening" does not belong to "Dancing", it should be on level 3 instead of level 4.
- A heading is not marked up properly: "Meditate" is marked up as a
<strong>paragraph instead of an
The first problem is clearly a syntactical ones, the second and third problems are semantical ones.
By the way, while NVDA does not propagate the first problem to the user, the bookmarklet h123 does so by marking it visually:
Most syntactical problems can be evaluated automatically: it's no problem for a computer to make sure that there's no heading level skipped. So the first problem in our list above is an easy one to examine.
Semantical problems, however, usually must be examined manually by a human who has certain knowledge about the presented content.
Regarding our example, to examine the second problem in our list above, one has to know what "Gardening" means. And based on this knowledge, one can conclude that this is not a dancing style (so it shouldn't belong to "Dancing"). Furthermore, to place it correctly, one needs to decide:
- Whether it belongs to "Physical Activities" as a heading level 3.
- Or whether it makes more sense to put it directly under "My Hobbies" as a heading level 2.
- Or whether it does not belong to the listed hobbies at all, and as such would be a heading level 1.
A computer probably will never be able to do that.
Finally, to examine the third problem in our list above, one has to conclude that a very short paragraph that is displayed in bold (and is placed above at least one following paragraph) might be meant as a heading, but has been marked up improperly. A computer can make an assumption about this alike, but it will never be a 100% certain.
To find out more about this, see Semantics and their importance for accessibility.