I am looking for clarification about combining <title> and <desc> with the element for Accessibility. Is the following a valid implemention?
<svg>
<title>This is an SVG</title>
<desc">Lorem ipsum descriptum...</desc>
<use xlink:href="#symbolID"></use>
</svg>
Or would you place it in the <symbol> element like this?
<symbol id="symbolID">
<title>This is an svg</title>
<desc>Lorem ipsum ...</desc>
<path d="......"/>
</symbol>
Would screen readers be able to pick these up?
Add a role="img" and a screen reader can pick it up. It may announce both the <title> and the <desc> depending on screen reader, browser, and versions of each.
For a little extra compatibility you can added aria-labelledby to tell the screen reader where to look for the explicit accessible name (which also means it may not announce the <desc>). Some combos may read the <title> twice as a result, too, so it behooves you to be brief.
<a href="#"> foo
<svg role="img" aria-labelledby="twitterTitle">
<title id="twitterTitle">Twitter Account</title>
<desc>Twitter account for example</desc>
<use xlink:href="#twitter"/>
</svg>
</a>
I forked your CodePen and marked it up.
You may have already seen these two articles, but if not:
Tips for Creating Accessible SVG at SitePoint by Léonie Watson,
Accessible SVGs at CSS-Tricks by Heather Migliorisi.
Related
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'm trying to wrap text automatically since I won't know what the text is ahead of time.
I tried using the accepted answer in this question, but nothing shows up. Here is my sample code so far:
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<switch>
<g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
<textArea width="200" height="300">whatever</textArea>
</g>
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</switch>
</svg>
I am rendering this SVG in FireFox (since its part of a web page).
Firefox implements some parts of SVG 2 and dropping support for requiredFeatures is one part of SVG 2 that it has implemented.
Previous versions of SVG included a third conditional processing attribute, requiredFeatures. This was intended to allow authors to provide fallback behavior for user agents that only implemented parts of the SVG specification. Unfortunately, poor specification and implementation of this attribute made it unreliable as a test of feature support.
That means that the first part of the switch now applies when at the time I wrote the answer to the other question, it didn't. The answer is to remove the switch and the first element as nobody implements SVG 1.2 textArea any more.
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</svg>
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.
I have sport schedules that I would like users to be able to print out on 2 or 4 pages. Tournaments with a large amount of teams would produce hard to read text because there isn't much space for it.
Not sure how to produce printable content with d3js, should I specify values for placement and size in pixels, centimetres, percentage? Percentage sounds good but would need to insert a page break element, maybe provide a separate svg for every page. Can't find a good article on how to do this and am wondering if I've missed something.
The code as is should produce lines with text labels, to fit it all on 2 pages the text in the labels would be very small so want to provide a 4 page version. So my question is: What would be the best way to do this?
I'm thinking of providing 4 or 2 svg elements with a page-break-after css style. The shape and dimensions would be roughly letter or a4 landscape and placement units are based on percentages.
[UPDATE]
Since pageSet and page elements seem to be ignored by Firefox (and inkscape) and wrongly interpreted by Chrome I've tried multiple svg's. This seems to print fine on my new but not latest Firefox and Chrome. Code I use is:
<html><head>
<title>Test tournament bracket</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
#media print {
.noPrint {display:none;}
}
</style>
</head>
<body>
<div class="noPrint">
<h1>Forms and non printable content</h1>
</div>
<svg width="70" height="55">
<text x="10"
y="10" font-family="sans-serif"
font-size="12px" fill="black">
Hello
</text>
</svg>
<div style="page-break-after: always;"></div>
<svg width="70" height="55">
<text x="10"
y="10" font-family="sans-serif"
font-size="12px" fill="black">
World
</text>
</svg>
</body></html>
Will give that a shot and see how it turns out.
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.