UPDATE 09/08/2011: Deze widget van de Canadese overheid om pagina’s te delen op sociale netwerken is 100% toegankelijk en een perfect alternatief voor AddToAny, AddThis of andere ontoegankelijke widgets.

Je kent ze wel, de knoppen onderaan een artikel waarmee je een pagina kan delen via Facebook, Twitter of een ander sociaal netwerk. Add To Any komen we het meest tegen bij het screenen van websites. Vandaar deze post. Als webbouwer kan je snel en makkelijk een standaard stukje code naar je site ‘copy pasten’ waardoor de share/save button verschijnt. Add To Any is niet ‘echt’ toegankelijk maar wel voor iedereen bruikbaar zolang je de standaard knop implementeert waarbij de knop zelf naar de overzichtspagina met sociale netwerken leidt.

Maar er zijn verschillende varianten. Het probleem ligt in de CSS overlay. Het menu verschijnt wanneer je met de muis over de knop beweegt. Er is geen manier om de overlay zichtbaar te maken voor wie de muis niet kan gebruiken. Gelukkig ligt er een link op de knop zelf die een nieuwe pagina opent waarop alle sociale netwerken netjes staan opgesomd. Klik zelf maar even op bovenstaande knop of tab er naartoe en druk enter. Het is een volwaardig alternatief voor bezoekers die de overlay niet kunnen activeren omdat ze geen muis gebruiken. Dus is er eigenlijk geen probleem? Toch wel. Je kan de knop namelijk ‘customizen’ door in de opties het vinkje “Show menu only when button is clicked” aan te vinken. Dat lijkt misschien een goed idee omdat hierdoor de overlay wel met het toestenbord kan worden geopend. De toetsenbordfocus wordt hierna helaas niet op het eerste element gelegd. Ik moet dus opnieuw door heel de pagina tabben om in het menu te geraken en ik kan het niet sluiten met het toetsenbord. In deze variant van de knop verdwijnt de link naar de overzichtspagina waardoor het geheel compleet ontoegankelijk wordt. Probeer het zelf even zonder muis (tab – en entertoets) op onderstaande knop.