Upgrade to Pro — share decks privately, control downloads, hide ads and more …

L'accessibilité, c'est simple : revoyons les ba...

L'accessibilité, c'est simple : revoyons les bases – ConFoo 2017

Bon d'accord, l'accessibilité ce n'est pas toujours simple. Il existe beaucoup de cas particuliers et de détails à régler. Mais en pratique il existe beaucoup de choses simples à mettre en œuvre qui ne demande pas beaucoup de temps.
Petite séance de rattrapage sur les basiques de l'accessibilité Web à destination des développeurs qui, parfois, doivent mettre le nez dans le HTML et le JavaScript pour rendre le Web meilleur.

Conférence donnée dans le cadre de ConFoo 2017, à Montréal, le jeudi 9 mars 2017.

Cette présentation est mise à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.

Damien Senger

March 09, 2017
Tweet

More Decks by Damien Senger

Other Decks in Programming

Transcript

  1. Œuvrer pour l’accessibilité, ce n’est pas une lutte contre le

    handicap.
 
 C'est assurer la diversité du web.
  2. Un pôle autour de la parole. Non verbaux Extinction
 de

    voix Accent ou
 non natif Icônes Microsoft
  3. Un pôle autour de la compréhension. Autisme Maîtrise partielle
 de

    la langue Contexte
 stressant Icônes Microsoft
  4. < !!!<!-- Image décorative sans corrélation avec le contenu !!-->

    <img src="img/example.png" alt=""> !!!<!-- Image apportant une information par rapport au contenu global !!--> <img src="img/example.png" alt="Un chat sur une table">
  5. < !!!<!-- Quand on désire une vraie légende —> <figure>

    <img src="example.png" alt="Un chat sur une table"> <img src="example2.png" alt="Un chat sur une chaise"> <figcaption>Légende!</figcaption> !</figure>
  6. < <section aria-label=“Titre de la section”> <p>Texte d’introduction de cet

    exemple!</p> <p>Blabla sans importance!</p> !</section>
  7. < <p> Il était l’histoire d’un petit <i class=“icon-cat” aria-hidden=“true”

    
 title=“chat”>!</i> <span class=“sr-only”>chat!</span> qui aimait le lait. !</p>
  8. < <p> Il était l’histoire d’un petit <i class=“ico-cat” title=“chat”

    aria-label=“chat”>!</i> qui aimait le lait. !</p>
  9. < !// Exemple ici de la classe SR only de

    Bootstrap .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  10. Pensez aussi à toujours regarder
 du côté de tous les

    standards…
 comme Unicode également !
  11. < <p> Il était l’histoire d’un petit qui aimait le

    lait. !</p> !!!<!-- ou !!--> <p> Il était l’histoire d’un petit 
 <span aria-label=“chat”>!</span> 
 qui aimait le lait. !</p>
  12. Lorsque vous créez vos 
 polices d’icônes, faites donc attention

    à la signification 
 originale du caractère choisi
  13. < !!!<!-- En utilisant le caractère Unicode !!--> Le coureur

    nº10. !!!<!-- Seulement il n’est pas toujours disponible dans la police de caractère !!--> Le coureur n<sup>o!</sup>10. !!!<!-- Et puis nº, est-ce compris par tou·te·s ? !!--> Le coureur <abbr title=“numéro”>n<sup>o!</sup>!</abbr>10. !!!<!-- Et on termine avec la lecture au SR !!--> Le coureur <abbr title=“numéro” 
 aria-label=“numéro”>n<sup>o!</sup>!</abbr>10.
  14. < !!!<!-- Parce que tout le monde ne connait pas

    le NYPD —> <abbr title=“New York Police District”>NYPD!</abbr> !!!<!-- Et qu’en plus, avec l’accent c’est mieux !!--> Une enquête rondement menée par le <abbr title=“New York Police District” lang=“en”>NYPD!</abbr>.
  15. < !!!<!-- Selon les préconisations quand l’épicène n’est pas possible

    dans un contexte !!--> Lisible de tou·te·s. !!!<!-- Cette graphie est lue par les lecteurs d’écrans !!--> Lisible de tout point médian thé point médian S !!!<!-- La lecture devant en être faite d’après le haut conseil à l’égalité français est !!--> Lisible de toutes et de tous. !!!<!-- Comment le faire lire correctement !!--> Lisible de 
 <span aria-label=“toutes et tous”>tou·te·s!</span>.