Una pàgina d'error 404 (pàgina no trobada) és bàsica en qualsevol lloc web una mica professional.
Headings are one of the basic aspects to consider when making a website accessible. On many occasions, because of being such a basic aspect, less effort than necessary is spent thinking about them and implementing a good heading structure to the web.
In this article, we consider them from an accessibility point of view.
First, we must consider the sources of information that we have when considering whether our website is accessible or not in terms of the use of headings. In this sense, we will always have to consider WAI’s (Web Accessibility Initiative) WCAG (Web Content Accessibility Guidelines). In this standard, which is taken as a reference in terms of web accessibility by current regulations, several criteria refer to the use of headings:
It is important to remember that accessibility is not a matter of “checking” a box once we meet the criteria. Accessibility is a constant effort to put the user and their diverse circumstances and needs at the center of the development process. In addition, accessibility always adds value and helps us in other aspects such as usability or even web positioning. As examples of good practices, we can consider:
The situation mentioned in the last point of the good practices, having a lower-level heading that precedes a higher-level one in the DOM, is something that we encounter quite often.
As time passes since the creation of the World Wide Web, web applications have become more complex. We no longer have many websites that function as basic “documents” with a title and a few subtitles to organize the information. We find all kinds of applications and structures. In this sense, in many projects, this question arises:
It is a common question that we find in many projects. If we answer it strictly from the point of view of the content’s organization and accessibility, the answer is that the title of the website must be an h1. From the perspective of the logic of information organization, all the content on the page "depends" on the title of the website. For example, if the title of the website is "A different blog" and the title of the content is "My first article", the most logical approach is that all the content of the page belongs to "A different blog" which would be the h1. If, for example, in the footer, there is a heading (“Interesting links”), it will belong to the title of the web. Otherwise, it would seem that the "Interesting links" belong to "My first article" (which would be the h1) and we would also have "A different blog" as an h2 that is before the main title of the page. To see it more clearly:
In the first case we would find:
In the second case:
We recommend the first case when possible.
However, we cannot ignore the fact that more and more websites use a structure with a menu bar that contains the logo and navigation links, and then the content of the website. It is true that in these cases it would be strange if all web pages have the same h1 (the textual alternative to the logo) and that the title of the content, which acts visually as a first-level heading, is an h2. That is why, in these cases, it can be considered that the title of the content is the h1. Our recommendation, to avoid leaving an h2 before the h1 with the title of the site, is to treat this logo (and its textual alternative) or text as a navigation link. We could say that visually it acts as such because it is already a standard to find a logo in the menu and know that its use is to navigate to the home page. In this case, we would find:
The logo or title of the site:
The heading structure:
It would be a correct heading structure and even considered by the WAI, but, as we can see, we did not solve the logical information order problem because "Interesting links" (heading in the footer) still seem to belong to "My first article".
To solve this problem, we recommend the use of HTML page regions (header, footer, nav, aside, etc.) that allow us to define which is the main content and which, such as “interesting links”, is complementary (for example, by placing it inside the "aside" region). Regions (and aria landmarks) is an extensive topic and we will discuss it specifically in another article.
We may the following resources useful for testing:
Alejandro Suárez Domínguez.