Cours – 09 Septembre 2025

Accessibilité numérique

L’accessibilité numérique est un enjeu essentiel dans la conception de sites web modernes. Elle permet à tous les utilisateurs, y compris ceux en situation de handicap, d’accéder au contenu en ligne.

Domaines concernés

HTML → structure du contenu
CSS → design, présentation visuelle

Les lois évoluent et imposent une mise en conformité des sites web, sous peine d’amendes proportionnelles au chiffre d’affaires.

⚠️ Important : Ne pas négliger le front-end pour l’accessibilité !

RGPD et RGAA

RGPD

Règlement Général sur la Protection des Données

Le RGPD vise à garantir la protection des données personnelles des utilisateurs dans toute l’Union Européenne.

RGAA

Référentiel Général d’Amélioration de l’Accessibilité

Le RGAA définit les règles techniques permettant de rendre les sites accessibles à tous.

💬 “Les lois sont en mutation, il est nécessaire de se conformer aux nouvelles exigences pour éviter des sanctions financières.”

Front-end et Back-end

Front-end : HTML, CSS, JavaScript → visible par l’utilisateur
Back-end : PHP, SQL... → serveurs et bases de données

Ordinateur → Serveur → Base de données

Différences Front Office / Back Office

Front Office : partie visible par le client
Back Office : espace d’administration (réservé aux gestionnaires)

HTML et CSS : rôles distincts

HTML : structure du contenu
CSS : design et présentation

Le HTML est interprété par le navigateur, lu par les moteurs de recherche et les outils d’assistance (lecteurs d’écran). D’où l’importance d’un code propre et bien structuré.

🔍 Bon réflexe : tester ses pages avec des outils d’accessibilité pour vérifier le rendu et la compatibilité.

⚠️ Le CSS ne doit pas contenir de contenu caché (risque de blacklist). Ne pas utiliser uniquement la couleur pour transmettre une information.

Digression IA

Le formateur a exprimé des réserves sur l’usage de l’intelligence artificielle : risques liés à la sécurité et à la propriété intellectuelle.

Début du cours HTML

Création d’une première page sur VS Code. Être attentif à la langue (lang="fr"), élément essentiel pour l’accessibilité.

Structure de base

<html> → balise principale, avec attribut lang
<head> → informations destinées au navigateur (métadonnées, encodage, titre...)
<body> → contenu visible du site

Balises essentielles

<meta charset="UTF-8"> → encodage universel (UTF-8)
<meta name="viewport"> → adaptation à la taille d’écran
<title> → titre de la page (affiché sur l’onglet du navigateur)

💡 Accessibilité & SEO : choisir un titre clair et pertinent améliore le référencement et la compréhension du contenu.

Hiérarchie des titres

La structure des balises <h1> à <h6> doit être respectée :

Un seul <h1> par page
Suivre l’ordre hiérarchique : pas de <h5> après un <h1>

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-partie</h3>