Un jour, une questionRé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

16éme séminaire AccessiWeb – 28/06/2012

Le bouton de partage de contenu de Facebook

16éme séminaire AccessiWeb – 28/06/2012

• QUE NOUS PROPOSE FACEBOOK ?

• LA SOLUTION EST-ELLE ACCESSIBLE ?

Que nous propose Facebook ?

16éme séminaire AccessiWeb – 28/06/2012

<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 :

La solution est-elle accessible ?

16éme séminaire AccessiWeb – 28/06/2012

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

Le bouton de partage de contenu de Twitter

16éme séminaire AccessiWeb – 28/06/2012

• QUE NOUS PROPOSE TWITTER ?

• LA SOLUTION EST-ELLE ACCESSIBLE ?

Que nous propose Twitter ?

16éme séminaire AccessiWeb – 28/06/2012

<a href="https://twitter.com/share" class="twitter-share-button" data-

via="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 :

La solution est-elle accessible ?

16éme séminaire AccessiWeb – 28/06/2012

POINTS FORTS

• La navigation au clavier est respectée

• Alternative au JavaScript• Contrastes valides au niveau

AAA• Valide HTML5

Le bouton de partage de contenu de Google +

16éme séminaire AccessiWeb – 28/06/2012

• QUE NOUS PROPOSE GOOGLE +?

• LA SOLUTION EST-ELLE ACCESSIBLE ?

Que nous propose Google + ?

16éme séminaire AccessiWeb – 28/06/2012

<!-- Placez cette balise là où vous souhaitez positionner le bouton +1. --><div class="g-plusone" data-annotation="inline"></div>

<!-- Placez cet appel d'affichage à l'endroit approprié. --><script type="text/javascript"> window.___gcfg = {lang: 'fr'};

(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>

CE QUI NOUS DONNE:

La solution est-elle accessible ?

16éme séminaire AccessiWeb – 28/06/2012

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

Une solution clé en main : AddThis

16éme séminaire AccessiWeb – 28/06/2012

• QUE NOUS PROPOSE ADDTHIS ?

• LA SOLUTION EST-ELLE ACCESSIBLE ?

Que nous propose AddThis ?

16éme séminaire AccessiWeb – 28/06/2012

<!-- 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-4fe3520060619704"></script><!-- AddThis Button END -->

RENDU :

AddThis : Un peu de sémantique

16éme séminaire AccessiWeb – 28/06/2012

<!-- 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-4fe3520060619704"></script><!-- AddThis Button END -->

RENDU :

Que nous propose AddThis ?

16éme séminaire AccessiWeb – 28/06/2012

AU SURVOL DE LA SOURIS DU BOUTON « SHARE », ADDTHIS NOUS PROPOSE

D’AUTRES APPLICATIONS DE PARTAGE

La solution est-elle accessible ?

16éme séminaire AccessiWeb – 28/06/2012

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

Retour d’expérience, la solution maison

16éme séminaire AccessiWeb – 28/06/2012

LE DÉVELOPPEMENT SUR MESURE PEUT CONSTITUER, EN FONCTION DES

PROJETS, LA MEILLEURE SOLUTION

À avoir en tête lors de la conception de votre solution

16éme séminaire AccessiWeb – 28/06/2012

• 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

A retenir

16éme séminaire AccessiWeb – 28/06/2012

• 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

Merci !

16éme séminaire AccessiWeb – 28/06/2012

Ressources :

• Nomensa : where you can stick your social networking buttons

http://www.Nomensa.Com/blog/2012/where-you-can-stick-your-social-networking-buttons/

• Facebook http://fr-fr.facebook.com/

• Twitter https://twitter.com/

• Google + https://plus.google.com/?hl=fr