Skip Navigation

[Resolved] Social Share Block Accessibility Issue

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user wants to add the aria-label attribute to their social icons block.
Solution:
Unfortunately this isn't available natively, however you can add the attribute using Javascript.

Here is an example below of how this can be added.

jQuery(".SocialMediaShareButton--facebook").attr("aria-label","Share on Facebook");
jQuery(".SocialMediaShareButton--linkedin").attr("aria-label","Share on LinkedIn");
jQuery(".SocialMediaShareButton--twitter").attr("aria-label","Share on Twitter");
jQuery(".SocialMediaShareButton--pinterest").attr("aria-label","Share on Pinterest");
jQuery(".SocialMediaShareButton--reddit").attr("aria-label","Share on Reddit");
jQuery(".SocialMediaShareButton--email").attr("aria-label","Share on Email");

This support ticket is created 2 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 4 replies, has 2 voices.

Last updated by JoelK2744 2 years, 7 months ago.

Assisted by: Shane.

Author
Posts
#2165913

Hello, the social share block icons on our site are being flagged as an accessibility issue because they don't have an accessible name and are just icons. In this situation they should have aria-labels, e.g. aria-label="share on Facebook".

How can aria labels be applied to these? If it's not straightforward, can aria-labels be added in the next update?

Thanks

#2166041

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Joel,

Thank you for getting in touch.

Can you send me a link to the page with the issue. We may be able to add them using Javascript. If not then a request will need to be made at the URL below for them to get added.
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Thanks,
Shane

#2166677

Thanks Shane, it's at the bottom of each of our blog posts...e.g. hidden link

Thanks

Joel

#2168009

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Joel,

You can add it using this JS

jQuery(".SocialMediaShareButton--facebook").attr("aria-label","Share on Facebook");
jQuery(".SocialMediaShareButton--linkedin").attr("aria-label","Share on LinkedIn");
jQuery(".SocialMediaShareButton--twitter").attr("aria-label","Share on Twitter");
jQuery(".SocialMediaShareButton--pinterest").attr("aria-label","Share on Pinterest");
jQuery(".SocialMediaShareButton--reddit").attr("aria-label","Share on Reddit");
jQuery(".SocialMediaShareButton--email").attr("aria-label","Share on Email");

The above should be able to get this working for you.

Thanks,
Shane

#2168073

Thanks Shane. Perhaps something for a future release too as meeting accessibility standards is becoming increasing important.

Thanks

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.