Poor accessibility of links about simple-social-icons HOT 9 CLOSED

+1 for "Make the anchor text include the name of the site being linked to, in a screen-reader-text span and style appropriately.'"

from simple-social-icons.

👍

from simple-social-icons.

Maybe for Genesis 2.2: when the add_theme_support( 'genesis-accessibility') is true, add the site name in a span with the class screen-reader-text?

from simple-social-icons.

SSI has its own stylesheet we can add this to, if necessary.

from simple-social-icons.

/* Screen Readers
------------------------------- */
.screen-reader-text,
.screen-reader-text span,
.search-form label {
    clip: rect(0, 0, 0, 0);
    height: 0;
    position: absolute;
    width: 0;
}

Like what you cued Robin on @Rrwd.

And then adding that class to the array:
'bloglovin' => '<span class="&#xe80f;"><span class="screen-reader-text">Bloglovin</span>',

That could be great @nathanrice.

from simple-social-icons.

Here's a workaround for those who need it (hint: everybody): https://gist.github.com/robincornett/d3775b24b75e443a76e5

from simple-social-icons.

@GaryJones There's an upcoming update and switch to SVG that includes screenreader text spans:

• 9a6e922#diff-12a1b54f83ab74a5deb89c7b9c8cc7eeR102
• #28
• #25

from simple-social-icons.

@nickcernis Do you think this can be closed now, due to 9a6e922?

from simple-social-icons.

Since this issues was raised before 2.0, this specific implementation issue is now gone. #32 replaces it with the intention of still improving accessibility.

from simple-social-icons.