Accessibility

[Ingasa]

Hi, I have integrated a little into jssocials, to make it usable for disabled person, especially for blind people and people with motoric disability. a) I integrated in the definition of the shares in the .js file, a "title" like:

   ... whatsapp: {
           label: "WhatsApp",
           logo: "fa fa-whatsapp",
            shareUrl: "whatsapp://send?text={url} {text}",
            countUrl: "",
            **title**: "WhatsApp"
        }, ...

b) In the html definition I integrated a "tabindex" like:

      ... shares: [{
                 share: "facebook",
                 logo: "images/socials/fb_icon.png",
                 ** tabindex**: 19
              }, ...

c) in the function : _createShareLink: function(share) I added following changes:

            var shareZiel = getOrApply(share.title, share)
            var $result = $("<a>").addClass(this.shareLinkClass)
                .attr({ href: this._getShareUrl(share), target: "_blank" })
                .attr({ alt: "Button, um Webseite zu teilen über "+shareZiel} )
                .attr({ title: "Button:"+shareZiel} )
                .attr({ tabindex: share.tabindex } )
                .append(this._createShareLogo(share));

Its german text - for the website I used jssocials. Now, every Button has an "alt" and an "title" text for blind users and can be reached by the given "tabindex" with the keybord by users who have to use the keybord, to reach and click a link.

Thanks for your code tabalinas!!

[alessandrococco]

Hello @Ingasa, I needed a similar funcionality for my site (support for title only), your code works like a charm :-)

Thanks for sharing your enhancement, I hope it will become part of the official plugin :-)

[odedharth]

@Ingasa Would you be willing to create a pull request or a fork with this enhancement? 😊