Accessibilité des sites web

Mise en œuvre des exigences légales

Sur l'exhaustivité, l'exactitude ou l'actualité des informations suivantes

Les informations rassemblées ici correspondent toujours à l'état actuel des connaissances de l'équipe Typo3. Nous ne pouvons malheureusement pas garantir l'exhaustivité, l'exactitude et, au fil du temps, l'actualité de ces informations.

Les informations se réfèrent en outre aux exigences auxquelles les rédacteurs* de Typo3 sont confrontés lors de la création de pages et de contenus.

Le thème de l'accessibilité et les exigences légales sont bien plus vastes que ce qui est présenté sur cette page.

C'est pourquoi : veuillez faire des recherches supplémentaires par vous-même ! En cas de doute, le meilleur moyen est de poser des questions au service juridique.

De quoi s'agit-il ?

La participation est un droit de l'homme et l'accessibilité des sites web n'est donc pas seulement une nécessité mais depuis longtemps un critère de qualité et un facteur de compétitivité.

En 2019, la part des personnes lourdement handicapées dans la population totale en Allemagne était de 9,5%. Il s'agit de toutes les personnes qui se sont vu reconnaître par un organisme officiel un degré de handicap d'au moins 50%. Pour ces personnes, nous sommes tenus par la loi de proposer des sites web accessibles à tous !

Mais le nombre de personnes qui bénéficient de l'accessibilité est bien plus important, par exemple les personnes,

  • dont le degré de handicap n'est pas aussi important,
  • dont la déficience est temporaire (par ex. suite à un accident ou une maladie) ou
  • qui se trouvent dans une situation qui les affecte (par exemple un environnement bruyant).

Cela signifie tout simplement que nous profitons tous de l'accessibilité !

Pour qui ?

Exemples d'atteintes


Bases légales

Cela vaut pour chaque site web/présence web/application web de l'université !

  • Le site web/l'application doit répondre aux exigences de la norme européenne EN 301 549. Celles-ci correspondent aux "Directives pour l'accessibilité aux contenus Web (WCAG) 2.1" au niveau AA.
  • Chaque site web/application nécessite sa propre déclaration d'accessibilité avec le résultat du test et le contact de l'organisme chargé de l'application.
  • Possibilité de contact sans barrière sur chaque page

Un must pour les rédacteurs* de Typo3

Ce à quoi il faut faire attention dans le contenu des pages web

Donnez une structure à chaque page avec des titres

Pour les utilisateurs de Screenreader, la structure est lue en même temps que les titres. Ils peuvent ainsi saisir plus facilement la structure de la page et la structure du contenu. En outre, la structure claire d'une page est utile pour l'évaluation automatique du contenu, par exemple par les moteurs de recherche ou l'IA.

  • Donnez à chaque page un titre de page dans la mise en page 1 (H1).
  • Structurez les sections de la page entière de manière hiérarchique avec des titres dans la mise en page 2-4 (H2-H5), de la même manière qu'un livre est divisé en chapitres et sous-chapitres.
  • Ne sautez pas de niveaux de titres.
  • Ne choisissez pas les titres en fonction de leur apparence

Liens pertinents

Formulez des textes de lien pertinents qui donnent des informations sur l'action ou la page liée.

Attribuez en outre l'attribut titre aux liens si le texte du lien n'est pas suffisamment détaillé. Le titre du lien doit indiquer clairement quelle action est effectuée ou où le lien pointe.

Le texte du lien et le titre du lien se ressemblent. Le titre est en général un peu plus détaillé.

Exemple de texte de lien :

  • Bien
    • "Inscription à un séminaire"
    • "Site web de la RPTU"
  • Mauvais
    • "Cliquez ici"

Exemples d'attribut de titre :

  • "Vers le site web avec l'inscription au séminaire"
  • "Vers le site web de la RPTU"

Proposez un texte alternatif et, le cas échéant, une légende pour toutes les images et tous les graphiques.

Une image sans texte alternatif est simplement annoncée comme "image" par un lecteur d'écran. Il manque ici à l'utilisateur du lecteur d'écran des informations importantes que vous devez fournir en tant que rédacteur*.

Formulez impérativement un texte alternatif pour chaque image et chaque graphique . Le texte doit comporter au maximum 80 caractères.

La règle est la suivante :

  • description détaillée sans interprétation
  • De l'important à l'accessoire
  • Les graphiques décoratifs sans contribution au contenu peuvent être nommés ainsi.

Une légende n'est pas obligatoire. Elle aide cependant tous les visiteurs du site à s'orienter et à comprendre ce qui est montré. La légende ne décrit que brièvement le contenu de l'image.

Exemple de texte alternatif pour l'image ci-contre :

Un homme est assis sur un banc et tend une canette de bière à un autre homme en fauteuil roulant.

Pas de texte dans l'image !

Les textes dans les images ne sontpas saisis par les lecteurs d'écran. D'ailleurs, les moteurs de recherche ou les outils d'intelligence artificielle actuels non plus. Si vous ne voulez pas éviter le texte dans l'image pour des raisons de conception, écrivez le texte complet de manière compréhensible comme texte alternatif. Ce n'est qu'ainsi que votre page pourra passer un contrôle d'accessibilité.

Alternatives textuelles supplémentaires pour les graphiques complexes

Les graphiques particulièrement complexes peuvent nécessiter une alternative textuelle supplémentaire.

Exemples : les graphiques :

  • Schéma de la respiration cellulaire (biologie)
  • Aperçu des modules d'un programme d'études
  • Organigramme

Proposez une alternative textuelle supplémentaire si le contenu du graphique n'est qu'incomplètement expliqué par le texte de la page.

Le texte alternatif de l'image peut être ici : "Représentation schématique complexe de la respiration cellulaire. Description après l'image". En dessous de l'image, vous expliquez les informations complètes et les relations du graphique, par exemple dans un seul élément en accordéon intitulé "Description".

Compréhensible même sans couleurs

Les couleurs ne doivent pas être nécessaires à la compréhension du contenu. Par exemple, ne mettez pas en évidence les avertissements uniquement avec une infobox rouge. Ajoutez une icône d'aide.

N'utilisez pas l'une des couleurs RPTU pour un groupe cible et une autre couleur pour un autre groupe cible sans le signaler dans le texte.

Proposez des sous-titres, une transcription et une description pour les vidéos

Les personnes souffrant d'une déficience auditive ont besoin d'une transcription de la vidéo et de sous-titres dans la vidéo pour pouvoir suivre au mieux une vidéo. Ceux-ci profitent également à toutes les personnes qui se trouvent par exemple dans un environnement où elles ne peuvent pas non plus entendre le son de la vidéo.

Une transcription est la mise par écrit des paroles prononcées. Un élément en accordéon convient particulièrement bien pour intégrer une transcription en dessous de la vidéo.

Les sous-titres sont affichés dans la vidéo elle-même au moment où les mots sont prononcés dans la vidéo.

Les personnes souffrant d'une déficience visuelle ont besoin d'une description du contenu visuel de la vidéo. Si l'audiodescription (description audible) n'est pas possible, la description peut être combinée avec la transcription.

Aktion Mensch montre comment cela fonctionne sur le site web "Barrierefreie Videos verständlich erklärt" (Vidéos accessibles expliquées de manière compréhensible) !

Étiquette pour chaque élément du formulaire

Les champs d'entrée du formulaire nécessitent <label> pour l'accès au lecteur d'écran. L'attribut placeholder n'est pas une alternative. Exemple : <label for="search">Search</label><input id="search">.