Hi Rosemary,
I was having a similar issue with this plug. The links were just announced as ‘Link’ in my tests with the screen reader JAWS – so I needed to provide some context for blind users of my site.
What I did (and I hope this helps) was to take a different approach. Rather than adding @alt text to the icons themselves, I added an ARIA label string to the URLS used on my site. You can do this by going editing the plugin directly – and its not really a heavy nerd thing to do btw.
1) Go to Plug ins and where you see the ‘Simple Social Icons’ – select ‘Edit’.
2) You will see the option to edit a few things – select the one ‘simple-social-icons/simple-social-icons.php.
3) Go the part which says:
/**
* Social profile choices.
*/
Then find the array of icons that you want to make accessible.
4)In this case I will look at the Twitter/YouTube stuff.
5) Add the following code aria-label=”Whatever you want the screen reader user to hear when the link has focus”. For example:
'twitter' => array(
'label' => __( 'Twitter URI', 'simple-social-icons' ),
'pattern' => '<li class="social-twitter"><a href="%s">aria-label="Visit my sites Twitter account">' . $this->glyphs['twitter'] . '</a>',
),
'youtube' => array(
'label' => __( 'YouTube URI', 'simple-social-icons' ),
'pattern' => '<li class="social-youtube"><a href="%s">aria-label="Visit My sites YouTube account">' . $this->glyphs['youtube'] . '</a>',
6) That’s it really. Just make sure you include the string after the
<a href="%s">' at the end.
Doing this will make these icons accessible to screen reader users – as whatever string you give to the aria-label, will announced on focus.
Josh
