Differences

This shows you the differences between two versions of the page.

--- 2013_2014:s1:docweb:accessibilite:start [2013/07/29 17:52] – [Introduction à l'accessibilité du web] blay
+++ 2013_2014:s1:docweb:accessibilite:start [2013/09/24 08:22] (current) – [A gérer] blay
@@ Line 10: / Line 10: @@
 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 =====
 http://www.pompage.net/traduction/evaluer-accessibilite-site-1
@@ Line 20: / Line 23: @@
 <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 à =====
@@ Line 26: / Line 70: @@
   * 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?