javascripthtmlaccessibilitytabindexfacebook-share

Creating Facebook share button that is accessibility friendly

Im trying to create a facebook share button for my page that is accessibe by tab-indexing and pressing enter (for accessibility). A lot of the solutions I had created were using javascript and wouldn't load my script until after tabbing out of the share button.

So far I have created this button.

<a tabindex="0" class="fb-share-button" href="javascript:window.location=%22http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&#38;t=%22+encodeURIComponent(document.title)" data-layout="button_count">
       <img src="/sites/all/themes/saralee/images/icon-facebook.png" alt="facebook icon">
</a>

This almost gives the desired outcome except I need it to open in either a new tab or an iframe. Which I haven't been able to do with keeping a valid url. (since the above button parses the current url). using target="_blank" doesnt work.

Solution

  • Quick Note - The best option would be to build the URL on the server and serve it as part of the HTML, use the JavaScript option below if you are unable to do that for any reason.

    All other points other than the URL below are important to make your share 'button' accessible.

    Instead of using an inline function on the button, build the URL in a separate JavaScript function and then apply it on document load.

    JS

    var URL = "http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&#38;t=%22+encodeURIComponent(document.title)";
var elements = document.getElementsByClassName("fb-share-button");
elements[0].setAttribute("href", URL); //using [0] to get first element, would be better to use an ID or simply **build the URL on the server before loading the page** and serve it as part of the HTML.

    HTML

    <a target="_blank" class="fb-share-button" href="fallback URL In Case Of JS Failure" data-layout="button_count">
       <img src="/sites/all/themes/saralee/images/icon-facebook.png" alt=""/>
       <span class="visually-hidden">Share This Page on Facebook (opens in new window)</span>
</a>

    CSS

    .visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

    Because you are no longer setting window.location using target="_blank" will work as expected (window.location was overriding the functionality of the link).

    Also notice that I removed the tabindex as links are focusable by default (so it isn't needed).

    I also changed the alt description to "" and added a 'visually hidden' <span> containing the purpose of the link.

    I have included the CSS to make something 'visually-hidden' by applying that class to an item, as it is a useful tool to have in your accessibility toolkit!

    Note how I indicated the link 'opens in a new window' within brackets to let screen readers know the behaviour of this link.

    An empty alt tag is used to mark an image as decorative (make sure it is empty and not null, i.e. alt="" NOT alt).

    Visually Hidden text is still accessible to screen readers but will not show visually.