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)
Donnez une structure à chaque page avec des titres
- Donnez à chaque page un titre de page dans la mise en page 1 (H1).
- Structurez les sections de la page de manière hiérarchique avec des titres dans la mise en page 2-4 (H2-H4).
Pour les utilisateurs de Screenreader, cette structure est lue à haute voix avec les titres proprement dits. Ils peuvent ainsi saisir plus facilement la structure de la page et la structure du contenu.
Proposez un texte alternatif et 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 manquait 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 .
La règle est la suivante :
- description détaillée sans interprétation
- De l'important à l'accessoire
- Les graphiques d'ornement sans contribution au contenu peuvent être nommés de la sorte et ne faire l'objet que d'une brève description.
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, assis sur le dossier d'un banc, tend une canette de bière à un deuxième homme. Les deux hommes portent des vêtements de loisirs et une glacière est visible à l'arrière-plan. Le deuxième homme est assis dans un fauteuil roulant.
Proposez également des sous-titres, une transcription et une description des 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.
Quand quoi est nécessaire ? Les sous-titres sont particulièrement adaptés aux vidéos dans lesquelles l'action et les paroles sont saisies au mieux simultanément (p. ex. films de cinéma). Une transcription permet de saisir l'ensemble des propos tenus dans la vidéo. En effet, il est souvent difficile de suivre le déroulement du film tout en écoutant les sous-titres. (par ex. vidéo d'instruction).
Si vous téléchargez vos vidéos sur http://vcm.uni-kl.de, vous pouvez les sous-titrer automatiquement. La reconnaissance vocale est alors assez bonne, mais nécessite encore de légères corrections manuelles.
Les vidéos sur YouTube reçoivent automatiquement des sous-titres dont le contenu est très bon.
Une transcription n'est malheureusement pas si facile à réaliser. Le plus simple est de la copier à partir des sous-titres créés automatiquement.
Exemple de transcription de l'exemple de vidéo avec description des contenus visuels
[Kathrin Kunert]
Bienvenue à l'université technique de Kaiserslautern. Je m'appelle Kathrin Kunert et je dirige le centre de services aux étudiants sur notre campus.
[Dans le centre de services aux étudiants. 2 postes de travail avec des collaborateurs/trices]
Mon équipe et moi-même sommes à votre disposition pour répondre à vos questions sur les études.
[Musique, vol de caméra avec drone au-dessus du campus et autour du bâtiment administratif rond 47]
À la RPTU, c'est avant tout une université de campus qui vous attend. Cela signifie que tout ce dont ils ont besoin pour leurs études est facilement accessible en quelques minutes à pied. [...]
La gestion des nouveaux éléments de contenu ou une autre gestion des
0:01
Je vais vous montrer ici, dans notre système de formation, comment utiliser les anciens éléments de contenu.
0:07
Vous pouvez aussi toujours y accéder. Vous pouvez le faire sous t3coach.rhrk.uni-kl.de
0:12
Et là, il y a une page.
0:19
Tout d'abord, il y a un aperçu de nos formations, mais aussi une page qui s'appelle Sandbox et que j'ai consultée ici.
0:21
Dans ce système, nous avons mis à votre disposition un compte d'utilisateur backend que vous pouvez utiliser pour essayer ce que vous voulez.
0:27
Le système est toujours réinitialisé la nuit, de sorte que vous trouvez chaque jour un système frais.
0:36
Et cela signifie également que vous ne pouvez pas conserver vos modifications très longtemps.
0:42
L'URL du backend est affichée ici en même temps que la page Sandbox.
0:47
C'est T3 Coach aka UNIQA, Oldesloe, TYPO3 et le nom d'utilisateur est T3 Sandbox et le mot de passe Sandbox souligné T3 est là,
0:51
peut s'inscrire et c'est ce que nous faisons maintenant ou ce que j'ai déjà fait.
1:02
Je vais dans le backend et j'ai créé une sous-page sous la page Sandbox.
1:07
Cela s'appelle dans le VB en test un peu plus grand pour elle et nous allons nous occuper en tout premier lieu des éléments rasta.
1:13
Je crée maintenant un nouvel élément ici sur la page et nous voulons avoir un élément de grille.
1:21
Et vous voyez déjà sur cet aperçu que nous avons beaucoup de nouvelles tailles de colonnes qui sont des tailles de colonnes significatives,
1:30
qui, à mon avis, sont les plus larges avec 33 33 33 pour cent, avec 66 33 inversement les 50 50 et les 80 pour cent.
1:42
Pourquoi pas plus ceux avec les 25 pour cent de taille ?
1:58
Nous avons une taille de police nettement plus grande que dans notre dernière mise en page.
2:03
Pourtant, la plus grande largeur dans la présentation du bureau n'est pas devenue si grande de toute façon, selon la longueur des mots que nous avons.
2:10
Et ici, à l'université, ils sont parfois très longs.
2:22
Et vu la quantité de texte qu'il y a dedans, les 25 pour cent de colonnes sont tout simplement trop étroites pour le contenu.
2:25
Ils s'en rendront compte en regardant leurs pages. Cela vaut la peine de passer aux 33 pour cent, donc avec le principe de richesse.
2:33
À quoi servent les 80 pour cent ?
2:42
Parfois, on souhaite afficher un élément sur toute la largeur de la page, mais pas de manière aussi démesurée.
2:46
On le place alors dans une colonne de 80 %.
2:54
Je crois que c'est ce que nous faisons ici... Je vais prendre une largeur de 80%.
2:58
On peut continuer à donner des titres ici.
3:05
Un petit bug qui est encore dans le template, mais qui a déjà été rapporté et qui devrait être corrigé.
3:08
S'il n'y a pas de signature ici, les distances ne correspondent parfois pas tout à fait à l'intérieur de l'élément de la grille.
3:15
Mais vous verrez et j'espère que cela sera bientôt corrigé.
3:26
80 pour cent de largeur de colonne et nous avons déjà choisi cela.
3:35
Vous voyez qu'ici, dans la mise en page de la grille, on peut choisir encore une fois autre chose.
3:40
Nous enregistrons et fermons et maintenant nous mettons simplement un moment ici et prenons simplement une image.
3:45
Juste trois colonnes.
3:59
Je dois faire attention si dans le texte et les médias je n'écris pas de texte, mais je mets dans l'image qui ajoute le fichier par exemple.
4:01
Des images, on en a ici.
4:14
On pourrait en avoir de plus récentes et de plus grandes.
4:18
J'essaie de trouver la taille. Je l'accepte, je l'enregistre et je l'affiche.
4:24
Nous avons toujours un saut du modèle, nous le désactivons dès que possible.
4:33
Alors je remonte tout en haut.
4:40
Avec ce modèle, nous parlons toujours de différentes largeurs, et notamment d'une largeur de fenêtre.
4:42
Cela concerne aussi ce cadre tout à fait à l'extérieur, où normalement il n'y a pas non plus de pouvoir.
4:50
Ensuite, nous avons la largeur du contenu, qui va ici comme ça.
4:55
Ainsi, à cette. Ligne ici à la verticale vers le bas. Maintenant, on voit que cette image a une largeur de colonne de 80 pour cent.
4:59
Je l'ai maintenant appelé sur une page où toutes les nouvelles tailles d'éléments de la grille sont visibles.
5:08
Nous avons ici une colonne de 100 pour cent, 80 pour cent deux fois 50 pour cent 75 25 et le tout également inversé.
5:16
Cela m'a totalement manqué. Avant, un 66 33 et inversement.
5:26
Puis la 3e colonne avec 50 25 déjà 20 pour cent inversé 25 25 50 pour cent, 3 fois 33 pour cent, 4 fois 25 pour cent.
5:33
Je pense qu'il y a quelque chose pour tout le monde. Ce qui correspond aux éléments.
Attention aux exploitants de sites web
Exigences légales
Cela vaut pour chaque présence/application web de l'université séparément !
- Conforme à BITV 2.0 au moins AA
- BITV (auto)test du site web
- Déclaration d'accessibilité avec résultat du test et contact avec l'organisme chargé de l'application.
- Possibilité de contact sans barrière sur chaque page
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.