How to add labels for screen readers to social buttons?

ytadvisors

I would like to add labels or javascript to tell Voiceover and other screen readers Facebook or Twitter. As of now, it does not have a label and the screen readers will not read it.

Thanks.

Bleistivt

I believe that the social sign in buttons are section 508 compliant as of vanilla 2.2

ytadvisors

I was talking about the sharing buttons below the post. Here is an image.

Bleistivt

This is also true for the social sharing buttons.

ytadvisors

@Bleistivt said:
This is also true for the social sharing buttons.

I do not think so. I use a screen reader called NVDA cause i cannot see well, and it does not read the social buttons. I need to add custom labels to them. Voiceover reads them on my IPad, but it says "discussion." That helps a blind person out doesn't it?

Bleistivt

@ytadvisors said:
I do not think so. I use a screen reader called NVDA cause i cannot see well, and it does not read the social buttons. I need to add custom labels to them. Voiceover reads them on my IPad, but it says "discussion." That helps a blind person out doesn't it?

Where are you testing it? On a 2.1 installation or on this forum?

The social buttons here (running 2.2) have a hidden span saying "Share on Facebook", for example.
If that doesn't work with screen readers it should be reported as a bug.

vrijvlinder

You can use js to add labels if you can't add it to the plugin code for some reason. But you should be able to hard code the label to include text or pick a share button that has a label with text.Look for this part in the plugin and add the words like I did in this example.

<label for="Form_ShareFacebook" class="CheckBoxLabel" title="Share to Facebook."><input type="hidden" name="Checkboxes[]" value="ShareFacebook"><input type="checkbox" id="Form_ShareFacebook" name="ShareFacebook" value="1" title="Share to Facebook."> <span class="ReactSprite ReactFacebook">Share to Facebook(this is the part I added)</span></label>

vrijvlinder

@Bleistivt said:
If that doesn't work with screen readers it should be reported as a bug.

Readers for the blind do not necessarily pick up hidden labels or alt or title. I think it needs to be straight text. You can test this by using voice on the mac and have it read back what you hover over and you will see it does not say share to facebook when you hover the sprite.

https://www.afb.org/ProdBrowseCatResults.asp?CatID=49

http://atcoalition.org/article/screen-readers-blind-users

http://www.disabled-world.com/assistivedevices/computer/screen-readers.php

Bleistivt

I just tested with the standard windows narrator function on this forum and it reads "Share on Facebook", which is in the hidden .sr-only span. This is only on Vanilla 2.2 though.

<a class="ReactButton PopupWindow" href="http://vanillaforums.org/post/facebook/comment?id=233649">
    <span class="Sprite ReactSprite ReactFacebook"></span>
    <span class="sr-only">
    Share on Facebook
    </span>
</a>
<a class="ReactButton PopupWindow" href="http://vanillaforums.org/post/twitter/comment?id=233649">
    <span class="Sprite ReactSprite ReactTwitter"></span>
    <span class="sr-only">
    Share on Twitter
    </span>
</a>

ytadvisors

This sounds chalenging to modify. I will just update to Vanilla 2.2 and try it.

vrijvlinder

2.2 is in beta mode though. Not for use in production sites. It is for developers to work with and help improve the code .

ytadvisors

That's alright. I will just wait til it comes out.

Thanks.