Icons added to links are missing search reader text or alternative text

  • Resolved Amber Hinds

    (@alh0319)


    1 year, 7 months ago

    This website is using your plugin and the website owner has added a new window icon after their links. These icons are missing alternative text or hidden screen reader text that tells users who are blind and using screen readers what the icon is or the meaning of the icon. Here is an example of the current output:

    <a href="https://www.ads-software.com/themes/spacious/" target="_blank" rel="noopener noreferrer external sponsored" data-wpel-link="external" class="wpel-icon-right">Spacious<span class="wpel-icon wpel-image wpel-icon-6"></span></a>

    This should have hidden screen reader text on it like this:

    <a href="https://www.ads-software.com/themes/spacious/" target="_blank" rel="noopener noreferrer external sponsored" data-wpel-link="external" class="wpel-icon-right">Spacious<span class="wpel-icon wpel-image wpel-icon-6"></span><span class="screen-reader-text"> opens new window</span></a>

    Obviously, you’ll want to change the text to reflect the appropriate meaning for the icon and potentially leave it off for icons that are purely decorative.

    Here are some resources to help you:

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Following as I teach this plugin and I’d love to see it fixed

    Plugin Author Alexandru Tapuleasa

    (@talextech)

    Well, the icons are purely decorative as they don’t necessarily represent “open in new window” and can mean anything. So in our mind, making the screen reader speak out any information about them would not actually help a blind person in any way, but could even make it more confusing.

    For example, if you add a ‘Sandwich Menu’ FontAwesome icon after a link called Office, a screen reader would say ‘Office Sandwich menu icon ‘ which could change the perceived meaning of the link when hearing it described, while a user viewing it will just see Office and a 3 line menu icon.

    We are open to making any changes to make people’s lives easier but just not sure this would actually be of any value ??

    Thread Starter Amber Hinds

    (@alh0319)

    I think what’s confusing about this is that the user’s intent here was to make the icon meaningful.

    Could you add a checkbox to the settings page that allows them to indicate if the icon is not decorative? Then if they indicate that it isn’t decorative, there would be a required field for screen reader text.

    Otherwise, you might want to remove the option for users to select any meaningful images. The new window icon, for example, is probably never “decorative” and is always added to convey information.

    New window icon

    So either users shouldn’t be able to select this or you should have conditional logic on your output that recognizes that they have selected this icon and then includes the correct information to screen reader users.

    Plugin Author Alexandru Tapuleasa

    (@talextech)

    I will add it to our ToDo list but I can’t give you any dates.

    Hope you get this fixed to make it more accessible to folks with those needs

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Icons added to links are missing search reader text or alternative text’ is closed to new replies.

Tags