« Accessibiliser » avec subtilité

Paris Web 2013 (Webdesign - Qualité - Accessibilité).

« Accessibiliser » avec subtilité

Parcours pro'

  • Développeur front-end
  • Dév front-end & référent qualité web
  • Consultant accessibilité numérique chez Atalan
  • Passionné et en constante veille

Table des matières

Table des matières

Naaaan,.. j'plaisante !

P'tites astuces d'intégration

Soulignement des liens

Le classique text-decoration

Lorsque des liens sont intégrés dans les contenus, ils doivent être différenciés visuellement du texte qui les entoure, par exemple en les soulignant.

L'astucieux border-bottom

Lorsque des liens sont intégrés dans les contenus, ils doivent être différenciés visuellement du texte qui les entoure, par exemple en les soulignant.

L'astucieux et « élégant » border-bottom

Lorsque des liens sont intégrés dans les contenus, ils doivent être différenciés visuellement du texte qui les entoure, par exemple en les soulignant.

Visibilité de la prise de focus

L'outline supprimé

Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus.

L'outline conservé

Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus.

Le :hover doublé

Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus.

Le :focus accentué

Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus.

Visibilité de la prise de focus

L'outline supprimé

Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus.

L'outline conservé

Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus.

Le :hover doublé

Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus.

Le :focus accentué

Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus.

! button::-moz-focus-inner {border: 0;}

Aller au contenu

Lien d'évitement ordinaire

Un lien d'évitement du type "Aller au contenu" doit systématiquement être présent sur chaque page afin de faciliter la navigation au clavier.

Ce lien doit être le premier élément interactif dans le code HTML.

Il s'agit d'un lien vers une ancre qui doit permettre un accès direct au contenu principal de la page.

Aller au contenu

Lien d'évitement masqué

Bien qu'il soit recommandé d'afficher ce lien, il peut être masqué par défaut.
En revanche, il doit dans tous les cas être rendu visible à la prise de focus au clavier.

Le lien d'évitement ne doit jamais être masqué à l'aide des propriétés CSS display: none; et/ou visibility: hidden; sous peine de le rendre totalement inatteignable au clavier.

Aller au contenu

Lien d'évitement persistent

Bien qu'il soit recommandé d'afficher ce lien, il peut être masqué par défaut.
En revanche, il doit dans tous les cas être rendu visible à la prise de focus au clavier.

Le lien d'évitement ne doit jamais être masqué à l'aide des propriétés CSS display: none; et/ou visibility: hidden; sous peine de le rendre totalement inatteignable au clavier.

Aller au menu Aller au contenu

Lien d'évitement astucieux

Bien qu'il soit recommandé d'afficher ce lien, il peut être masqué par défaut.
En revanche, il doit dans tous les cas être rendu visible à la prise de focus au clavier.

Le lien d'évitement ne doit jamais être masqué à l'aide des propriétés CSS display: none; et/ou visibility: hidden; sous peine de le rendre totalement inatteignable au clavier.

3 liens vers 1 même destination

Paris Web 2013

Paris web 2013.

Paris Web, la conférence francophone des gens qui font le web, a lieu du 10 au 12 octobre 2013.

Lire la suite

Paris Web 2012

Paris web 2012.

Paris Web, la conférence francophone des gens qui font le web, a eu lieu du 18 au 20 octobre 2012.

Lire la suite

3 liens vers 1 même destination

Paris Web 2013

Paris web 2013.

Paris Web, la conférence francophone des gens qui font le web, a lieu du 10 au 12 octobre 2013.

Lire la suite

Paris Web 2012

Paris web 2012.

Paris Web, la conférence francophone des gens qui font le web, a eu lieu du 18 au 20 octobre 2012.

Lire la suite

TAB clavier x 3

Booster la nav' clavier avec tabindex="-1"

Paris Web 2013

Paris web 2013.

Paris Web, la conférence francophone des gens qui font le web, a lieu du 10 au 12 octobre 2013.

Lire la suite

Paris Web 2012

Paris web 2012.

Paris Web, la conférence francophone des gens qui font le web, a eu lieu du 18 au 20 octobre 2012.

Lire la suite

Booster la nav' clavier avec tabindex="-1"

Paris Web 2013

Paris web 2013.

Paris Web, la conférence francophone des gens qui font le web, a lieu du 10 au 12 octobre 2013.

Lire la suite

Paris Web 2012

Paris web 2012.

Paris Web, la conférence francophone des gens qui font le web, a eu lieu du 18 au 20 octobre 2012.

Lire la suite

« Taire » avec aria-hidden="true"

Paris Web 2013

Paris Web, la conférence francophone des gens qui font le web, a lieu du 10 au 12 octobre 2013.

Paris Web 2012

Paris Web, la conférence francophone des gens qui font le web, a eu lieu du 18 au 20 octobre 2012.

« Taire » avec aria-hidden="true"

Paris Web 2013

Paris Web, la conférence francophone des gens qui font le web, a lieu du 10 au 12 octobre 2013.

Paris Web 2012

Paris Web, la conférence francophone des gens qui font le web, a eu lieu du 18 au 20 octobre 2012.

Aller au contenu

Tirer parti du Responsive

Le RWD RWD (Responsive Web Design) est une notion de conception de sites web qui regroupe différents principes et technologies dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation.

Le RWD sur Wikipédia (nouvelle fenêtre) (nouvelle fenêtre)

Démo d'une page responsive (ZIP - 1,2 Mo)

À vous de jouer !

Merci !

Paris Web 2013 (Webdesign - Qualité - Accessibilité).