Attribution ⬌ NonCommercial ⬌ ShareAlike 2.5 Canada

SEO, Web mobile et accessibilité :

Trinité du développement Web inclusif

WAQ 2012Québec – 23 février 2012

/ 12012. AccessibilitéWebSans frais : 1 (877) 315-5550

Attribution ⬌ NonCommercial ⬌ ShareAlike 2.5 Canada

/ 2

Certains droits réservés.

2012. AccessibilitéWebSans frais : 1 (877) 315-5550

Accessibilité: difficile à mettre en place?

/ 4

Implanter l’accessibilité

Quelle a été votre expérience?

Quels sont les principaux défis?


Tendre vers l’inclusion

/ 5

Progressivement

Pragmatiquement

Réalistement

CONSTRUIRE L’ACCESSIBILITÉ, UNE ÉTAPE À LA FOISQu’on se le dise, l'accessibilité n’a rien à voir avec les attentes des législateurs.

C'est d’abord d'incarner l'inclusion et de répondre aux besoins des utilisateurs.


Trinité du développement Web inclusif

Repenser sa stratégie de développement Web

Analyse des pratiques SEO / Web mobile

Établir un parallèle entre les pratiques

Faire l'accessibilité, indirectement

Justifier les efforts, autrement


Mon petit 80/20 de l’accessibilité

Prioriser les problèmes les plus fréquents

Se concentrer sur les bases!

1. Équivalents textuels2. Navigation au clavier3. Structure du contenu4. Associations de formulaires5. Contrastes de couleurs6. Hyperliens significatifs7. Langue du document 8. Compatibilité avec outils


Accessibilité et Web mobile

Mobile web best practices 1.0

60 pratiques déclinées en 5 thèmes• Comportement d'ensemble• Navigation et liens• Mise en pages et contenu• Définition de la page• Entrée de l'utilisateur

/ 8

RessourcesMobile Web Best Practices 1.0 - Basic Guidelineshttp://www.w3.org/TR/mobile-bp/From WCAG 2.0 to MWBP (W3C Note)http://www.w3.org/TR/mwbp-wcag/wcag20-mwbp.html


http://www.w3.org/TR/mobile-bp/

http://www.w3.org/TR/mwbp-wcag/wcag20-mwbp.html


De WCAG 2.0 à MWBP 1.0

Établir un pont

Directement relié à WCAG 2.0

17 critères de plus (AA et AAA)

/ 9

Éléments MWBP Critères Niveau WCAG Critères

Non-text alts 1.1.1 A Non-text Content

Fonts 1.3.1 A Info and Relations

Style Sheets Use 1.3.1 A Info and Relations

Use of Color 1.4.1 A Use of Color

Tab Order 2.4.3 A Focus Order

Auto-Refresh 3.2.5 AAA Change on Request

Link Target ID 2.4.9 AAA Link Purpose



Obstacles communs

Établir un pont

Exemples d’obstacles pour utilisateurs

Regroupés sous principes – WCAG 2.0

Maillage entre MWBP 1.0 et WCAG 2.0

/ 10

RessourceShared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilitieshttp://www.w3.org/WAI/mobile/experiences


http://www.w3.org/WAI/mobile/experiences


Accessibilité et meilleures pratiques SEO

Les moteurs de recherche, dont Google....

Ne comprennent que le texte

N'utilisent jamais de périphériques

Se fient à la structure du contenu

Veulent de vrais en-têtes de section

Détestent les rafraîchissements d’écran

Apprécient les navigations efficaces

Dépendent de liens significatifs

À nouveau, des parallèles intéressants à établir entre le SEO et les critères de succès de WCAG 2.0!



SEO et équivalents textuels

Au-delà du texte, point de salut!

/ 12

Critères Détail des critères WCAG Niveau

1.1.1 Non-Text Content A

1.2.1 Audio or Video Content Only A

1.2.2 Captions (prerecorded) A

1.2.3 Audio Description or Media Alternative (Prerecorded) A

1.2.4 Captions (live) AA

1.2.5 Audio Description (prerecorded) AA

1.4.5 Images of Text AA

1.2.6 to 1.2.9 Additional Critères AAA



SEO et navigation au clavier

Naviguer sans la souris

/ 13


2.1.1 Keyboard A

2.1.1 No Keyboard Traps A

2.4.3 Focus Order A

2.4.7 Focus Visible AA

2.1.3 Additional Criterion AAA



SEO et structure des contenus

En-têtes : le GPS intégré du HTML

/ 14


1.3.1 Info and Relationships A

2.4.2 Page Titled A

2.4.6 Headings and Labels AA




SEO, rafraîchissements et délais

Boucles et obstacles à l'information

/ 15


2.2.1 Timing Adjustable A

2.2.1 Pause, Stop, Hide A



SEO et navigation efficace

Sémantique et cohérence

/ 16


2.4.1 Bypass Blocks A

2.4.2 Page Titled A

2.4.3 Focus Order A

2.4.4 Link Purpose (in context) A

2.4.5 Multiple Ways AA

2.4.6 Headings and Labels AA

2.4.7 Focus Visible AA



SEO et hyperliens significatifs

Cliquer ici? Où ça!?

/ 17


2.4.4 Link Purpose (in context) A



Synthèse – une base pour l’accessibilité

Une combinaison gagnante à plusieurs niveaux

/ 18

Critères à considérer WCAG MWBP SEO

Équivalents textuels ✔ ✔ ✔

Navigation au clavier ✔ ✔ ✔

Structure du contenu ✔ ✔ ✔

Hyperliens significatifs ✔ ✔ ✔

Rafraîchissement et délai ✔ - ✔

Navigation efficace ✔ - ✔

Contrastes de couleurs ✔ ✔ -

Associations formulaires ✔ ✔ -

Définition de la langue ✔ - -


Faire tomber les obstacles


La « qualité Web », au-delà des pratiques

/ 20

L'accessibilité dans une démarche globale de qualité

1.Reconnaître l'aspect progressif de la démarche

2.Renoncer à l'envie de tout faire d'un coup

3.Répartir le travail entre les intervenants

4.Prioriser les terrains d'interventions de chacun

5.Adapter la chaîne de production au plan de match

6.Se donner de vrais moyens d'atteindre ses objectifs


Comment s’y retrouver

Le W3 propose plusieurs ressources

Des présentations desquelles s’inspirer

Une démo de type « avant/après »

Business case de l’accessibilité

Quoi faire des sites non accessibles

Et bien plus encore!

PLEIN DE BONNES CHOSES!!!

/ 21

RessourceFinding Your WAI (way) to New Accessibility Resourceshttp://www.w3.org/WAI/yourWAI.html


Par où commencer?

Des options en français

Groupe linkedIn québécois

Base de connaissances

Programme de certification

PLEIN DE BONNES CHOSES!!!

/ 22

RessourceslinkedIn : Accessibilité du Web au Québechttp://www.linkedin.com/groups/Accessibilit%C3%A9-Web-Qu%C3%A9bec-4161328AccessibilitéWeb : Base de connaissanceshttp://certif.accessibiliteweb.com/accueil/base-de-connaissances/AccessibilitéWeb : Programme de certificationhttp://certif.accessibiliteweb.com/


Merci de votre attention!

Denis Boudreau,Président

Coopérative AccessibilitéWeb

1751 rue Richardson, bureau 6111

Montréal (Québec), Canada H3K 1G6

Sans frais : +1 (877) 315-5550

Courriel : [email protected]

Web : www.accessibiliteweb.com

Blogue : www.accessiblogue.com

Twitter : @AccessibiliteWb / @dboudreau

Spkr8 - Commentaires, suggestions?

http://spkr8.com/t/9308


Attribution ⬌ NonCommercial ⬌ ShareAlike 2.5 Canada

Documents

Transcript of Attribution ⬌ NonCommercial ⬌ ShareAlike 2.5 Canada