User Tools

Site Tools


2013_2014:s1:docweb:accessibilite:start

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
2013_2014:s1:docweb:accessibilite:start [2013/07/27 10:02]
blay [Évaluer l’accessibilité d’un site web]
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 19: Line 23:
  
 <note warning>​Tanleau et accessibilité p 140, resumé et caption</​note>​ <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 à ===== ===== Je sais répondre à =====
    
Line 25: Line 70:
   * Quelle est la différence entre résumé et caption ?   * Quelle est la différence entre résumé et caption ?
 </​box>​ </​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:​empty pour 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 E E 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?​
 +
  
  
2013_2014/s1/docweb/accessibilite/start.1374912143.txt.gz · Last modified: 2013/07/27 10:02 by blay