HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
People use the heading structure to scan the page and get an understanding of the main content. This is true for both sighted users and screen reader users
People use the heading structure to scan the page and get an understanding of the main content. This is true for both sighted users and screen reader users.
Headings are defined with the <h1> to <h6> tags. Users skim your pages by its headings.
It is important to use headings to show the document structure and the relationships between different sections. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
Let us check a good and a bad example of heading levels.
Good document outline: The Strait Times
Now you have an understanding of how a document outline can be.
Bad document outline: The New York Times
Problems
This document structure is confusing. It has many problems:
<h1>.<h2>s are confusing without the visual context.<h3>s are not related to the
above <h2> about Trump is not related to the DealBook Policy Project.<h3> has multiple headings combined.<h3> is repeating information.Take a look at the visual hierarchy.
The most prominent headline is Trump Acquitted. The next heading is 7 Republicans Break With Former President in Vote on 2nd Impeachment. Visually, the next three headings are clearly subheadings on the same level, even if Most Bipartisan … is larger than Analysis …
Solutions
Let us solve each problem, point by point.
No main heading
We have at least four alternatives to set the main heading:
There is no right and wrong here. As the front page of a newspaper, it makes sense to use the logo as the main heading. Remember to have an alternative text for the image.
Confusing h2s
These three headings is confusing without the visual context:
We can solve this in at least two ways:
Sometimes it makes sense to add content just for screen readers. This is such a case. A common
practice is to use a CSS class .sr-only, where sr means screen reader:
<h2 class="sr-only>Briefings</h2>
and add this styling to put it off screen:
CSS class .sr-only that is only accessible for screen readers:
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
Then it makes sense to change the level of the briefings from h2 to h3. But are they really headings? Do they present the following content? Let's say no. If we agree on that, we can change the three links to a list.
The Trump <h3>
Both the prominent heading Trump Acquitted and the following heading 7 Republicans … points to the same article. Therefore, they can be a part of the same heading. Again, there is no right or wrong here. We can change this to a h2 or we can add a hidden heading for this <section>:
<h2 class="sr-only">Headlines</h2>
The heading Headlines works well together with Briefings in the document outline.
Repeating information
The heading 7 Republicans … is repeated twice. This is because a h3 is nested inside another h3. Let's remove it and head over to Web Developer to display our new document outline.
Way better.
In this page, you have read many headings. Check the document outline. Is it good?