- caché : http://www.legalandgeneral.com/
<ul id="nav-extra"
class="hide-all">...
- mis en valeur : http://www.accessimairies.net/ ou http://www.anysurfer.be/
CSS si caché
.hidden
{position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;}
Éviter "display: none" ou" visibility: hidden" : blog.alsacreations.com/
Liens généraux sur
accessibilité du menu déroulant>
blog-accessibilite.com/
onlinetools.org/
Navigation
principale avec images et js mais qui fonctionne sans
http://www.legalandgeneral.com/
(id="navigation")
<map name="testmap">
<area shape="poly"
coords="38,55,4,65,49,111,77,73"
href="#" alt="Bretagne"
/>
<area shape="poly"
coords="63,33,69,66,117,81,104,45"
href="#" alt="Basse normandie"
/>
...// penser à un ordre logique pour
synthèse vocale
</map>
http://www.camo.qc.ca/documentation/decembre2006.php
Exemples
(AccessiWeb)
Le contenu de
l'attribut "title" permet d'apporter des informations
supplémentaires, par rapport à
l'intitulé du lien
<p>BrailleNet organise des
séminaires techniques pour l'année
2006. <a href="..." title="Pour connaître les prochaines dates
de séminaires et les thèmes abordés">Cliquer
ici</a>
pour connaître les prochaines dates et les thèmes
abordés.</p>
Ouverture d'une nouvelle fenêtre signalée dans l'attribut "title"
<a href="aide.asp"
onclick="
return OpenWindowByTarget(this.target,this.href,500,600,0,0)"
target="aide"
title="Aide (nouvelle fenêtre)">Aide</a>
CSS pseudo class a:focus
a:hover, a:focus, a:active
{
color: #FFF;
background-color: #525250;
text-decoration: none;
}
Attribut "accesskey" = raccourcis clavier pour les liens importants
Voir ex. menu d'évitement ci-dessus.
L’attribut "accesskey" peut être affecté aux balises <a>, <area>, <button>, <input>, <label>, <legend>, et <textarea>.
"accesskey" n'est pas signalé clairement par les divers navigateurs : en informer l'internaute (attribut "title" du lien, libellé du menu et/ou page d’aide).
Exemples de sites
- http://www.votre-hotel.com/index.htm
-
http://www.cisame.coop/Accessibilite.html
Risques de conflits avec d'autres raccourcis du navigateur
voir :
Accesskey, l'essai non transformé de l'accessibilité
Tabindex...
Accessibilité et ergonomie, penser la navigation d'un site (sur
pompage.net)
Accessibilité
: Comment mettre en forme les liens de son site ?
Prise en compte des déficiences visuelles
http://www.pompage.net/pompe/mauvaisevue/
Paramètrage page (zoom, switcher CSS, ...)
http://www.themaninblue.com/
http://www.anysurfer.be/fr
http://www.tjkdesign.com/
Logiciel Confort de lecture en GPL?) (mais demande
installation sur serveur)
http://www.confortdelecture.org/
CSS
Design élastique mais limité en largeur par CSS
#page { max-width: 1024px; ... }suppose hack
pour IE 5 et 6 :
les
syntaxes de commentaires conditionnels pour IEWindows
<!--[if IE
6]>
<link rel="stylesheet" type="text/css"
href="squelettes-test/nouveau/ie-nouveau.css" />
<![endif]-->
Couleurs et contrastes :
pour-voir-la-vie-en-gris-ou-en-couleur
Color
Contrast Anlyser
http://www.visionaustralia.org.au/info.aspx?page=961
Penser aux daltoniens :
http://www.vischeck.com/daltonize/
http://daltonien.free.fr/
Contraste
et lisibilité
Tester la lisibilité d'un texte
→ Tutoriel vidéo n°5 : Des formulaires accessibles
Fiche accessibilité des formulaires (dossier ressources)
Fiche accessibilité des tableaux (dossier ressources)
Alt vide pour le images décoratives
<img src="'space.gif" alt="" />
Mais :
<a href="next.html"><img
src="fleche_droite.gif"
alt="page suivante" /></a>
Titre en image :
http://joeclark.org/book/sashay/serialization/Chapter06.html
(en)
pour
le titre en image mais aussi pour le contenu de l'article
<img src="..." alt="plan d'accès à nos bureaux
depuis le métro "Bougaiville"" longdesc="acces.html">
Solution de substitution à longdesc : description de l'image immédiatement après l'image ou lien « D » (pour Description) après la balise image, voir openweb.eu.org
Extension longdesc pour Firefox: https://addons.mozilla.org/fr/firefox/addon/273
→ Clavier
virtuel accessible (développé par Urbilog)
pour
bnpparibas.net/banque/portail/particulier/
S'identifier à l'aide :
- d'une
grille contrastée et agrandie
- ou d'un
accompagnement vocal
→ chart.apis.google.com/
(en)
Generating
charts from accessible data tables and vice versa using the Google
Charts API
Voir la démo :
http://icant.co.uk/sandbox/datatable-to-chart/index.html
(en)
<a
href>="http://visites.legrandchalon.fr/fontaines.html"
onclick"window.open(this.href,'new',
directories=yes,menubar=yes,
resizable=yes,scrollbars=yes,
status=yes,
width=632,height=662,left=0,top=0');
return false;"
title>=>"Site des visites panoramiques de
Fontaines [nouvelle fenêtre]">
visite panoramique</a>
Si le href est renseigné le lien est actif js
désactivé
Une fenêtre
"accessible" doit être redimensionnable et avoir des barres
de
défilement
Toujours signaler l'ouverture d'une nouvelle fenêtre (tile ou dans le
texte)
Proposer des alternatives avec NOSCRIPT
<select name="liste" onchange="
window.open(this.options[this.selectedindex].value,'_top')">
<option
value="http://www.voirplus.net">voirplus.net</option>
<option
value="http://www.urbilog.fr">urbilog.fr</option>
<option
value="http://www.yahoo.fr">yahoo.fr</option>
</select>
<noscript>
liste déroulante inactive. Voici les
liens se trouvant dans la
liste déroulante<br>
<a
href="http://www.voirplus.net">voirplus.net</a><br>
<a href="http://
www.urbilog.fr">urbilog.fr </a><br>
<a
href="http://www.yahoo.fr">yahoo.fr</a><br>
</noscript>
Javascripts courants
Exemple sur fairytells.net (blog d'un spécialiste de l'accessibilité) : si le visiteur ne dispose pas du plugin Flash le navigateur affiche le contenu alternatif inclus dans <object>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="..." width="300" height="120">
<param name="movie" value="mon.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<!--[if !IE]> <-->
<object data="mon.swf" width="300" height="120"
type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value="http://www.macromedia.com/go/
getflashplayer">
<!--> <![endif]-->
<div
style="width:300px; height: 120px; overflow:auto">
Vous allez mettre votre
alternative ici, cela peut être du texte,
des images avec
alternative textuelles, des liens, etc
</div>
<!--[if !IE]> <-->
</object>
<!--> <![endif]-->
</object>
N.B. <embed> (code généré par l'export Flash) est obsolète au sens W3C
→ http://ncam.wgbh.org/webaccess/ccforflash/index.html
Transcription textuelle
Université de Nice...
Interview de Tim Berners-Lee
Présentation dans la page
Spots en SMIL + real avec sous titre et audio description sur le site
handicap.gouv.fr
Un exemple donné lors des conférence
ParisWeb 2007
Copie d'écran (dossier ressources)
Divers exemples de sites proposant des vidéos accessibles
Soustitre / traduction
http://www.maitre-eolas.fr/2008/03/05/891-autoderision
http://www.hanploi.com/demonstration/
: texte + vidéo langue des signes
Realplayer (copie d'écran) http://www.rockmywebsite.nl/2/toolbar/audiobeschrijving.aspx
http://ncam.wgbh.org/richmedia/media/lionking/
Example:
Captioned video of a performance with audio description
(Universié du Texas)
Mais encore
WAI Video: Web Sites That Work!
-
Conseils
sur pour une page d'aide sur les formats audio-vidéo sur un
site public canadien
- Présentation d'un atelier accessibilité et vidéo organisé par
AccessiWeb
http://palaci.fr/accessiweb/20050620-accessibilite-video/
- SMIL (Synchronized Multimedia Integration Language)
http://fr.wikipedia.org/wiki/SMIL
- NCAM
Welcome to the Rich Media
Accessibility Web site, a growing collection of resources for
developers and users interested in ways to make rich media accessible
to people with disabilities. If you are interested in seeing what is
possible, check out the examples
area. To browse resources by media type or access strategy,
visit the developer
area.