search

osompress / simple-social-icons

Plugin: Simple Social Icons
62 stars 33 forks source link

Poor accessibility of links #4

Closed GaryJones closed 7 years ago

GaryJones commented 10 years ago

The links have very poor accessibility - text to speech browsers simply read each one as a 'list item' with no clue as to what it links to.

Solutions:

Personally, I'd like to see the second option done, since that then gives the link more information for search engines or other non-style contexts.

rianrietveld commented 9 years ago

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

michaelbeil commented 9 years ago

:+1:

rianrietveld commented 9 years ago

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?

nathanrice commented 9 years ago

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

michaelbeil commented 9 years ago 
/* 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.

GaryJones commented 7 years ago

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

nickcernis commented 7 years ago

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

bgardner commented 7 years ago

@nickcernis Do you think this can be closed now, due to https://github.com/copyblogger/simple-social-icons/commit/9a6e92242643f2834f026eee2321967503e208b1?

GaryJones commented 7 years ago

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.