Un jour, une question Réponse à une problématique issue de la liste GTA *

Transcription

1 Un jour, une question Réponse à une problématique issue de la liste GTA * GTA* : Groupe de Travail AccessiWeb LE NIVEAU D ACCESSIBILITÉ DES BOUTONS DE PARTAGE DE CONTENU DES RÉSEAUX SOCIAUX Victor Brito Vivien Blasquez

2 Le bouton de partage de contenu de Facebook QUE NOUS PROPOSE FACEBOOK? LA SOLUTION EST-ELLE ACCESSIBLE?

3 Que nous propose Facebook? <iframe src="http://www.facebook.com/plugins/like.php?href=your_url" scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe> RENDU :

4 La solution est-elle accessible? POINTS FORTS La navigation au clavier est généralement respectée Contrastes valides au niveau AA POINTS FAIBLES Bouton inutilisable lors de la désactivation du JavaScript N est pas valide HTML5

5 Le bouton de partage de contenu de Twitter QUE NOUS PROPOSE TWITTER? LA SOLUTION EST-ELLE ACCESSIBLE?

6 Que nous propose Twitter? <a href="https://twitter.com/share" class="twitter-share-button" datavia="vivienblasquez" data-lang="fr">tweeter</a> <script>!function(d,s,id){var js,fjs=d.getelementsbytagname(s)[0];if(! d.getelementbyid(id)) {js=d.createelement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.pare ntnode.insertbefore(js,fjs);}}(document,"script","twitter-wjs");</script> RENDU :

7 La solution est-elle accessible? POINTS FORTS La navigation au clavier est respectée Alternative au JavaScript Contrastes valides au niveau AAA Valide HTML5

8 Le bouton de partage de contenu de Google + QUE NOUS PROPOSE GOOGLE +? LA SOLUTION EST-ELLE ACCESSIBLE?

9 Que nous propose Google +? <!-- Placez cette balise là où vous souhaitez positionner le bouton > <div class="g-plusone" data-annotation="inline"></div> <!-- Placez cet appel d'affichage à l'endroit approprié. --> <script type="text/javascript"> window. gcfg = {lang: 'fr'}; CE QUI NOUS DONNE: (function() { var po = document.createelement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(po, s); })(); </script>

10 La solution est-elle accessible? POINTS FORTS La navigation au clavier est respectée Code valide HTML5 POINTS FAIBLES Contraste de couleur trop faible (3.3) Pas d alternative à l image de fond du bouton Le bouton disparaît à la désactivation de JavaScript

11 Une solution clé en main : AddThis QUE NOUS PROPOSE ADDTHIS? LA SOLUTION EST-ELLE ACCESSIBLE?

12 Que nous propose AddThis? <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fe "></script> <!-- AddThis Button END --> RENDU :

13 AddThis : Un peu de sémantique <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <ul><li><a class="addthis_button_facebook_like" fb:like:layout="button_count">facebook</a></li> <li><a class="addthis_button_tweet">twitter</a></li> <li><a class="addthis_button_google_plusone" g:plusone:size="medium">google plus</a></li> <li><a class="addthis_counter addthis_pill_style">d autres réseaux sociaux</a></li></ul> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fe "></script> <!-- AddThis Button END --> RENDU :

14 Que nous propose AddThis? AU SURVOL DE LA SOURIS DU BOUTON «SHARE», ADDTHIS NOUS PROPOSE D AUTRES APPLICATIONS DE PARTAGE

15 La solution est-elle accessible? POINTS FAIBLES Hérite des points faibles de chaque bouton des réseaux sociaux vus précédemment : Facebook, Twitter et Google + De gros problèmes sémantiques Impossible d accéder au bouton «share» au clavier Aucune alternative à JavaScript : le contenu disparaît Code non valide

16 Retour d expérience, la solution maison LE DÉVELOPPEMENT SUR MESURE PEUT CONSTITUER, EN FONCTION DES PROJETS, LA MEILLEURE SOLUTION

17 À avoir en tête lors de la conception de votre solution COMPRENDRE LES MÉCANISMES DE PARTAGE (URLS, API ) S'ASSURER QUE LA SOLUTION EST UTILISABLE SANS JAVASCRIPT S'ASSURER QUE LA SOLUTION EST ACCESSIBLE À LA SOURIS ET AU CLAVIER CODE SÉMANTIQUE NE PAS PERTURBER LA LECTURE DU CONTENU À PARTAGER : PLACER LE WIDGET DE PARTAGE FAIT MAISON APRÈS LE CONTENU DANS LE CODE SOURCE

18 A retenir LES BOUTONS DE PARTAGE DE CONTENU DES RÉSEAUX SOCIAUX PORTENT DE GROSSES LACUNES EN TERME D ACCESSIBILITÉ JAVASCRIPT À UN RÔLE CRUCIAL DANS LEUR BON FONCTIONNEMENT

19 Merci! Ressources : Nomensa : where you can stick your social networking buttons Facebook Twitter https://twitter.com/ Google + https://plus.google.com/?hl=fr