Really accessible SVGs

[GaryJones]

It's great that you've switched to SVGs. But when being used as icons, their accessibility can be improved with a couple of easy changes.

Please, follow the standard procedure at https://css-tricks.com/accessible-svgs/#article-header-id-9 for using SVGs as standalone icons. Update the markup in simple-social-icons.php to include:

• role="img" on the <svg> elements.
• Add <title> element inside the <svg> with the i18n name of the service being linked to.

If you're looking to support Chrome 49 or earlier, also:

• Add id attribute to <title> elements.
• Add aria-labelledby to svg elements, that references the ID just added.

FWIW, if that array of labels and patterns had been properly abstracted, to avoid all the WET code, the above changes would only need to be done once, instead of once for each supported service.

[carasmo]

Yes!

[GaryJones]

Just to clarify:

From this:

'bloglovin' => array(
    'label'   => __( 'Bloglovin URI', 'simple-social-icons' ),
    'pattern' => '<li><a href="%s" %s><svg class="social-bloglovin"><use xlink:href="' . plugin_dir_url(__FILE__) . 'symbol-defs.svg#social-bloglovin"></use></svg><span class="screen-reader-text">' . __( 'Bloglovin', 'simple-social-icons' ) . '</span></a></li>',
),

to this:

'bloglovin' => array(
    'label'   => __( 'Bloglovin URI', 'simple-social-icons' ),
    'pattern' => '<li><a href="%s" %s><svg role="img" class="social-bloglovin" aria-labelledby="social-bloglovin"><title id="social-bloglovin">' . __( 'Bloglovin', 'simple-social-icons' ) . '</title><use xlink:href="' . plugin_dir_url(__FILE__) . 'symbol-defs.svg#social-bloglovin"></use></svg></a></li>',
),

As you might spot, the screen-reader-text can then be dropped. We don't need to hide some non-visual text after the SVG, because we're making the SVGs themselves more accessible. This means you aren't reliant on themes on sites that use this plugin to correctly have the screen-reader-text classes aka better compatibility.

[GaryJones]

Would you be willing to whip up a PR for this?

@laurenmancke said she'll take a look into doing it :-)

[bgardner]

Roger that @GaryJones. If you wouldn't mind just looking over her shoulder after she make the commit to make sure it's been properly done, we'd appreciate it.

[laurenmancke]

This has been merged