This is a simple question but I can't find an answer that seems certain.
In an SVG where you'd see something like
<g id="Layer_3" data-name="Layer 3"><g id="Layer_3-1" data-name="Layer 1">
Is this something the SVG actually needs to have? They look the same when removed so I'm wondering if they're solely for identification?
No they are not required.
Even though if you are re-using same svg on a single page.
For example two SVG's with id="edit" it will cause ADA Compliance issue.
Related
What is the proper way to make an inline svg accessible when it is used multiple times on the same page? An example would be a twitter icon in the header and footer, or a logo that is repeated throughout the page. From my research I believe the following is best for unique svgs:
<svg aria-labelledby="title">
<title id="title" lang="en">Red Rectangle</title>
<g>
<rect x="0" y="0" width="100" height="50" fill="red" />
</g>
</svg>
Using aria-labelledby and title, as well as description if needed. However in the case of an inline svg that is repeated, I have not been able to find an answer on the web. Is something like the following acceptable?
<svg role="img">
<title>Red Rectangle</title>
<g>
<rect x="0" y="0" width="100" height="50" fill="red" />
</g>
</svg>
Or what about just using aria-label? Thanks in advance!
The human side
Why your image is repeated multiple times ?
While choosing an alternative text for your image, remember that there are two kind of images on the web: illustrative images, and functional images.
The former don't absolutely need an alt text, while the later absolutely requires an alt text.
IF you give an alt text for the former, it should be a description of the image, while the alt text for the later must rather tell what the action is about than a simple visual description.
You can look at this question and my answer for more details about that.
IF your images are repeated multiple times, it's quite probable that they are functional ones. If we assume that it's the case:
If they all trigger exactly the same action, they must all have exactly the same label. Examples: several links to the same page, or a share icon at the beginning and the end of an article
If they don't trigger exactly the same action, or not on the same item, then they must all have different label. Example: add an item to cart. In that case, ideally, the label of the image should also tell on which item it operates.
The technical side
If your images are functional and all doing exactly the same action (see above), your problem is that you can't have multiple times the same id for a whole page.
Technically, referencing a <title> present in another SVG should work, but I would still prefer avoid it just in case. Inline SVG aren't as well supported than good old <img/> by screen readers.
It would be better to use good old <img/>, or generate unique ids.
Note that aria-label and aria-labelledby are guaranteed to work with all screen readers only on interactive/focusable elements.
If your images are focusable, then fine as long as all id are unique, although it would even be better to have the alt text as a visually hidden text in an enclosing link or button.
IF your images aren't focusable, keep in mind that aria-label/aria-labelledby may be totally ignored, but anyway in that case you have another accessibility problem: in principle, functional image should be made focusable, otherwise keyboard only users won't be able to trigger the action.
I've searched all over the place and not have any success with this.
I'm making SVGs like the following one in order to make them scalable, and also help people who are dyslexic so they can highlight the text and use plugins like Read Out Loud:
https://www.ole.bris.ac.uk/bbcswebdav/institution/TEL/TEL%20guides/Published%20TEL%20guides/Replay/record-now-instructions-web.svg
But I've not been able to get my copy of NVDA to read out the tab-indexed fields as I tab through them. I've tried fields and aria-label on various things...
Is there something simple I can change so NVDA (and similar screen readers) will read out the text as I tab through (NVDA does this on HTML pages).
Or should I just put the full description of all the text in my description at the top?
I noticed you have role="img" in your svg root. That's borking everything, since it tells the accessibility API that it is just a single element, whose accessible name is always aria-labelledby="svgTitle svgDesc"
Try changing that to role="graphics-document" (or perhaps role="application" if you want fancier interactions) and I think you'll have a whole lot more luck.
The other option is to remove the role attribute from the <svg> element. It sounds counterintuative, but it should make any <text> elements accessible.
For an example, see tip 5 in this SitePoint article, which has great background and other helpful tips on making SVG more accessible in different use cases:
Tips for Creating Accessible SVG
From the above article:
<svg version="1.1" width="300" height="200" aria-labelledby="title desc">
<title id="title">Green rectangle</title>
<desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
<text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text>
</svg>
I am developing a tool for writing svg files programmatically. I was wondering what was the conventional way to add an author to the file. I was using something like this:
<svg version="1.1"
baseProfile="full" width="297mm"
height="210mm"
viewBox="0 0 297 210"
xmlns="http://www.w3.org/2000/svg"
author="Bill Kill">
But I found also this convention using DublinCore standard.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<title property="dc:title">Metamorphosis I-IV</title>
<desc property="dc:creator">M.C. Escher</desc>
<!-- graphical elements -->
</svg>
A little bit verbose. What's the recommended way?
There is a number of attributes recognized in the standard (see link). If you add author, which is not among them, you will break that standard. Most browsers will not complain, but I think that using desc is safer. Also, it is the tag designed for your need.
I have a reusable SVG component that contains some templated content. As part of the component default function, I'd like to include a shadow/reflection visual effect.
So, easy, right; use and done. Except, here's a reduced example to show the problem I'm having:
<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="blue" />
</g>
</svg>
<svg>
<use xlink:href="#reflect"></use>
<g id="reflect">
<templated-content class="red" />
</g>
</svg>
Will each reflection be red, or blue? Because the element can be reused, and each instance is potentially different, I can't rely on a constant id attribute.
I'd prefer to avoid assigning id pairs to each instance via script. I couldn't find anything useful in the W3C xlink spec, but there's enough jargon there that I may have missed something.
Is there a supported way to include a relative use, or perhaps a similar result via another declarative feature?
EDIT: I know it is invalid to include multiple elements with the same id. That is why I want a way to create a reflection from a relative declarative reference. Can this be done?
Having two items with the same id in the same document is invalid.
A <use> element must point to an id and each id must be unique, there's no such thing as a relative <use>
Each reflection should be blue.
You'll need to generate unique ids.
I have a pixelart-style image which intend to scale to 4x size with SVG. However, the following code blurs the pixels of the image:
<image x="0" y="0" width="1024" height="1024"
image-rendering="optimizeSpeed"
xlink:href="pixelart.bmp" />
Is there some attribute which will resolve this?
I think that image-rendering="optimizeSpeed" is the closest you can get. As the specs for that property state, it "should use a resampling algorithm which achieves the goal of fast rendering, with the requirement that the resampling algorithm shall be at least as good as nearest neighbor resampling." As this is the only section of the spec that mentions "nearest neighbor", I don't think you have any other option.
The only other related thing I can find is the IE9 property -ms-interpolation-mode:nearest-neighbor. This is (of course) IE specific, and is listed as a CSS property (so possibly only applicable to HTML).
Which OS/browser/version is giving you interpolated pixels as a result of upsizing with that attribute?
Also, note that you can use a combination of HTML5 Canvas and SVG to perfectly recreate your image with one SVG <rect> per pixel:
http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml
CSS value image-rendering:pixelated; so:
<image x="0" y="0" width="1024" height="1024"
style="image-rendering:pixelated"
xlink:href="pixelart.bmp" />
This is from reading through the answer link above, in the "accepted" answer. It is not official as of time of writing, still "Proposed" for CSS4, but appears to be supported by Chrome already.