Les Fondations : Sémantique & Structure 🏗️

Avant de toucher au JavaScript ou à Inertia, tout se joue dans le HTML.

Les navigateurs et les lecteurs d'écran sont intelligents, mais ils ne sont pas devins. Si vous utilisez une <div> pour tout, ils sont aveugles.

Slides#

https://gamma.app/docs/Les-Fondations-Semantique-Structure--xqowcs7jy2fczc5

1. HTML Sémantique : Parler la bonne langue 🗣️#

Le HTML sémantique donne du sens au contenu, pas juste du style.

• <div> et <span> : Ce sont des boîtes vides. Elles ne disent rien. "C'est juste un truc".

• <button>, <nav>, <article> : Ils disent ce qu'ils sont et comment interagir avec eux.

Le test du "Div Button" ❌#

Beaucoup de devs font ça :

HTML

<div class="bg-blue-500 text-white p-2 cursor-pointer" onclick="submit()">
  Envoyer
</div>

• ⌨️ Clavier : Le focus ne s'arrête pas dessus (pas de Tab).

• 🗣️ Lecteur d'écran : Dit "Groupe". L'utilisateur ne sait pas que c'est cliquable.

• 🖱️ Interaction : Pas de support pour la touche Entrée ou Espace.

La solution propre :

HTML

<button class="bg-blue-500 text-white p-2" type="submit">
  Envoyer
</button>

Le navigateur gère tout le reste (focus, click, clavier) gratuitement. Merci le navigateur.

2. La Hiérarchie des Titres (h1 - h6) 🗺️#

Les utilisateurs de lecteurs d'écran naviguent souvent en sautant de titre en titre (raccourci H). C'est leur table des matières.

• ✅ Un seul <h1> par page (le titre principal).

• ✅ Pas de sauts (ne pas passer de h2 à h4).

• ❌ Ne jamais utiliser un h3 juste parce que vous voulez que le texte soit "moyen gras". Utilisez une classe CSS pour ça (ex: text-lg font-bold).

🔗 Ressource : MDN - Les éléments de titre

3. Le "Skip Link" (Lien d'évitement) ⏭️#

C'est vital pour la navigation au clavier.

Imaginez : vous arrivez sur une page, vous voulez lire le contenu principal, mais vous devez d'abord appuyer 45 fois sur Tab pour passer tous les liens du menu de navigation. L'enfer.

La solution : Un lien caché tout en haut de la page qui apparaît au focus et permet de sauter directement au contenu.

Implémentation dans AppLayout.vue#

Dans une SPA (Single Page App) comme Inertia, on a une subtilité : quand on change de page, il faut gérer le focus.

Extrait de code

<script setup>
import { ref, watch, nextTick } from 'vue';
import { useRoute } from 'vue-router'; // Ou via Inertia usePage si besoin

// 1. Référence pour le conteneur principal
const mainContentRef = ref(null);
const route = useRoute();

// 2. Reset du focus au changement de page
watch(
  () => route.path,
  async () => {
    // On attend que le DOM soit mis à jour
    await nextTick();
    // On met le focus sur le wrapper principal pour redémarrer la navigation
    mainContentRef.value?.focus();
  }
);
</script>

<template>
  <div class="min-h-screen bg-background">
    <a 
      href="#main-content" 
      class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-background focus:text-foreground focus:outline-none"
    >
      Passer au contenu principal
    </a>

    <header>...</header>

    <main 
      id="main-content" 
      ref="mainContentRef" 
      tabindex="-1" 
      class="outline-none"
    >
      <slot />
    </main>
  </div>
</template>

Pourquoi ça marche ?

1. Skip Link : Au premier Tab, le lien apparaît. Enter envoie direct au main.

2. Focus Reset : Quand l'utilisateur change de page via Inertia, le watch remet le focus en haut du contenu (main). Sans ça, le focus resterait perdu sur l'ancien lien ou le body.

4. Landmarks (Repères) 📍#

Les lecteurs d'écran permettent de sauter de zone en zone. Utilisez les balises natives :

• <header> (En-tête)

• <nav> (Navigation)

• <main> (Contenu unique de la page)

• <footer> (Pied de page)

• <aside> (Barre latérale)

Si vous utilisez des <div>, vous devez ajouter role="main", etc. Mais pourquoi se fatiguer ? Utilisez les balises HTML5 natives.

🔗 Ressource : W3C - ARIA Landmarks Example

---

💡 Astuce Pro : Dans Chrome, ouvrez les DevTools -> Onglet "Lighthouse" -> Cochez "Accessibility". Il vérifiera automatiquement si vos Landmarks et Titres sont logiques.

Google Lighthouse#

Synthèse#