accessibilité et qualité web - retour d'expérience - waqe

ACCESSIBILITE ET QUALITE WEB

RETOUR D’EXPERIENCE

Yann Kozondéveloppeur freelance

@yannkozon

Fast and Furious

Startup agrégateur de contenu

Grande culture de l’expérience utilisateur

Le client

Reproduire le comportement

de l’application mobile dans le navigateur

La demande

Budget limité

Trop de devices lent

DOM trop lent

Les problématiques

Canvas

Détection des devices

Redirection vers l’application

La solution

Je veux mon award !

Administration

Le boss de l’agence

Le client

Site d’explication des nouveaux rythmes scolaires

Gagner des awards

La demande

Comment faire un site d’administration,

un site à award ?

La problématique

Site onepage

Effet au scroll

Musique d’ambiance

La solution

Navigation clavier

Images non utiles à la compréhension

La solution

Business is Business

E-commerçant français

Le client

Sur le site existant

ajouter une mise en avant

de l’inscription à la newsletter

La demande

Comment ne pas être trop intrusif

et augmenter le nombre d’inscrit

La problématique

Fenêtre modale

La solution (marketing)

Fenêtre modale

La solutionid=“ad“

Private Social Network

Laboratoire d’analyse

Le client

Site du laboratoire

avec accès distant client

La demande

Sécurité des données

La problématique

- back-office -

Contrôle IP, horaires spécifiques d’accès,

cryptage des mots de passe…

Les solutions

- front-office -

Génération aléatoire des accès client

Système anti-brute force

Les solutions

Tracking des clients

pour connaitre la population qui se connecte

La demande (bonus)

Google Analytics

La solution

Le client est roi

La demande du client est roi

Accessibilitéet qualité web

Retour d’expérience

Fast and Furious

Tim Berners-Lee lors de la cérémonie des Jeux olympiques 2012

Canvas =

Flash

Non compatible

avec les lecteurs d’écran

Jaws, NVDA, VoiceOver, Talkback…

Canvas

Pas de sélection des textes

Canvas

Je veux mon award !

Référentiel général d'accessibilité pour les administrations

RGAA

A bannir

ou

Arrêt rapide et simple

Autoplay

Texte de contenu4,5:1

Texte supérieur à18pt en gras supérieur à14pt

3:1

Contrastes

http://www.waqe.org/le-contraste-dans-vos-sites/

Business is Business

placeholder != label

<button> vs <a> vs <div>

Formulaire

*:focus { outline:0; }

focus et position:fixed

Focus

Si le site est responsive

n’oubliez pas la version mobile

Pensez utilisateurs

Mobile

Private Social Network

https://4037109.fls.doubleclick.net/activityi;src=4037109;type=20142003;cat=201420;ord=7917385912018;~oref=https://www.

hc.gov/see-plans/85601/results/?county=04019&age=40&smoker=1&parent=

&pregnant=1&mec=&zip=85601&state=AZ&income=35000&&step=4?

the age of privacy is over

http://www.hngn.com/articles/39098/20140814/mark-zuckerberg-takes-als-ice-bucket-challenge-invites-bill-gates.htm

WAQEWeb Accessibilité Qualité Écologie

1. Aucun alt tu n’oublieras, et intelligemment tu rempliras.2. La loi tu respecteras3. L’élément <label> dans tes formulaires tu utiliseras4. Le focus clavier tu ne masqueras pas5. Les contrastes attention tu feras6. Ton niveau de language à ta cible tu adapteras7. A l’utilisateur final tu penseras8. Les données sensibles tu protègeras9. Les images tu optimiseras10. Les bonnes pratiques tu défendras

10 commandements

Sensibiliser

Former

Valoriser

Récompenser

Nos actions

Interventions auprès des professionnels du web

Sensibilisation des clients

Signaler un problème sur un site

Sensibiliser

Mini-conférences

Conférence annuelle

Formation des professionnels du web

Former

Annuaire de la communauté WAQE

Mise en avant des professionnels

Soutien des initiatives autour de nos thèmes

Valoriser

WAQE awards

Design, Accessibilité, Technique, Contenu

Système de récompenses interne

Récompenser

Engagez-vous ! waqe.org