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

Save this PDF as:

WORD PNG TXT JPG

Dimension: px

Commencer à balayer dès la page:

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

Laurence Delorme
il y a 2 ans
Total affichages :

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

AccessiWeb LE NIVEAU D ACCESSIBILITÉ DES BOUTONS DE

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

respectée Contrastes valides au niveau AA POINTS FAIBLES

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 :

function(d,s,id){var js,fjs=d.getelementsbytagname(s)[0];if(! d.getelementbyid(id)) {js=d.

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 +?  <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>

--> <script type="text/javascript"> window. gcfg = {lang: 'fr'}; CE QUI NOUS DONNE: (function() { var po = document.

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

HTML5 POINTS FAIBLES Contraste de couleur trop faible (3.

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

12 Que nous propose AddThis?  <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>  RENDU :

$class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>$

13 AddThis : Un peu de sémantique  <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>  RENDU :

fb:like:layout="button_count">facebook</a></li> <li><a class="addthis_button_tweet">twitter</a></li> <li><a class="addthis_button_google_plusone"

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

vus précédemment : Facebook, Twitter et Google + De gros problèmes

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

SOLUTION EST ACCESSIBLE À LA SOURIS ET AU CLAVIER CODE SÉMANTIQUE NE PAS PERTURBER LA LECTURE

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

Documents pareils

INSERER UN WIDGET FACEBOOK SUR SON SITE INTERNET

INSERER UN WIDGET FACEBOOK SUR SON SITE INTERNET Qu est ce qu un widget? Le terme «Widget» résulte de la contraction de «Windows» (le système d exploitation développé par Microsoft) et de «gadget». Un widget c est par exemple une horloge, une image animée,