Accessibility Request

  • Resolved teisha21

    (@teisha21)


    4 years, 8 months ago

    On a card/photo that is a video and contains the Play svg on it could you change the role to role=”img” instead of role=”presentation”?

    role=”presentation” means that this svg won’t get read by screenreaders so changing it to role=”img” will be better for accessibility.

    https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

    Additionally you don’t need aria-hidden=”true” on anything that has an aria-label on it. aria-hidden means you want to hide this element from screenreaders.

    On this example it looks like you are using a class to hide something so aria-hidden shouldn’t be used: <span class=”sbi_loader sbi_hidden” style=”background-color: rgb(255, 255, 255);” aria-hidden=”true”></span>

    On this example it looks like you have role=”img” and an aria-label to describe that image so aria-hidden=”true” isn’t needed. <svg class=”svg-inline–fa fa-instagram fa-w-14″ aria-hidden=”true” data-fa-processed=”” aria-label=”Instagram” data-prefix=”fab” data-icon=”instagram” role=”img” viewBox=”0 0 448 512″></svg>

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Smash Balloon Joel

    (@joelsmashballoon)

    4 years, 7 months ago

    Hey @teisha21,

    Thank you for reaching out to us about this! Accessibility is something that we are going to look over thoroughly in the future, after our current development focus cycles. For this, we appreciate your kind feedback which I am sure will help us create a better solution!

    For now, I suggest that you use our custom template functionality which will allow you to edit these parts as mentioned above. Let me know if you need any specific guidance in doing so.

    I have registered your feedback to be used in the future.

    Many thanks.

    Thread Starter teisha21

    (@teisha21)

    4 years, 7 months ago

    Thank you for the suggestion @joelsmashballoon!
    I started to look into this today but I believe the file that I need to update is class-sb-instagram-display-elements.php which is located under the incfile of your plugin directory. Do you know if there is any way I am able to edit that file just on my site? Else I’ll tell my client we will need to wait for your updates.

    I would suggest removing the aria-hidden attribute on the <svg>s in the get_basic_icons() function and adding focusable=”false” attribute to them. That should solved the accessibility issues I was running into.

    Plugin Support Smash Balloon Joel

    (@joelsmashballoon)

    4 years, 7 months ago

    Hey @teisha21,

    Thank you for the additional details here which I have forwarded to our team! You could make changes to the file directly, keeping in mind that any change would need to be applied again after any plugin update until we have been able to make these changes officially as the file is outside our template directory.

    I will check with the team if there is anything we can do additionally here for you at the moment in relation to this and get back to you.

    Best regards,

    Plugin Support Smash Balloon Joel

    (@joelsmashballoon)

    4 years, 7 months ago

    Hey @teisha21,

    Thank you for your patience here. A better way to handle this, for now, to ensure it works without issue for visiting users, and without needing to edit any core files each update, is to add the following snippet to Instagram Feed > Customize > Custom JavaScript:

    $('#sb_instagram svg').each(function(){
    $(this).removeAttr('aria-hidden');
    $(this).attr('focusable','false');
});

    This will remove the aria-hidden attribute and add the mentioned focusable=false on all SVGs in our feed.

    Best regards.

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

The topic ‘Accessibility Request’ is closed to new replies.

Tags