This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
2013_2014:s1:docweb:accessibilite:start [2013/07/24 09:25] blay created |
2013_2014:s1:docweb:accessibilite:start [2013/09/24 10:22] (current) blay [A gérer] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Introduction à l'accessibilité du web ====== | ====== Introduction à l'accessibilité du web ====== | ||
+ | http://references.modernisation.gouv.fr/rgaa-accessibilite | ||
+ | |||
Beaucoup de ressources. Prenez le temps de lire : | Beaucoup de ressources. Prenez le temps de lire : | ||
Line 8: | Line 10: | ||
http://www.siteduzero.com/informatique/tutoriels/l-accessibilite-web | http://www.siteduzero.com/informatique/tutoriels/l-accessibilite-web | ||
+ | ===== Outils pour l'accessibilité ===== | ||
+ | http://www.w3.org/WAI/RC/tools/complete | ||
+ | http://usabilitygeek.com/10-free-web-based-web-site-accessibility-evaluation-tools/ | ||
===== Évaluer l’accessibilité d’un site web ===== | ===== Évaluer l’accessibilité d’un site web ===== | ||
http://www.pompage.net/traduction/evaluer-accessibilite-site-1 | http://www.pompage.net/traduction/evaluer-accessibilite-site-1 | ||
Line 16: | Line 20: | ||
http://www.pompage.net/traduction/evaluer-accessibilite-site-3 | http://www.pompage.net/traduction/evaluer-accessibilite-site-3 | ||
+ | |||
+ | |||
+ | <note warning>Tanleau et accessibilité p 140, resumé et caption</note> | ||
+ | |||
+ | ===== A gérer ===== | ||
+ | |||
+ | |||
+ | Lorsqu'une personne utilise une synthèse vocale, elle n'entend que le texte et navigue en utilisant la structure. | ||
+ | Vous pouvez avoir une idée du rendu de votre page pour elle en utilisant le plugin firefox suivant ; http://www.standards-schmandards.com/projects/fangs/ | ||
+ | |||
+ | |||
+ | Certains navigateurs ne sont pas graphiques et lisent par exemple les pages à haute voix ou n'affichent que le texte sans les images. | ||
+ | |||
+ | <fc #FF0000>Tester ...</fc> | ||
+ | jj | ||
+ | |||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|Question : > | ||
+ | tester avec ... | ||
+ | </box> | ||
+ | |||
+ | |||
+ | http://browsershots.org/ | ||
+ | |||
+ | |||
+ | |||
+ | Les couleurs | ||
+ | |||
+ | http://gmazzocato.altervista.org/fr/colorwheel/wheel.php | ||
+ | |||
+ | <box round rgb(185,211,238) rgb(220,226,255) 95%|Exercice : Tester les contrastes de couleurs > | ||
+ | tester avec ...http://gmazzocato.altervista.org/fr/colorwheel/wheel.php | ||
+ | |||
+ | http://www.checkmycolours.com/ | ||
+ | |||
+ | Il existe bcp d'autres outils sur le web... (http://www.webaccessibilite.fr/liens-utiles-accessibilite-outils-de-test-et-de-verification.php#liens_1) | ||
+ | </box> | ||
+ | |||
+ | Séparation entre contenu et présentation | ||
+ | |||
+ | http://www.delorie.com/web/lynxview.html | ||
+ | |||
+ | |||
+ | Standard et navigateurs | ||
+ | |||
+ | ===== Je sais répondre à ===== | ||
+ | |||
+ | <box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à : > | ||
+ | * Pourquoi les mises en page avec des tableaux sont déconseillées? | ||
+ | * Quelle est la différence entre résumé et caption ? | ||
+ | </box> | ||
+ | |||
+ | <note warning> | ||
+ | Voir page 140 l'accessibilité des tableaux | ||
+ | </note> | ||
+ | |||
+ | |||
+ | ===== Du début à la fin ===== | ||
+ | <note warning>Voir si on touche ou non aux 2 derniers chapitres du livre p 403</note> | ||
+ | |||
+ | |||
+ | <note> TODO | ||
+ | Nouveautés CSS3 | ||
+ | http://www.w3.org/TR/css3-selectors/ | ||
+ | http://www.w3.org/TR/selectors4/ | ||
+ | |||
+ | |||
+ | En particulier | ||
+ | :nth-child() pseudo-class | ||
+ | Le :nth-child(an+b) pseudo-class represente un element qui a an+b-1 frère avant lui | ||
+ | Mots clefs : odd / even (impair / pair) | ||
+ | tr:nth-child(2n+1) /* ligne impaire d’un tableau*/ | ||
+ | tr:nth-child(odd) /* idem*/ | ||
+ | |||
+ | E:last-of-type / E:first-of-type | ||
+ | tr > td:last-of-type : le dernier td d’une ligne (il peut y avoir des th après) | ||
+ | E:emptypour les balises vides (<p></p>) | ||
+ | E:not(s) un élément E qui ne vérifie pas un sélecteur simple s | ||
+ | Un sélecteur simple est un sélecteur de type (balise html) , sélecteur *, sélecteur sur les attributs, sélecteur de classe (.), sélecteur #, ou une pseudo-classe. | ||
+ | |||
+ | E ~ F Un élément F précédé par un élement EE et F ont le même parent | ||
+ | |||
+ | |||
+ | </note> | ||
+ | |||
+ | ===== Plusieurs feuilles de style ===== | ||
+ | |||
+ | Certaines visualisations d'une page web comme des images en arrière plan ou des couleurs nuisent à la version imprimée, surtout lorsqu'elle contient beaucoup d'information. | ||
+ | <note warning>Voir page 257</note> | ||
+ | |||
+ | Voir le code source de | ||
+ | view-source:http://www.iut.unice.fr/formations/departement/id/5_informatique-site-de-nice | ||
+ | ===== Stratégies de mise en page ===== | ||
+ | <note warning>VOIR PAGE 311 : peut faire l'objet d'un seul TD peut etre avec ce qui précéde et avant accessibilité qui servira a faire la synthèse</note> | ||
+ | |||
+ | ==== Dimensionnement d'une page web ==== | ||
+ | |||
+ | * Afficher la page web [[http://www.w3.org/MarkUp/]] dans votre navigateur. | ||
+ | * Agrandissez la page, rapetissez la au maximum. Comment se comporte l'affichage? | ||
+ | * Afficher la page web [[http://www.sncf.com/]] dans votre navigateur. | ||
+ | * Agrandissez la page, rapetissez la au maximum. Comment se comporte l'affichage? | ||
+ | |||
+ | |||
+ |