Ikonate – fully customisable and accessible vector icons
ikonate.com
ikonate.com
I cannot understand how the authors think this is valid.
I imagine the author is trying to do open source well by using a license but doesn't fully understand the impact it has on the project. That's fair enough, and very common when people are new to open source.
[1] https://github.com/mikolajdobrucki/ikonate/commit/5993f43ce6...
Also, the possibility to download a custom styled set is great: With all other icon sets I ended up either modifying them myself in a text editor or received a bunch of modified files from the graphics person in the project - but bloated with markup I needed to strip afterwards (see first point).
> * Ikonate is NOT accessible out of the box and will never be. We've done our best to follow the best accessibility practices while building this software, but it's your role to adjust it and make it truly accessible inside your project.
these are incompatible statements. the author should just not call it accessible.
also -- why "will never be"? there are ways to make it more accessible, if not perfect. one idea: turn the icons into a truetype GX variable font with a weight axis that increases as viewport size decreases using media queries. that would increase out of the box legibility considerably.
It is actually impossible for anything to be accessible out-of-the-box, but they have been designed to be accessible and have sane defaults. Those statements do not contradict one another.
For example, if you use a magnifying glass icon to mean "zoom" but their default title text for a magnifying glass is "search" then it is not out-of-the-box accessible even though it was designed to be fully accessible. They even mention this scenario (generically, not specifically) in their disclaimer.
>E.g. all the titles and descriptions given to the icons should be treated as placeholders and changed in implementation depending on an actual role of each icon. In many cases, you may not need them altogether
Having the placeholders there is questionably good - it would be better to have the attributes there but blank in my opinion. It will do more harm than good being wrong than being blank, but that's a difference in preference for implementation.
1) Add text when it is missing but the attribute is there to serve as a reminder
OR
2) Change text when it is wrong
Neither one is "wrong" but one might be better than the other.
I agree with Nadya. Wrong or false labels do in fact cause more harm than good. I understand that you want to provide sane default, but I would rather encourage people to edit the labels themselves (maybe add a message box somewhere).
I've also tested an example icon with Firefox + NVDA (inline SVG), which leads to the following screen reader announcement:
Add Icon of a plus sign enclosed in a circle graphic
1. IF you are using a title + description, use aria-labelledby for the main label (= title) and aria-describedby for the description. Right now there is no separation and both labels will be read without a pause, making no sense (what is an "add icon of a plus sign .."?).
2. I would advice against using a description altogether. A screen reader user does not care about how the icon looks. He/she cares about the action it performs. So here, "Add" (depending on the context) is more than enough. As a general tip: Screen reader users should have access to the same information as sighted users. That's why we don't describe decorative images for example (alt=""), because there is no information behind it.
3. "Icon of" is unnecessary. As you can see in the NVDA output, when using "role=img" the user already knows it's an graphic. Hence, "Icon of" or "Image of" should not be used in image descriptions.
4. Keep in mind, there are still some issues with SVGs and screen readers to think about [1]. Therefore I also prefer to use the labels on the enclosing elements (buttons, links) instead.
I hope, you find my tips helpful. Keep up the good work!
I'd love to purchase a clipart set like in the old 90's days of power point.
Icon sets:
Icomoon
Streamline icons
Iconfinder
Icons8
In any modern context, a vector is always preferable as it will generate the best output for an unlimited number of sizes, resolutions and contexts.
Scaled vectors will have mathematically correct line widths, but to a human perception the line may appear to thick/thin for the image size, than which a raster artist would have used if they were creating a native raster of that size.
One thing though I don't get is the 0 border width setting. Is that useful somehow?
The Github has the raw SVGs you can download and edit.