Fungerer knappen uten eksterne script?
Stadig flere brukere benytter seg av nettleserinnstikk som blokkerer ymse eksterne script. Fungerer grensesnittet ditt uten dem?
Vinmonopolet lanserte i mars et kampanjenettsted for å gjøre folk oppmerksom på hvor vanskelig det kan være å gjette om noen er myndig, og oppfordrer flere til å vise legitimasjon.
Jeg har ikke fått med meg dette nettstedet før nylig, og synes det var en moro øvelse å gjette alderen på 12 jenter. Da jeg var ferdig å gjette, skulle jeg bruke dele-knappen for å si fra hvor dårlig det hadde gått til vennene mine på Facebook.
Klikk. Klikk. Klikk. Hmmm.
Ingenting skjer. Dele-knappen fungerte rett og slett ikke.
Det endte med at jeg måtte kopiere lenken manuelt og skrive en manuell oppdatering på Facebook om det. Ikke akkurat like effektivt som konseptet la opp til – og mange vil nok droppe det akkurat av den grunn.
Så hvorfor fungerte ikke knappen?
Blokkering av trackere, annonser og script
Jeg bruker nettleserinnstikket Ghostery til å blokkere det aller meste av masete annonser og 3. partsscript som brukes til masse ting som tar tid å laste og gir meg lite nytteverdi, som oftest.
På nettstedet visleg.no forteller Ghostery meg at den har registrert 3 trackere: Google Analytics, DoubleClick, og Facebook Connect.
Analytics har jeg valgt å ikke blokkere, mest for å være snill med alle nettstedseiere som bruker det til å forbedre opplevelsen for sine brukere.
DoubleClick, et annonsenettverk, og Facebook Connect, et script fra Facebook til å lage ymse duppeditter, har jeg blokkert.
Åpner jeg samme nettsted i en annen nettleser, som ikke har Ghostery installert, fungerer alt fint. Klikk på delingsknappen kjører opp et Facebook-vindu for å dele et innlegg om resultatet mitt.
Blokkeringen av Facebook Connect har altså gjort at delingsknappen ikke fungerer fordi den gjør seg avhengig av scriptet til Facebook.
Det var jo leit – men trenger det å være sånn?
Husk tilgjengelighet
Kampanjenettstedet er skrevet med rammeverket React, og koden for å dele resultatet sitt til Facebook ser slik ut:
<button class="facebook" data-reactid=".0.1.$=1$result.0.$0/=1$de221q1xf1r4.0.2.1"> <div data-reactid=".0.1.$=1$result.0.$0/=1$de221q1xf1r4.0.2.1.0"> <i class="icon" data-reactid=".0.1.$=1$result.0.$0/=1$de221q1xf1r4.0.2.1.0.0"> <div style="position:relative;padding-top:20.15621063240111px;width:100%;height:0px;" data-reactid=".0.1.$=1$result.0.$0/=1$de221q1xf1r4.0.2.1.0.0.0"> <svg style="position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;" width="7.938" height="16" viewBox="0 0 7.938 16" data-reactid=".0.1.$=1$result.0.$0/=1$de221q1xf1r4.0.2.1.0.0.0.0"> <path fill="#ffffff" d="M0.226,5.291h1.7V3.683A4.2,4.2,0,0,1,2.476,1.2,3.057,3.057,0,0,1,5.118,0,11.005,11.005,0,0,1,8.168.3L7.742,2.748a5.9,5.9,0,0,0-1.371-.2,1.025,1.025,0,0,0-1.254.873V5.291H7.831L7.642,7.684H5.118V16H1.928V7.684h-1.7V5.291" data-reactid=".0.1.$=1$result.0.$0/=1$de221q1xf1r4.0.2.1.0.0.0.0.0"></path> </svg> </div> </i> <span data-reactid=".0.1.$=1$result.0.$0/=1$de221q1xf1r4.0.2.1.0.1">Del ditt resultat</span> </div> </button>(La oss nå bare ignorere at det er ugyldig HTML her.)
En skjermleser vil lese opp "knapp, del ditt resultat" eller lignende. For at den skal fungere gjør den seg avhengig av at både Javascript er slått på og scriptet til Facebook er blitt lastet.
Har vi et alternativ som kan fungere selv om javascriptet til Facebook er blokkert?
En mer tilgjengelig og robust løsning finner vi under hvert blogginnlegg her på epinova:
<a href="https://www.facebook.com/sharer/sharer.php/?u=https%3a%2f%2fwww.epinova.no%2fblogg%2ffungerer-knappen%2f" class="shareButton" target="_blank">
<svg width="24" height="24" fill="#E41D17">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/UI/social-icons.svg#facebook"></use>
</svg>
Del på Facebook
</a>En god gammeldags lenke!
Denne lenken er utformet slik at den fyrer opp et nytt nettleservindu med delingsdialogen til Facebook, og der kan man sende med teksten man har lyst til å bruke som utgangspunkt for beskjeden brukeren fyller ut.
De fleste har Javascript slått på i nettleseren, så lokalt på nettsiden kan man dynamisk endre lenken slik at den får med resultatet fra testen til Vinmonopolet.
Dersom scriptet til Facebook ikke har blitt lastet, gir man da likevel brukeren muligheten for å dele. Og det vil man jo!
Grunnleggende handler dette om å krydre opp funksjonaliteten på nettsiden basert på hva man har tilgjengelig samtidig som man tilbyr en robust løsning i bunn som fungerer uten det meste; progressive enhancement.
For å lese mer om hvordan implementere robuste delingslenker, anbefaler jeg et innlegg fra Jonathan Suh.