joshue108

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