Principes de base de l'e-Accessibilité
L'accessibilité numérique concerne toute interface utilisateur électronique et est au service de toutes les personnes, indépendamment du type de handicap ou d'autres besoins et caractéristiques spécifiques.
![](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/fullwidthimage/image.imageformat.1286.1925666915.png)
Que signifie l'e-Accessibilité pour le matériel d'apprentissage ?
Les supports de formation accessibles peuvent être "lus" et utilisés par toutes les personnes en formation intéressées, indépendamment des limitations motrices, sensorielles et, dans la mesure du possible, cognitives/psychiques. Dans la mesure du possible, sans adaptations individuelles. Si l'utilisation n'est pas possible sans adaptation, les matériels d'apprentissage électroniques accessibles sont compatibles avec les outils d'aide courants tels que les lecteurs d'écran ou les logiciels de commande vocale.
The BIG FIVE - Les principales caractéristiques des interfaces utilisateur électroniques accessibles
Intégrez les cinq aspects suivants, faciles à retenir. Ils couvrent la plupart des exigences en matière d'accessibilité numérique. En outre, ils servent de bon guide pour des tests d'accessibilité autonomes.
Sortie flexible
L'exigence d'une possibilité de sortie flexible des contenus à l'écran et par le biais de différents dispositifs de sortie est principalement axée sur les besoins des personnes souffrant d'un handicap visuel. Elles ont besoin de pouvoir adapter individuellement les contenus numériques de différentes manières. En agrandissant les caractères, l'espacement des lettres, des mots et des lignes, en choisissant une police de caractères alternative, en adaptant les couleurs, les contrastes ou la luminosité générale de l'écran.
Dans l'esprit de la conception universelle, on n'attend pas des créateurs de contenu qu'ils fournissent eux-mêmes les outils permettant d'adapter les différents aspects. Il n'est donc pas nécessaire de doter son propre site Web d'une fonction d'agrandissement de la police. Mais il est d'autant plus important que les contenus puissent être agrandis à l'aide d'outils appropriés.
Le moyen le plus simple d'y parvenir est de choisir des formats de fichiers appropriés. Ainsi, le format HTML (et d'autres technologies web) est optimal pour la création de contenus accessibles, alors que pour le PDF et d'autres formats de fichiers orientés vers l'impression et la mise en page, il devient beaucoup plus difficile et co?teux de garantir l'accessibilité.
![](/bin/ethz/components/previewImage/youtube/ZKKNz20yIGk.jpg)
![Bandes dessinées : illustration de l'exigence pour les contenus numériques accessibles de pouvoir être affichés de la manière la plus flexible possible en fonction des besoins des personnes handicapées.](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image/image.imageformat.1286.684162759.png)
Responsive Design
Les personnes handicapées ont besoin que les contenus et les informations puissent être affichés sur différents appareils et sur des écrans de différentes tailles avec différents facteurs d'agrandissement.
Il est important que les textes défilent de manière dynamique lors de l'agrandissement. Le défilement horizontal doit absolument être évité.
![Copyright : ?fad82 - stock.adobe.com   ;](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_1960666712/image.imageformat.1286.78423224.jpg)
Autoriser les styles personnalisés
D'autres aspects sont diverses possibilités de personnalisation de la présentation. Les contenus doivent être présentés avec des schémas de couleurs, des polices et des familles de caractères, des interlignes, etc. définis par l'utilisateur, bref avec un CSS personnalisé.
![Copyright : Capture d'écran de l'application MétéoSuisse.](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_504583968/image.imageformat.1286.397586940.png)
Flexibilité de la sortie - testée brièvement
- Contr?le visuel : Ctrl + mouse wheel / Ctrl + [[ + / - ]]
- Windows High Contrast Mode (Win HCM) : [[Alt]]. + [[Shift]] + [[PrtScn]]
- Interligne / police de caractères : page externeSignet d'espacement de texte
- CSS personnalisé CSS : page externeExtension du navigateur Stylus
Une entrée flexible
L'exigence de flexibilité des possibilités de sortie doit être complétée par des possibilités d'entrée flexibles.
Tous les composants interactifs des interfaces utilisateur doivent pouvoir être utilisés à la fois par des dispositifs de pointage et par des dispositifs d'entrée série.
![Bandes dessinées : illustration de l'exigence pour les interfaces utilisateur numériques accessibles de pouvoir être utilisées avec différentes méthodes d'entrée. Par exemple, aussi bien avec une souris d'ordinateur qu'avec un clavier.](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_1275536775/image.imageformat.1286.2043365289.png)
La souris d'ordinateur est représentative de tous les dispositifs de pointage tels que les trackpads, les souris à bouche, les joysticks ou les dispositifs d'eye-tracking.
Le clavier, quant à lui, représente une large gamme de dispositifs pour la navigation en série. Ici, l'utilisateur se déplace en série d'un élément interactif à l'autre en appuyant sur une touche (par exemple la touche de tabulation) et en déclenchant l'élément souhaité avec une autre touche (par exemple la touche Entrée/espace). Les dispositifs d'entrée série sont souvent intégrés dans des dispositifs de contr?le de l'environnement con?us sur mesure pour les personnes souffrant de handicaps moteurs graves. (p. ex. tétraplégiques).
![Copyright : ?igorkol_ter - stock.adobe.com](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_1833831351/image.imageformat.1286.361621536.jpg)
Les interfaces utilisateur électroniques devraient toujours être utilisables aussi bien avec des dispositifs de saisie à pointeur qu'avec des dispositifs de saisie sériels.
La navigation sérielle ne peut fonctionner que si la mise au point du clavier est clairement visible à tout moment !
Flexible Input - brièvement testé
- Tous les contenus et composants interactifs peuvent-ils être atteints et utilisés aussi bien avec la souris de l'ordinateur qu'avec le clavier (Tab, Enter, Space, Flèches et Esc) ?
- Est-il possible de savoir à tout moment où se trouve le point focal du clavier ?
- Des modèles d'interaction établis, généralement connus et acceptés sont-ils pris en compte ou existe-t-il des instructions d'action détaillées, y compris pour les entrées en série ?
Modèles d'interaction établis pour les entrées en série : page externePratiques WAI-ARIA - Modèles de conception et widgets
Information, sémantique explicite et feedback
(Compatibilité avec les technologies d'assistance)
![](/bin/ethz/components/previewImage/youtube/M0Db8zIm-pA.jpg)
![Bandes dessinées : représentation illustrative de l'importance des titres significatifs pour les personnes qui dépendent des technologies d'assistance comme les lecteurs d'écran.](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_1898544003/image.imageformat.1286.1412410760.png)
Les exigences les plus pointues en matière de contenus accessibles concernent la compatibilité avec des technologies d'assistance complexes telles que les logiciels de lecteur d'écran et de commande vocale.
Dans les deux cas, toutes les informations et propriétés sémantiques implicites pertinentes doivent être rendues explicites pour que la communication entre les personnes et la machine (par exemple, le lecteur d'écran) soit réussie.
![](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/textimage_212033740/image.imageformat.textsingle.1202266018.jpg)
- Différentes régions ou les zones de l'interface utilisateur, telles que la bannière/l'en-tête, la navigation, le contenu principal ou le pied de page, doivent être nommées de manière explicite. La plupart du temps, en raison des conventions, elles ne sont reconnaissables qu'à l'aide d'indications visuelles/de caractéristiques de conception.
- Il en va de même pour la structure sémantique des contenus textuels. Cela concerne surtout Structures des titres, listes et tableaux.
- Boutons/commutateurs ne doivent pas être reconnaissables en tant que tels sur la seule base de leur conception visuelle. Il en va de même pour les ic?nes.
- Champs de formulaire et les groupes de champs de formulaire doivent être correctement reliés à leurs désignations respectives, afin qu'il soit clair quelles entrées sont attendues et où.
La question de l'information sémantique explicite devient plus difficile dans le contexte d'éléments interactifs scriptés tels que
- Dialogues modaux / fenêtres pop-up
- (Méga) menus déroulants
- Accordéons, listes d'onglets et éléments déroulants simples.
- Carrousels
- Curseurs / barres de défilement
- Infobulles
- et bien d'autres encore.
![Copyright : ?Oleg and Polly - stock.adobe.com](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_321556680/image.imageformat.1286.462248781.jpg)
La règle générale s'applique donc aux contenus web, que le HTML natif est préférable aux composants interactifs avec des scripts.,Dans la mesure du possible. La grande majorité des composants HTML ont une signification sémantique et peuvent être correctement interprétés par les lecteurs d'écran.
Le site WAI-ARIA-La norme W3C permet également d'ajouter des informations sémantiques aux composants commandés par script. Les attributs WAI-ARIA permettent d'expliciter "manuellement" le r?le (de quoi s'agit-il dans un widget ?), les propriétés (par ex. les minimums et les maximums des curseurs) et les états (par ex. la position actuelle du curseur).
Feedback
C'est précisément lors des interactions qu'il est extrêmement important que les changements d'état soient toujours explicitement renvoyés sous forme de feedback et pas seulement visuellement. → Régions ARIA en direct.
Pour conclure, il convient de mentionner que les moteurs de recherche profitent énormément des contenus sémantiques explicites. Il en résulte que : Un contenu accessible est un contenu favorable au référencement..
Semantics - brièvement testé
Tests de lecteur d'écran
- visitez un de nos cours
- Visitez notre Ressources sur les lecteurs d'écran
Le principe des 2 sens
Les images et les contenus multimédias ciblent spécifiquement le canal sensoriel visuel pour les vidéos et les images, et le canal auditif pour les contenus audio et les pistes sonores des vidéos. Aucun de ces formats spécifiques ne peut aujourd'hui être traité de manière fiable et automatisée pour d'autres canaux sensoriels.
![](/bin/ethz/components/previewImage/youtube/cZPg6UGY9qw.jpg)
Images et alternatives de texte
Les images, qu'il s'agisse d'illustrations, de photos, de graphiques, de symboles ou d'ic?nes, transmettent également des informations importantes. Dans tous les cas, il faut indiquer explicitement sous forme de texte (en HTML généralement sous forme d'attribut de texte alternatif : alt="informations transmises") quelles informations les images respectives transmettent aux personnes voyantes.
> Plus d'infos sur l'accessibilité des images et des alternatives textuelles à l'ETH
![Bandes dessinées : présentation illustrative de l'importance des alternatives textuelles pour les représentations purement visuelles destinées aux personnes souffrant de handicaps visuels graves, voire de cécité.](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_643081555/image.imageformat.1286.1126707731.png)
Dans le contexte de l'enseignement supérieur, il convient d'accorder une attention particulière aux représentations scientifiques complexes qui ne se contentent pas de reproduire des éléments individuels, mais représentent également des interactions complexes.
![Illustration complexe du transport axonal dans une cellule de vertébré](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_1675404566/image.imageformat.1286.13880626.jpg)
Audio et vidéo
Il est donc extrêmement important que toute information purement visuelle ou purement auditive soit toujours explicitement préparée pour au moins une autre qualité sensorielle.
Le texte est considéré comme un "joker" et peut être préparé automatiquement pour différentes qualités sensorielles gr?ce aux technologies d'assistance modernes : Auditif et tactile à l'aide de lecteurs d'écran ou directement visuel en tant que texte lisible.
- Le contenu auditif des vidéos doit toujours être proposé sous forme de texte, avec des sous-titres synchronisés.
![Bandes dessinées : représentation illustrative de l'exigence de sous-titres pour les contenus vidéo.](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_1040769231/image.imageformat.1286.1976951059.png)
- Le contenu visuel des vidéos doit toujours être transmis de manière auditive. Soit en tant que partie de la piste sonore "normale", soit en tant que piste sonore supplémentaire avec audiodescription.
![BD : illustration de l'importance de bonnes descriptions de contenus visuels sur les diapositives de présentation, dans la salle de cours ainsi que plus tard dans les enregistrements de cours. S'applique bien s?r aussi aux informations visuelles dans les vidéos d'apprentissage.](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_2057158430/image.imageformat.1286.1896170624.png)
- Les informations transmises dans les fichiers audio doivent également être proposées sous forme de transcription textuelle (transcription textuelle).
Le principe des 2 sens - brièvement testé
Seul un examen visuel par l'homme permet de s'assurer que des alternatives judicieuses sont proposées pour les contenus multimédias. Une attention particulière devrait être accordée à la qualité des sous-titres et des transcriptions de texte.
Il en va de même pour les images. Les textes alternatifs en HTML peuvent être rendus visibles à l'aide d'outils appropriés. PAR EX : page externeBarre d'outils pour développeurs web par Chris Pederick
L'évaluation de la pertinence et de l'adéquation d'une alternative textuelle dans un contexte donné n'est pas triviale. L'Alt-Text-Decision-Tree de la Web Accessibility Initiave (WAI) sert d'aide à la décision pragmatique.
D'autres aspects doivent être pris en compte lors de l'évaluation de présentations scientifiques complexes. Les ressources ci-dessous fournissent des points de repère à cet égard. Il est vivement conseillé de toujours faire vérifier l'exactitude des alternatives textuelles qui en résultent par des experts appropriés.
Couleurs et contrastes
Les exigences en matière d'utilisation des couleurs et des contrastes sont les seuls aspects de l'accessibilité qui limitent, dans une certaine mesure, la créativité visuelle des concepteurs.
![Bandes dessinées : présentation illustrative de l'exigence d'un rapport de contraste minimal entre le texte et l'arrière-plan ainsi que de l'interdiction d'utiliser la couleur comme seule caractéristique pour transmettre des informations.](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_2025079415/image.imageformat.1286.648815308.png)
Les informations ne doivent jamais être transmises exclusivement par des couleurs. Pensez à un système de réservation visuel dans lequel les places libres et les places déjà occupées sont exclusivement signalées par une couleur verte ou rouge. Les daltoniens et autres personnes souffrant d'un handicap visuel ont beaucoup de mal à faire la différence entre les catégories.
![](/de/die-eth-zuerich/lehre/e-accessibility/basics/_jcr_content/par/image_907762347/image.imageformat.1286.1362628194.jpg)
Contrastes
Il va de soi que des exigences minimales en matière de rapport de contraste entre le texte et l'arrière-plan ou entre des composants tels que les champs de formulaire et l'environnement immédiat sont indispensables pour permettre aux personnes souffrant d'un handicap visuel d'utiliser correctement et efficacement les médias électroniques. Des contrastes trop faibles ne peuvent que difficilement être compensés, même par des schémas de couleurs définis par l'utilisateur.
Couleurs et contrastes - brièvement testés
Contr?le visuel : avec un peu de pratique, il est facile de repérer les zones où l'utilisation des couleurs pose problème.
Il existe différents outils pour mesurer les contrastes. Pour vérifier les contrastes minimaux exigés par les WCAG, les suivants sont particulièrement bien adaptés :