Télécharger pour lire hors ligne
Téléchargé parInés Laitano
Création de contenus accessibles
Le document présente des directives pour créer des contenus accessibles, en soulignant l'importance des alternatives textuelles pour les images, la structuration des pages avec des titres et des étiquettes, ainsi que la fonction des liens et leur contexte. Il fournit également des exemples concrets d'équivalents textuels pour différents types d'images, ainsi que des recommandations pour l'organisation du contenu. En outre, il aborde la langue par défaut des pages web et l'importance de la présentation visuelle.
Création de contenus accessibles
- 1. Création de contenus accessibles MaríaInés LAITANO mariaines.laitano@univ-paris13.fr 1
- 2. Plan 1. Décrire lebut des images en utilisant des alternatives textuelles 2. Créer des liens compréhensibles 3. Structurer la page (titres, étiquettes et autres relations) 4. Présenter visuellement le texte (couleurs, taille, interlignage, etc.) 2
- 3. 1.1.1 Contenu nontextuel Tout contenu non-textuel présenté à l'utilisateur a un équivalent textuel qui remplit une fonction équivalente sauf dans les situations suivantes : • Composant d'interface ou de saisie • Média temporel • Test • Contenu sensoriel • Décoration, formatage, invisibilité • CAPTCHA 3
- 4. Quel équivalent textuelpour une image fonctionnelle ? <a href=“http://www.frro.utn.edu.ar/”> <img src="logo.png" alt=“Page d’accueil de l’Université Paris 13”/> </a> 4
- 5. Quel équivalent textuelpour une image informative? <a href=“brochure.pdf”> <img src="pdf.jpg" alt=“Téléchargement PDF"/> Brochure du Master Design d’interface multimedia et internet </a> 5
- 6. Quel équivalent textuelpour une image décorative ? <div> <img src=“etudiants.png" alt=“”/> Un coup de pouce pour vos études en Master ? </div> 6
- 7. <img src=“schema.jpg" alt=“Schéma desformations" longdesc=“schema-formations.html" /> <a href="schema-formations.html">Description du schéma</a> Autres solutions possibles 8 Quel équivalent textuel pour une image complexe ? Recommandations pour décrire des graphiques
- 8. 2.4.4 Fonction dulien La fonction de chaque lien est déterminée par le texte du lien seul ou par le texte du lien associé à un contexte du lien déterminé par un programme informatique, sauf si la fonction du lien est ambiguë pour tout utilisateur. 11
- 9. Quel texte pource lien ? 12
- 10. Quel est lecontexte des liens CANDIDATEZ ? 13
- 11. 2.4.10 Titres desection Les titres de section sont utilisés pour organiser le contenu. 14
- 12. 2.4.6 Titres etétiquettes Les en-têtes et les étiquettes décrivent le sujet ou le but. <h1> Préparation aux catastrophes </ h1> <h2> Préparation aux inondations </ h2> <h2> Préparation au feu </ h2> 15
- 13. 1.3.2 Ordre séquentiellogique Lorsque l'ordre de présentation du contenu affecte sa signification, un ordre de lecture correct peut être déterminé par un programme informatique. 16 R É G I M E E X P R E S S Petit déj. Déjeuner Dîner Lundi Thé ou café Escalope de veau Salade thon 2 tartines Concombre râpé Fromage frais beurre allégé Gelée de fruits Brugnon Mardi Thé ou café Filet de rouget Pâtes 2 pains suédois Salade de tomate Tomme allégée fromage fondu Yaourt nature Cerises
- 14. 1.3.1 Information etrelations L'information, la structure et les relations véhiculées par la présentation peuvent être déterminées par un programme informatique ou sont disponibles sous forme de texte. 17
- 15. Quel élément HTMLpour cette liste ? 1. Faire cuire les courgettes sans enlever la peau. 2. Battre les six œufs en omelette. 3. Mixer les courgettes cuites. 4. Mélanger les courgettes, les œufs et la crème fraîche. 5. Mettre dans des ramequins. 6. Faire cuire 30 mn au four. <ol> <li>Faire cuire les courgettes sans enlever la peau. </li> <li>Battre les six œufs en omelette. </li> <li>Mixer les courgettes cuites. </li> <li>Mélanger les courgettes, les œufs et la crème fraîche. </li> <li>Mettre dans des ramequins. </li> <li>Faire cuire 30 mn au four. </li> </ol> 19
- 16. 3.1.1 Langue dela page La langue par défaut de chaque page Web peut être déterminée par un programme informatique. <html lang=”fr”> 21