---
title: Mauvaises pratiques HTML
tags: support, html, good practice
robots: noindex, nofollow
author: Giuseppe Militello
---
# HTML et contenus inaccessibles pourquoi?


> © [Giuseppe Militello](https://www.linkedin.com/in/giuseppe-militello-22406ab0/) - All rights reserved for educational purposes only

Pour quelle raison certains contenus ne sont pas accessibles sur le web, pour les humains et les machines? Dans un cours technique aux étudiants de 1ère année de développement, on explique d'abord la structuration HTML d’une page web, respect de la semantique et ce que cela implique. Je me suis personellement aperçu que pour certains élèves cela reste un peu opaque, difficile à comprendre ou trop contraignant. Après réflexion je me suis dit qu’il valait mieux commencer par les mauvaises pratiques car celles-ci parlent au plus grand nombre.

**Ci-dessous une liste de mauvaises pratiques**

* Toutes les images devraient avoir un texte alternatif dans l’attribut alt. Même certains professionnelles négligent ce détail
* Quelques problèmes de contrastes entre l’arrière-plan et le texte
* Certains textes sont générés par du CSS
* Présence de fichiers pdf non accessibles : mauvaise exemple ci-dessous

    <a href="./img/CV-Designer.pdf" download="">
        Télécharge mon CV
    </a>
    <!--l'attribut download n'est pas renseigné -->

* Tooltips d’aide pour les formulaires non accessibles (non atteignables au clavier, non contrôlables à la souris, pas de focus)
* Les champs de formulaires ne sont pas toujours reliés à une étiquette (absence d’attribut “for” et “id”)
* Certains champs ne sont pas regroupés dans la balise `fieldset`
* Les labels ne sont pas toujours indiqués avant les champs de formulaire, idem concernant les exemples
* Les intitulés des boutons **“déplier”/”replier”** d'autres comme **“Plan du site”** et **“S’informer sur le statut”** par exemple, ne sont pas pertinents
* Certains liens ne sont pas tous fonctionnels
* La hiérarchie des éléments html n'est pas respecté. On retrouve un manque de cohérence avec les titres : h1, h2, h3 ...
* Présence de deux balises `main` dans les pages et balise `nav` présente sur du contenu non pertinent
* Absence de landmark **WAI-ARIA** surtout pour les balises générique : `div`
* Le bouton de retour en haut de page ne reçois pas le focus, idem au clic sur certaines ancres. Pour rappel le focus sur certains éléments html comme les liens sont obligatoires : navigation par touche clavier pour les non voyants.
* Certains contenus étant visuellement des listes ne sont pas structurés comme tels : par exemple fausses listes numérotés
* Présence de balises `p` vides
* Titre de pages non pertinent sur les pages de résultat de recherche
* Présence de titre dans le contenu non structurés comme tels : pas de balise `h1` ou `h2`
* Le code source n’est pas toujours valide
* L’ordre de tabulation n’est pas toujours cohérent, par exemple dans la page de recherche, le formulaire de recherche est placé après la pagination dans le DOM.
* Les images ne peuvent pas être utilisé comment élément cliquable car ne sont pas détéctable par le focus sauf si elles se trouve à l'intérieur d'un lien et comporte un attribut **alt**
* Aucun service worker est détécté : **PWA**
* Problèmes d'affichage sur des petits écrans : smartphone et tablette
* Les icones ne sont pas ignorées par les lecteurs d'écran : aucun attribut ARIA dans les balises contenant l'icone

### Resources complémentaires

[RGAA](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/)
[Landmarks w3c](https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/main.html)
[WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/fr)

> © Militello Giuseppe 2022