Adding aria-label to an embedded widget

  • Hi,
    I’m not sure if there is a solution to what I’m trying to do. I have a an embedded widget on the main page that shows the company’s Google Reviews. I’ve used trust.reviews for this.
    However, I’m now running accessibility check and realizing that the links within the widget are not using aria-label. I’m wondering if there is any way to add those in manually, I couldn’t find an option within trust.reviews.

    Here is the error I get when running a scan:

    Requirement:

    Links that open in a new tab or a new window should either have an “aria-label” attribute or a screen-reader only element explaining to screen-readers that this opens in a new tab.

    3 Failed Elements:

    • <a target="_blank" rel="noopener" >Expert Massage For Health</a>
    • <a target="_blank" rel="noopener" >See all reviews</a>
    • <a class="trcr" target="_blank" >Powered by <span>Trust.Reviews</span></a>

    Thanks in advance!

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

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    I’m surprised screen readers cannot figure out the link opens in a new tab based on the target attribute alone. IMHO they shouldn’t need an aria label just for that. Just sayin’, I know little about screen readers.

    Ideally trust.reviews would have done this from the start by default. There’s no real need to make it an option. You might consider requesting they implement this in their own code. Of course it could take a while for them to do this, if they choose to do it at all. You want a more immediate solution.

    You should be able to add additional attributes with your own JS code. The trick will be your JS mustn’t execute until after the trust.reviews script has added the links. Unfortunately I’m unsure how that might be accomplished. If someone else has a suggestion please do share.

Viewing 1 replies (of 1 total)
  • The topic ‘Adding aria-label to an embedded widget’ is closed to new replies.