tholman/github-corners

Possible accessibility improvements

tigt opened this issue · 9 comments

tigt commented

Right now, screen-readers would present the corner as something like this:

The accessibility API tree in Internet Explorer, showing each graphical element inside of an SVG announced as its own image.

Source

Drawing from that source, this would probably work best:

<svg role="presentation">
  <a xlink:href="YOUR-URL-HERE" aria-labelledby="gh-corner-title">
    <title id="gh-corner-title">Fork me on GitHub</title>

    <path role="presentation" d="..."/>
    <path class="octo-arm" role="presentation" d="..."/>
    <path class="octo-body" role="presentation" d="..."/>
  </a>
</svg>

This also has a tooltip for mouse users and people long-pressing on mobile.

I'm not sure about it, if only because moving the link into the SVG itself might be too drastic a change for your purposes. But I think making it more "self-contained" would be fine. (Which could also mean an inline <style scoped> for the hover animation, but that's another issue entirely.)

tholman commented

Ahh, definitely something to look at! Hrm, this'll be a fun bit of research!

calvinmetcalf commented

what about a title attribute for the anchor, which (I think) would also give the benefit of some hover text for people who don't recognize the octocat.

tholman commented

Looks like title on the anchor definitely isn't the go - https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/

I'll play around with squeezing in a span, or something of the likes.

calvinmetcalf commented

there might then be 2 separate issues then, tool tips for people who don't recignize the octocat and text for screen readers

tigt commented

You can get both by using SVG's <title>:

<svg>
  <title>I'm used both as an accessible name and as a tooltip!</title>
</svg>

Unfortunately, browser support for SVG in general requires using aria-labelledby, but that's not a huge deal.

laughinghan commented

Unlike the title attribute, the <title> tag does appear to be the way to go, see this detailed StackOverflow answer citing specs and W3 mailing list emails: http://stackoverflow.com/a/4756461/362030

vshivam commented

Since this was the Accessibility Improvements topic, I thought I'd put this here. I forked the code and added a text element to the svg, so it now supports a diagonal text along with the octocat svg.

Project URL : https://github.com/vshivam/github-corners-text

tigt commented

With @vshivam's patch, aria-hidden="true" placed on the non-<text> elements would probably do the trick. We may want a textLength on there, to avoid unpredicted font-families from blowing out of the badge.

  • 👍1
tholman commented

Ultimately opted for the hidden="true" combined with the label on the anchor ... based on these tests - https://gist.github.com/davidhund/564331193e1085208d7e