search

tholman / github-corners

A fresher "Fork me on GitHub" callout.
http://tholman.com/github-corners
MIT License
4.93k stars 193 forks source link

Possible accessibility improvements #13

Closed tigt closed 8 years ago

tigt commented 8 years ago

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 8 years ago

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

calvinmetcalf commented 8 years ago

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 8 years ago

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 8 years ago

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 8 years ago

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 8 years ago

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 8 years ago

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 8 years ago

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.

tholman commented 8 years ago

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