Web development Blog

A common issue that we've probably all faced at some point is having a component that includes a heading, which sometimes should be an H2 and sometimes maybe an H3, depending on where it's used.

You can see an example of that in the screenshot below, taken from the City of Vienna's website (I translated the page into English before taking the screenshot). We see the same card component used three times. At the very beginning of the page, it follows the H1, so the heading inside the first card should be an H2. But then we have another section that starts with an H2, and here these cards should start with an H3.

The title already tells most of the story, but here's why you must avoid labeling generic elements like divs or spans using aria-label or aria-labelledby.

<div aria-label="News">
    …
</div>

People like to use the box-shadow property for styling focus outlines because it gives them more flexibility.

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0px 4px blue, 0 0 0px 8px red, 0 0 0 12px blue;
}