un jour, une question : réponse à une problématique issue de la liste gta : le niveau...
Post on 22-Jun-2015
459 Views
Preview:
TRANSCRIPT
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
top related