Le numérique Responsable
# L'accessibilité numérique
![C'est juste la photo de mon profil](https://fr.gravatar.com/userimage/38240130/6ec4fada455b1d6128660c401c40acc6.jpg?size=500)
@doc_roms
#A11Y
Pourquoi ? ->
#A11Y
A CCESSIBILIT Y
11 (Lettres)
A CCESSIBILIT É
Romuald
![C'est juste la photo de mon profil](https://fr.gravatar.com/userimage/38240130/6ec4fada455b1d6128660c401c40acc6.jpg?size=500)
Twitter : @doc_roms
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8908000/Fichier-4.png)
LeadDev
- Performance
- Qualité (a11y, éthique, sécurité… )
- Eco-conception
- Ecologie
- Numérique Responsable
- Inclusion & Accessibilité
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9840964/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9840969/pasted-from-clipboard.png)
Un monde valido-centrique
Notre approche globale n'est pas INCLUSIVE
TOUT LE MONDE, qu'importe la situation
![Image d'un escalier dit 'inclusif' : Deux bandes de couleurs sur les contremarche , des "nez de marche" sur chaque marche et une surface podotactyle.](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9532978/pasted-from-clipboard.png)
![Schéma représentant 3 personnes en situation de handicap : Une personne avec un bras en moins : handicap permanent, une personne avec le bras dans le plâtre : handicap temporaire, une personne qui porte un enfant en bas-âge : handicap situationnel](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9454854/a-drawing-of-a-person-description-automatically-g.png)
On parle de "SITUATION de Handicap"
Permanent
Temporaire
Situationnel
Les différents types de handicap
Le Handicap "mental" (ou déficience intellectuelle)
![Logo du handicap "mental" : un profil de coté droit tout bleu, devant une face blanche à bord bleu. Les deux se chevauchent, le nez semble commun au deux illustartions.](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623904/pasted-from-clipboard.png)
OMS : 1 à 3% de la population
Besoin de simplicité d'utilisation
Besoin de plus d'explications
Les différents types de handicap
Le Handicap "auditif"
INSERM: + de 65 % des 65 ans et plus
Besoin d'information visuelle
Besoin de plus d'explications (contexte)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623918/pasted-from-clipboard.png)
OMS : 466 millions de personnes
Les différents types de handicap
Le Handicap "visuel"
Besoin d'information auditive
Besoin de plus d'explications (contexte)
OMS : 2,2 milliards de personnes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623941/pasted-from-clipboard.png)
Les différents types de handicap
Le Handicap "moteur"
Besoin d'interfaces épurées, plus pratiques
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623960/pasted-from-clipboard.png)
OMS : Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap.
Aux Etats-Unis, par an :
Permanent
Temporaire
Situationnel
26 000
13 000 000
8 000 000
Quel rapport avec le numérique ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623973/ContractForTheWeb.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623974/pasted-from-clipboard.png)
Tim Berners-Lee
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623989/ContractForTheWeb_1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623990/ContractForTheWeb_4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623991/ContractForTheWeb_7.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9623992/ContractForTheWeb_9.jpg)
Quel rapport avec le numérique ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9454854/a-drawing-of-a-person-description-automatically-g.png)
Est-ce que je peux utiliser ton appli avec une seule main ?
Toucher
Est-ce que les méthodes de saisies sont optimales ?
Vraiment ? Pas de combinaison de touches ?
Quel rapport avec le numérique ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9454869/1_YVj5MyJlLPF6hOWV3WPoPg.png)
Est-ce que les vidéos sont sous-titrées ?
Ecouter
Est-ce que les fichiers audios sont légendés ?
Est-ce que les notifications ne sont pas QUE sonores ?
Quel rapport avec le numérique ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9454877/inclusive-design-persona-spectrum.jpg)
Est-ce que les images sont contextualisées textuellement ?
Voir
Est-ce que les contrastes sont suffisants ?
Est-ce que les liens sont explicites ?
Est-ce que la navigation est bien structurée ?
Est-ce que mes CAPTCHAs ne sont pas QUE visuel ?
Quel rapport avec le numérique ?
Est-ce qu'il y a une alternative à la prononciation ?
Parler
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9624025/Speak_a11Y.jpg)
Alors je fais quoi ?
Se mettre en situation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9624032/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9624035/pasted-from-clipboard.png)
Naviguer sur son site avec une synthèse vocale
WCAG 2.0 (ISO 40500:2012)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9625472/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9625486/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9625496/androidaccessibilitySuite.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9627367/pasted-from-clipboard.png)
Since 1999
RGAA 4.1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9625675/RGAA.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9625676/DNum.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9625691/RGAA_Tests.jpg)
Méthodologie de test
RGAA - Aspect légal
Services public
Service privé si CA >=250 000 000 €
Risques ?
2 000 €
Commune < 5000 habitants
20 000 €
Commune > 5000 habitants
20 000 € / Service
RGAA - Le Jeu de l'OAA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9625754/OAA_dinum.jpg)
Rendre mon service accessible
Avec toutes les bonnes pratiques vues précédemment !
Textes alternatifs
Contrastes suffisants
Tester la navigation au clavier
Validation du DOM après du W3C...
Intégrer toute la team dans la démarche !
Ne pas jouer avec les ARIA
Tester son site avec un Zoom de 400%
Avoir un contenu informatif différencié pas que par la couleur
<noScript>
Print.css
Quid des outils de surcouche ?
Rendre mon service accessible
Des quoi ?
<script src="monOutilA11y.js" defer></script>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9627469/pasted-from-clipboard.png)
J'utilise les outils d'audit...
Et sûrement plein d'autres outils...
Outils de développement des navigateurs
- DareBoost
- Lighthouse (web.dev)
- Console Firefox
- Console Chrome
Outils "d'analyse statique" standard
- wave.webaim.org
Outils "d'analyse statique" spécialisé
- WebPageTest.org
- tenon.io
... et je comprends les limites des ces outils.
J'utilise les outils d'audit...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9627524/suspicious.gif)
Exemple : "un fruit"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9624040/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9624041/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9624043/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9624063/fruitsHtml.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9624066/lightouseBestGrade.jpg)
je fais passer un vrai audit d'accessibilité.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9475718/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9475752/pasted-from-clipboard.png)
D'autres expertes ou experts indépendant•e•s en #a11y !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9627545/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9639419/pasted-from-clipboard.png)
+ d'infos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9475718/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/7702186/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9475752/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9627543/LaLutineDuWeb.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9627553/StephanieWalter.jpg)
Merci !
![C'est juste la photo de mon profil](https://fr.gravatar.com/userimage/38240130/6ec4fada455b1d6128660c401c40acc6.jpg?size=500)
Twitter : @doc_roms
Des questions ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8908000/Fichier-4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9840969/pasted-from-clipboard.png)
L'accessibilité numérique
By Romuald Priol
L'accessibilité numérique
- 1,096