accessibilité: designer et implémenter un meilleur produit - flupa ux-day 2015
TRANSCRIPT
Accessibilité
Sophie Buda,
FLUPA UX Day 2015
Designer & Implémenter un meilleur produit
A PROPOS DE MOI…
POURQUOI?
La bonnechose
à faire
La
loi
“laughably terrible PR”
“epic fail”
“disappointing”
“denying essential service”
“take affordable transportation away from blind people”
“Unacceptable”
“accessibility is clearly not a priority for them”“despite their claim, accessibility has not been considered at all”
“discriminatory practise”
15% de la populationmondiale
COMPRENDRE LES BESOINS
PERMANENTS ET TEMPORAIRES
Moteur CognitifVisuel Auditif
EUH…
…c’est pas comme s’ils
pouvaient utiliser un ordi ou un
smartphone?
“
”
ALTERNATIVES
LES GUIDELINES
Web Content Accessibility Guidelines (WCAG) 2.0
2008
BBC Mobile Accessibility Standards & Guidelines
2013
SUR QUOI AGIR
Wireframe Design Code User test
WIREFRAME
STRUCTURE
greys-anatomy
GREY’S ANATOMY2 videos en Replay
STRUCTURE
STRUCTURE
Image sans alt
Lien
Texte
CONTENU NON ACCESSIBLE
CONTENU NON ACCESSIBLE
Vidéo importante… Il faudra une alternative
(transcript / audio description / sous-titres)
Image décorative… Il ne
faudra pas d’alternative.
CONTENU NON ACCESSIBLE
PubBandeauxRedir/page1
Fruits légumes
Fruits légumes
CONTENU NON ACCESSIBLE
SENS DE LECTURE
SENS DE LECTURE
12,99 intégrale broadcurch saison 2
SENS DE LECTURE
1
2 3
INTERACTION
INTERACTION
Tab. Tab. Tab. Tab. Tab. Tab. …
INTERACTION
Tab. Tab.Ente
r.
DESIGN
CONTRASTE
DIFFÉRENCIATION
STYLES & ACTIONS
STYLES & ACTIONS
Tab.
STYLES & ACTIONS
Tab.
Tab.
STYLES & ACTIONS
Tab.
Tab.
Tab.
CODE
<title>
ELEMENTS QUI ONT DU SENS
<div
>
<span><h1>
<th><a>
<ul>
<li>
<label><button>
WAI-ARIA
Accessible Rich Internet
Applications
Bonus!
role="tab" aria-selected="false" aria-label="Social"
WAI-ARIA
role="tab" aria-selected="true" aria-label="Primary"
Primary tab.
Social tab. To activate tab page press space bar.
TESTER AVEC DES UTILISATEURS
QUAND ON FAIT DES SUPPOSITIONS…
“I’d like to be able to see more on each
page. Now, I can only see two stories. It
would be better if it was smaller.”
(utilisateur qui a des problèmes de vue)
QUAND C’EST OK POUR LES GUIDELINES…
“I can’t find a link to log
in!”
(utilisateur aveugle)
QUAND C’EST UN BON POINT…
“I didn’t need to use it in the
game!”
(enfant qui a des problèmes de vue)
POUR EN SAVOIR PLUS…
• WCAG 2.0: http://www.w3.org/TR/WCAG20/
• BBC Mobile accessibility guidelines: http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile
• Web accessibility in mind: http://webaim.org/
• Tools from the Paciello group: http://www.paciellogroup.com/resources/
