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é !
Exemples d'atteintes
unaihuiziphotography
RioPatuca
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
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) !
Approches pratiques pour atteindre l'accessibilité de base
Utilisez le HTML de manière sémantiquement correcte
Un HTML sémantiquement correct aide les utilisateurs de lecteurs d'écran à comprendre la structure du contenu et lui donne un sens. Les lecteurs d'écran lisent ces éléments structurels ! Demandez-vous "Qu'est-ce que c'est ?" lorsque vous écrivez du HTML. Utilisez un ordre logique des titres et des éléments structurants comme header, footer, nav, ul, p ...
Proposez un texte alternatif pour les contenus sans texte
Tous les contenus qui ne sont pas représentés par du texte ne sont pas visibles pour les lecteurs d'écran. Fournissez des descriptions concises dans les attributs alt pour toutes les images et des alternatives textuelles pour les diagrammes, etc. Les CAPTCHA doivent également être accessibles.
Choisissez des couleurs contrastées
Selon la taille de la police ou de l'élément graphique, il faut obtenir des rapports de contraste différents entre les couleurs voisines.
Un grand texte signifie au moins 18 pt pour une taille de police normale et au moins 14 pt pour une taille de police grasse. Pour AAA (niveau WCAG 2.1), le rapport de contraste est de 4,5:1. Pour AA, le rapport de contraste est de 3:1.
Un texte normal signifie un maximum de 17 pt pour une taille de police normale et un maximum de 13 pt pour une taille de police grasse. En AAA, le rapport de contraste est de 7:1. En AA, le rapport de contraste est de 4,5:1.
L'outil d'analyse du contraste des couleurs d'Adobe aide à vérifier et à trouver les bonnes combinaisons de couleurs.
Rendez le :focus visible
Pour pouvoir bien naviguer avec le clavier, l'élément qui est actuellement au centre de l'attention a besoin d'une mise en évidence visuelle. Les éléments interactifs doivent recevoir le focus dans un ordre judicieux et être généralement focalisables. Par exemple, utilisez <button> au lieu de <span>.
Utilisez WAI-ARIA pour les sites web dynamiques
Les sites Web dynamiques sont souvent compliqués en termes d'accessibilité. La norme WAI-ARIA fournit des outils pour garantir l'accessibilité dans les applications dynamiques : https://www.w3.org/TR/wai-aria/
Rôles et attributs ARIA recommandés qui fonctionnent de manière stable dans les navigateurs.