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>
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.
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.
Sorry if that might come an opinion-based, but I hope there's a right answer..
Where an inline CSS style should be placed inside an SVG document? In the
example I provide below I have defined two styles and a circle that uses them.
The first style is defined inside defs tag and the second styles is defined right inside the svg tag.
Both styles are successfully displayed on the circle (at least in Chrome they do, didn't check other browsers though).
My question is which way is more standard?
I think keeping styles in defs keeps the whole SVG more tidy. However, one can claim that I should not use defs tag since no one references the style with <use>
Thanks!
<svg height="100" width="100">
<defs id="someDefs">
<style id="style1">
.blue-fill {
fill : blue;
}
</style>
</defs>
<style id="style2">
.red-stroke {
stroke : red;
stroke-width : 12
}
</style>
<circle cx="50" cy="50" r="40" class="blue-fill red-stroke" />
</svg>
It doesn't matter. Neither approach is "more standard". <style> elements are not renderable anyway, so there is no real need to put them in the <defs> section
As commented by Paul LeBeau.
After reading this article about style on MDN, that shows an example of a style simply under the SVG root, I am more convinced it is correct to put <style> there rather than under <defs>.
Also, since <defs> tag is indeed for reusable graphical elements that should be rendered, and <style> is not a renderable element, there's no point keeping it there.
Graphical elements defined in <defs> are not rendered directly and will be rendered only with use. Hence it is always a good practice to use <defs> if the graphical object is defined for later use. It also increases the readability of the code.
More Information
I'm making SVG effects by combining 2 identical photos with alternate slits. When you look closely, there are dotted lines 45 degree across the whole images. Referencing this question, I already tried the option shape-rendering="optimizeQuality", shape-rendering="geometricPrecision" and shape-rendering="auto" on <polygon> tags, but the dots still appears.
How do I remove the tiny dots?
Partial HTML codes (full code is too long to post here, see JSFiddle below for full CSS, JS and HTML codes):
<div class="image_wrapper">
<svg id="svg-1" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
<div class="image_wrapper2">
<svg id="svg-2" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
JSFiddle demo is here
The dots are caused by anti-aliasing of the polygons that you are using for the diagonal slit clipping paths.
IMO there isn't any way to prevent that. It may or may not get better if you turn anti-aliasing off with `shape-rendering="optimizeSpeed". And even if that works on one browser, it may not work on other ones.
My suggestion is to just have a complete ("un-slitted") version of the image on top. Make it invisible initially, then show it once the animation has finished.
Dear Stack Overflow,
I am trying to reference individual SVG graphics which reside in different SVG files
via the tag and ID numbers in a master HTML5 page.
I want to be able to put onclicks on the use tags in the HTML page in order to
make a multiple choice quiz (and then keep a score which I know how to do),
The graphics are going to be bulky. Therefore, these need to be in an external svg files.
Here however, I have used a simple rectangle to make my question easier to
follow
Here is my HTML
<html>
<head></head>
<body>
<svg>
<use xlink:href="LINK.svg#link" />
</svg>
</body>
</html>
and here is My SVG
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<g id="link">
<rect x="0" y="0" width="50" height="50" style="fill:red"/>
</g>
</svg>
This works exactly the way I want it to in Firefox and Opera.
However, it does not work in Chrome or Safari. Not sure about Internet Explorer
Is there an alternative method that will allow me external access to the
SVG data, and scripting from the main HTML page (because I want can keep a score
over multiple SVG elements)
You could access your SVG by using an <object> tag. This link shows you how to script from html to SVG and vice versa.