Pas de h2 dans une section?

Bonjour,
Petite question html/accessibilité/bonnes pratiques.

Imaginons une section "services" typique dans une landing page avec :
- un h2 et un paragraphe de présentation (quelques mots)
- puis 3 blocs côtes à côtes, contenant chacun une icône, un titre et un description.

Imaginons maintenant qu'au niveau design, sur la maquette il n'y ait pas de h2 et de paragraphe de présentation. Les 3 blocs sont cependant de manière évidente une section à part entière indiquant 3 services (les sections précédente et suivante traitant de tout autre chose).
Si on ne met pas de h2 dans la balise section ça génère un warning, et des problèmes d'accessibilité.

Du coup comment faire pour bien faire, dans ce cas?
Merci de vos réponses,
Virginie

Hello,

Moi, j'utilise une classe spéciale pour ajouter les titres et les cacher de façon à ce que ça soit accessible, sans erreur coté validation du HTML et sans casser le design.

Source: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/

@allan00958
Super cet article, merci. Je vais feuilleter un peu les autres aussi ????.
Donc si je comprends bien tu ajoutes ton propre titre et tu le masques visuellement avec cette classe. J'avoue que la solution me plaît bien. Et du coup dans le cadre d'un travail avec un vrai designer ou en équipe ça passe aussi? Je veux dire ça choque personne qu'on ajoute un titre qui n'était pas prévu au depart? Parce que je trouve ça vraiment élégant ????.

@allan00958
Mille mercis!!! Je suis ravie! C'est exactement ce que je cherchais. Merci aussi pour tes indications sur le contexte en équipe. ????????????

C'est une mauvaise pratique néanmoins, dans pas mal de cas, celui-ci semble en faire partie. Le cachage de texte est utile, dans certains cas, en remplacement d'éléments graphiques:

<style>
.buy {
  background: url(buy.png);
}
</style>
<a class="buy"></a>
<!-- sera remplacé soit par ceci: -->
<a class="buy">
  <span class="visually-hidden">Acheter</span>
</a>
<!-- soit par cela: -->
<a class="buy">
  <img alt="Acheter" src="buy.png">
</a>

Ou alors pour des liens/resources spécifiquement dédiées aux technologies d'assistance.

Mais si le titre est utile pour les technologies d'assistance et pour le référencement, il est donc utile pour tout le monde.

Html 5 avait «résolu» ce problème en proposant une solution, mais malheureusement il a été très peu implémenté dans les navigateurs, ni par les intégrateur. La solution est donc d'utiliser des h2 dans les blocs au lieu des h3.

Juste une petite remarque, niveau SEO, bien faire attention à l'usage des balises Hn. Elles sont souvent utilisées à tort et à travers, et il y a une hiérarchie à bien respecter que Google surveille strictement. Et du coup, ça peut vite faire des ravages sur un site (d'un point de vue référencement)