ÿþ<?xml version="1.0" encoding="utf-16"?> <!DOCTYPE html> <html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Accessibilité vue d'un navigateur</title> <style><![CDATA[ ul li {list-style-type: none} @media projection { #W3Clogo { position: fixed; bottom: 1em; left: 1em; border: 0px solid } div,h1 { margin: 0.5 em} dt { line-height: 130% ; font-size:120% ; font-weight: bold } li { line-height: 150% } h1 { font-size: 170% } #first, #last, h1 { text-align:center} .slide { page-break-before:always ; padding: .5em 3em ; background: url('operas.svg') #fff; height:100% } #last { text-align: center ; font-size: 1.5 em } #first { page-break-before:avoid } #every { background: url('operae.svg') } #apps { background: url('operaw.svg') } #world { background: url('offices.svg') } } @media projection and (min-device-height: 450px) { body {font-size:20px} .slide {height:400px } } @media projection and (min-device-height: 600px) { body {font-size:30px} .slide {height:550px } } @media projection and (min-device-height: 800px) { body {font-size:40px} .slide {height:750px } } @media projection and (min-device-height: 760px) { body {font-size:38px} .slide {height:730px } } @media projection and (min-device-height: 900px) { body {font-size:45px} .slide {height:850px } } @media projection and (min-device-height:1000px) { body {font-size:50px} .slide {height:950px } } @media handheld { * { margin: 2 px; padding: 2px } .slide {margin-bottom:1em; border: 1px black solid; background:url('operalittle.png')} #first,#W3Clogo {display:none} title {display:block} .fd {display:none}} ]]> </style> </head> <body> <div class="slide" id="first"> <h1>Accessibilité vue d'un Navigateur</h1> <h3>Charles McCathieNevile<br/> Standards, Opera</h3> <h2>chaals@opera.com</h2> <h3>La meileure experience internet</h3> <h3>Pour tout le monde, naturellement</h3> <a href="http://www.w3.org/"><img id="W3Clogo" alt="W3C Member" src="w3cmember.png"/></a> </div> <div class="slide"> <h1>Pour quoi?</h1> <h2>Parce que c'est important</h2> <p>Ou on peut communiquer, ou il y a un problème.</p> <p>(Plein de gens ont écrit sur ce thème, et je ne vais pas le suivre aujourd'hui)</p> </div> <!-- slide template <div class="slide"> <h1>@@</h1> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> --> <div class="slide"> <h1>C'est quoi accessibilité?</h1> <p>Acces pour tous, en dépit des disabilités</p> <ul> <li>Les aveugles</li> <li>Les gens paralysées</li></ul> <h3>Mais aussi</h3> <ul> <li>Ceux qui voyent pas bien (moi!)</li> <li>ou ont des problèmes pour lire</li> <li>ou se concentrer, ou écouter, ou...</li> </ul> </div> <div class="slide"> <h1>Solutions anciennes</h1> <dl> <dt>Elements, attributs pour l'accessibilité</dt> <dd>La permettent, pas forcement l'assurent</dd> <dt>Configurabilité, controle clavier</dt> <dd>Pas pour tous, mais indispensable</dd> <dt>Magnification, changement des styles</dt> <dt>Versions specifiques / adaptation "live"</dt> <dd>Pas facile à tout faire... (LSF? Auslan?)</dd> <dt>Les aides techniques</dt> </dl> </div> <div class="slide"> <h1>Elements, attributs, HTML4</h1> <dl> <dt><code>alt="index-moi, google"</code></dt> <dd>Abusé, mais simple et compris maintenant</dd> <dt><code>longdesc="quelque.htm"</code></dt> <dd>Mal compris, implantations pires</dd> <dt><code>accesskey="s"</code></dt> <dd>Assez bien (si peu) utilisé, implantations nulles</dd> </dl> </div> <div class="slide"> <h1>En HTML 5</h1> <dl> <dt><code>figure</code>,<code>datagrid</code> et cie</dt> <dd>Selon l'implantation, peuvent améliorer</dd> <dt><code>input type="date"</code> <input type="date" style="font=size:40px"/> et cie</dt> <dd>Remplacera pas mal de javascript</dd> <dt>Principle de "metadonnées visible"</dt> <dd>Depend des necessités des auteurs</dd> </dl> <p>HTML 5 est actuallement en developpement.<br/>L'accessibilité n'est pas l'expertise de WHAT-WG<br/>...donc il faudra changer des choses</p> </div> <div class="slide"> <h1>Les autres...</h1> <dl> <dt>Configurabilité</dt> <dd>Comment expliquer a l'utilisateur?</dd> <dd>Une version par defaut, ou plusiers?</dd> <dt>Controle clavier</dt> <dd>Combien de fonctionalités?</dd> <dt>Magnification?</dt> <dd>Enfin, ca commence a paraître partout</dd> <dt>Changer les styles</dt> <dd>Préférences par site? Pour partager?</dd> </dl> </div> <div class="slide"> <h1>Les "aides techniques"</h1> <ul> <li>Système de voix</li> <li>Styles adaptés</li> <li>Outils d'input</li> <li>Lecteurs d'ècran</li> </ul> <p>Compatibilité du navigateur est important</p> </div> <div class="slide"> <h1>Lectuers d'écran</h1> <p>Opera vient de refaire</p> <ul> <li>Cassé dans dévéloppement de portabilité</li> <li>Faut faire sur chaque platform<br/> - et parfois plusiers fois :( )</li> <li>Les APIs d'accessibilité sont clés</li> <li>Sur Windows, il faut s'adapter à chacun</li> </ul> <p>Pas mal de travail, pour peu de marché :(</p> </div> <div class="slide"> <h1>ARIA et Web 2.0 ...</h1> <ul> <li>ARIA est conçu pour Web 2.0</li> <li>Dévéloppé avec XHTML 2</li> <li>Maintenant on le met partout</li> <li>Toujours en dévéloppement</li> <li>Implantations en Opera, Firefox</li> <li>Utilisé par des grandes boites:<br/> Google, AOL, SAP, IBM, ...</li> </ul> </div> <div class="slide"> <h1>ARIA: l'idée</h1> <h2>Tagging</h2> <ul> <li>Attributs XML pour expliquer:<ul> <li>Fonction</li> <li>état</li></ul></li> <li>Liés avec les controles du système</li> <li>Donc fonctionne sans changer les A.T.</li> <li>On peut utiliser avec SVG, XHTML2, etc</li> <li>En flux, pour incluire en HTML 5</li> </ul> </div> <div class="slide"> <h1>ARIA: Implantation</h1> <ol> <li>Reconnaitre les attributs</li> <li>Passer à l'API</li> <li>Incluire dans la navigation</li> <li>Attacher aux controles</li> </ol> <p>Ce n'est pas facile, mais c'est robuste</p> </div> <div class="slide"> <h1>ARIA avec SVG</h1> <ul> <li>SVG offre graphiques riches et interactives</li> <li>... mais sans avoir des controles natives</li> <li>On peut y utiliser ARIA</li> <li>Donc richesse visuelle, et accessibilité</li> </ul> </div> <div class="slide"> <h1>ARIA et HTML 5</h1> <ul> <li>Plusiers chose en les deux</li> <li>L'innovation n'a pas arretée</li> <li>Problème des namespaces</li> <li>Permet d'utiliser browser.js etc</li> </ul> </div> <div class="slide" id="last"> <h1>Merci</h1> <h3>Il n'y a pas de questions idiotes<br/>mais les idiots ne posent pas de question</h3> <p>chaals@opera.com</p> <h2>http://dev.opera.com</h2> <h2>http://labs.opera.com</h2> </div> </body></html>