Consider accessibility

[brucelawson]

Very nice work. 2 points - consider adding an SVG <title> element with the function of the icon, eg

<title>Green rectangle</title>

And allow me to have contents in the div that gets the SVG added, eg

Home

for users without JS (firewalls, proxy browsers) etc. (The JS can remove that textual content)

[softwaretailoring]

Thank you Bruce!

About your second point: the library currently remove the innerHTML of the holder div. So you can achieve fallback in disabled JS situation.
Try this code in the root directory:

<div data-hybicon="github-star" data-hybicon-align="left" data-hybicon-background="#35CE8D">
    <img src="hybicon.sample.png" />
</div>

Unfortunately I don't understand your first point exactly. Sorry. Please explain me what is your goal with it.

[softwaretailoring]

Hey Bruce,

I think your comment about users without JS was worth to make a section in documentation. Thanks again! :)

http://hybicon.softwaretailoring.net/documentation.html#jsdisabled

[brucelawson]

@softwaretailoring thanks! My first point (github ate my markup) was to use the title element, as first child of the svg element,to say what the icon represents - it'll be read out by assistive technologies in the same way that alt text in an HTML img element is; see http://www.sitepoint.com/tips-accessible-svg/ for more information.

[softwaretailoring]

@brucelawson Okay, now I understand already. I have two questions about it.

Non-visible element

If I would implement a new data-hybicon-title attribute, the generated code would be:

    <div data-hybicon="book-search" data-hybicon-title="Go to documentation">
        <svg xmlns="http://www.w3.org/2000/svg">
            <title>Go to documentation</title>
            ...
        </svg>
    </div>

If I use the existing aria-label attribute on the holder div, the generated code:

    <div data-hybicon="book-search" aria-label="Go to documentation">
        <svg xmlns="http://www.w3.org/2000/svg">
            ...
        </svg>
    </div>

What is the difference?

Non-visible element and visible element together

I tested the title tag in Chrome, Firefox, Opera, IE and Safari. Firefox handle it as a tooltip, the others don't display this (unfortunately I don't have screen reader). So it would be a possible solution that data-hybicon-title attribute add a title tag to svg (for accessibility) and add a title attribute to holder div (for cross-browser tooltip). These two titles can work together seamlessly in assistive technologies?

[brucelawson]

AFAIK, aria-label on a div/ span isn't announced by a screenreader, whereas title in SVG is announced. So I'd use the SVG title (which is a "native" element) rather than an ARIA bolt-on. (I don't think a tooltip is necessary). I'll ask a friend of mine who's a screenreader user to adjudicate, however.

[LJWatson]

@brucel

You're right about aria-label not being recognised on <div> or <span> elements.

The SVG <title> element is intended to provide the accessible name for its parent element. Screen reader support is inconsistent though:
http://svg-access-w3cg.github.io/svg-a11y-tests/title.html

You can use the aria-labelledby attribute to enforce <title> as the accessible name though. For example:

<svg aria-labelledby="title">
<title id="title">Go to documentation</title>
...
</svg>

This results in better support from screen readers.
http://svg-access-w3cg.github.io/svg-a11y-tests/title+aria-labelledby.html

The tooltip comes from the SVG spec itself as an optional visual rendering of the <title> element. AFAIK your results are correct - only Firefox impliments this (thankfully, since tooltips are notoriously poor for accessibility).

[brucelawson]

Thanks @LJWatson

[softwaretailoring]

@LJWatson @brucelawson Thanks! You helped me a lot!

I would like to make accessible hybicon, and I'll use the aria-labelledby attribute.

I know that somebody says about title attribute: "kill it with fire" :) and it is poor for accessibility, but I think the tooltip can be useful for non-screen reader situation. And the title element in svg is useful for screen reader. Both of them are a way to provide more information for users.

So when a developer sets the data-hybicon-title attribute this means that she/he wants to give text information to the icon. And it will be accessible too.

Is this approach an absolutely wrong way?

[brucelawson]

I don't think it's absolutely wrong if you want a tool tip; I just think it's unnecessary; some users will have the hover effect spoiled if a tool tip appears. and it's my belief that if an icon needs explaining to a sighted user, it shows that the icon needs re-thinking because it's "mystery meat". (Of course, there needs to be the accessibile title element in SVG & fallback for no-JS users, but that's alternate text, not additional info).

It's your project, so your call to make.

[softwaretailoring]

I agree. I don't want to mix the alternate text and the tooltip already. When somebody needs a tooltip it is available via title attribute of the holder div.

Finally I added a data-hybicon-alt attribute wich puts a title tag to svg and sets the icon role for it.

@LJWatson Thank you for your review! I placed a link to your article in documentation.

http://hybicon.softwaretailoring.net/documentation.html#accessibility

@brucelawson This was a great contribution! I learned a lot, thank you so much. Here is a sample page for you. :)

http://hybicon.softwaretailoring.net/samples/svgtitle.html

[brucelawson]

@softwaretailoring you're welcome, glad it's proved useful. Love from your friends at Opera!

[LJWatson]

@softwaretailoring

You're welcome anytime :)