Question about accessibility concerns

[brycewray]

Lighthouse downrates "mention-of"-type webmentions beginning with <a class="u-mention" with the following message in the Accessibility category:

Links do not have a discernible name Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users.

I have mitigated similar problems with the webmention images with aria-label= HTML, but it appears the <a class="u-mention" stuff — which, in my particular case, is rendered in ${mention.content.html} — is pre-injected with the content.html item from the JSON supplied by webmention.io. So, is there a way to augment the received content.html on the receiving end (other than altering the received JSON which, of course, would last only until the next time it's accessed)?

[aaronpk]

I'm a little confused about what you're asking here. Can you provide an example of the HTML from webmention.io you're talking about>

[brycewray]

@aaronpk Yes, sir. The specific page where I saw this is https://brycewray.com/posts/2020/05/battle-ios-email-heavyweights/. The HTML that Lighthouse complained about is:

<a class="u-mention" href="https://brycewray.com/posts/2020/05/battle-ios-email-heavyweights/"></a>
<a class="u-mention" href="https://buff.ly/2Apdj8Z"></a>

... and the original JSON returned is:

{
      "type": "entry",
      "author": {
        "type": "card",
        "name": "andrewcanion",
        "photo": "https://webmention.io/avatar/pbs.twimg.com/ee30c20aac4cc016ecf5355185bf9764ce6f446109ceb81d7a27fbb3c1cf1ae3.jpg",
        "url": "https://twitter.com/andrewcanion"
      },
      "url": "https://twitter.com/andrewcanion/status/1261291376626434053",
      "published": "2020-05-15T13:44:32+00:00",
      "wm-received": "2020-05-15T14:22:40Z",
      "wm-id": 796662,
      "wm-source": "https://brid-gy.appspot.com/post/twitter/BryceWrayTX/1261291376626434053",
      "wm-target": "https://brycewray.com/posts/2020/05/battle-ios-email-heavyweights/",
      "content": {
        "html": "If you want power email management on your mobile device, this is the review to read.\n<a class=\"u-mention\" href=\"https://brycewray.com/posts/2020/05/battle-ios-email-heavyweights/\"></a>\n<a class=\"u-mention\" href=\"https://buff.ly/2Apdj8Z\"></a>\n<a href=\"https://twitter.com/brycewraytx/status/1261067012031369216\">twitter.com/brycewraytx/st…</a>",
        "text": "If you want power email management on your mobile device, this is the review to read.\n\n\ntwitter.com/brycewraytx/st…"
      },
      "mention-of": "https://brycewray.com/posts/2020/05/battle-ios-email-heavyweights/",
      "wm-property": "mention-of",
      "wm-private": false
    },

So I guess I'm wondering whether there's some API-related way to auto-add HTML that would mitigate automated tools' concerns about accessibility in this and other, similar cases. Thanks!

[aaronpk]

ah I see now. This isn't something that webmention.io can help with really. The HTML is coming from the source URL, in this case, Bridgy. It's complaining about the empty <a> tags. I'd recommend asking Bridgy to change that markup to fix this.

[brycewray]

@aaronpk Will do. Thanks! I thought I'd start with webmention.io and go from there.