Chaotic headings

What is this?

The path into the unknown

Exactly right! This is the H1 level heading. Although it doesn’t look anything like the main heading. Make sure you only use headings for real headings and not, for example, because you like the style. You can use the semantics (H1-H6) independently of CSS styling.

It’s important to maintain the correct heading structure so that screen readers can recognize the structure of the text.

You accomplished the third of eight challenges.

To the next adventure

Barrieria

That’s confusing. What is this page primarily about?

The H1 heading reveals the solution. You can have the heading hierarchy read aloud to you using a screen reader.

Click on the heading H1.

Freddy looks friendly and puts their index finger in the air

Problem

The structure has been lost here.

I often see headings that are completely jumbled and make no sense at all. Sometimes, a heading is used semantically, even though it should actually be text. The designer only does this because they like the styling. However, CSS styling and the semantic heading structure (H1-H6) should be kept separate.

Barriers

Semantic

Use the correct HTML tags H1 to H6 to clearly define the hierarchy of headings.

H1 only once

Make sure that you use H1 heading only once on a page. It should describe what the page is about.

Freddy giggles, eyes closed

Why did the headlines have to do a leadership coaching?

…because the hierarchy wasn’t clear.

2 of 8 accomplished

The alt text leads to the solution? That’s not easy to find out but you did it!

There are people who use a screen reader, for example because they are blind or have a visual impairment. For them, it is essential that images have an alt text so that they can understand what is in the picture.

Schließen

Psst… du hast ein weiteres Easter Egg gefunden: “ändert”

Did you know that cookie banners are often not keyboard-operable? The focus often doesn’t reach the cookie banner, so screen reader users aren’t even aware that the banner is there. Eventually, they get stuck and don’t know why.