I'm trying to announce the meaning of each donutchart(svg) arc/section when tab on it by using aria-describedby / aria-labelledby.
Added id to div which is the content needs to be announced.
Added aria-describedby / aria-labelledby with the same string as id to svg path.
Added tabindex = "0" to svg path.
Tested on the MacOS VoiceOver with Chrome/Safari and iPhone ios VoiceOver with Safari.
When tab on the arc/section, the VoiceOver will only announce graphic symbol instead of the content of div. However, the announced content is ignored no matter using aria-describedby / aria-labelledby.
<svg class="donut-chart" width="236px" viewBox="0 0 236 236">
<g class="donut-chart-arcs">
<path class="donut-chart-path" d="M118,218.3
A100.3, 100.3 0 0 1 117.50623649597293, 218.29878462674455
L117.63984309118025,191.15911349244897
A73.16, 73.16 0 0 0 118, 191.16 z" stroke="#ffffff" stroke-width="2px" fill="#0046ad" opacity="1" tabindex="0" aria-describedby="0.28"></path>
<path class="donut-chart-path" d="M117.50623649597293,218.29878462674455
A100.3, 100.3 0 0 1 33.32260328573676, 171.757124976093
L56.23531063194917,157.21107939432665
A73.16, 73.16 0 0 0 117.63984309118025, 191.15911349244897 z" stroke="#ffffff" stroke-width="2px" fill="#ec0439" opacity="1" tabindex="0" aria-describedby="56.89"></path>
<path class="donut-chart-path" d="M33.32260328573676,171.757124976093
A100.3, 100.3 0 0 1 63.65981518807381, 33.695585438212646
L78.36362990188914,56.5073682019904
A73.16, 73.16 0 0 0 56.23531063194917, 157.21107939432665 z" stroke="#ffffff" stroke-width="2px" fill="#1977d3" opacity="1" tabindex="0" aria-describedby="88.95"></path>
<path class="donut-chart-path" d="M63.65981518807381,33.695585438212646
A100.3, 100.3 0 0 1 173.18230621846504, 34.244384782800665
L158.25062335935098,56.907668900395784
A73.16, 73.16 0 0 0 78.36362990188914, 56.5073682019904 z" stroke="#ffffff" stroke-width="2px" fill="#7300cd" opacity="1" tabindex="0" aria-describedby="65.7"></path>
<path class="donut-chart-path" d="M173.18230621846504,34.244384782800665
A100.3, 100.3 0 0 1 117.99999999999994, 218.3
L117.99999999999996,191.16
A73.16, 73.16 0 0 0 158.25062335935098, 56.907668900395784 z" stroke="#ffffff" stroke-width="2px" fill="#aa00aa" opacity="1" tabindex="0" aria-describedby="145.55"></path>
</g>
</svg>
<div id="0.28">$0.28</div>
<div id="56.89">$56.89</div>
<div id="88.95">$88.95</div>
<div id="65.7">$65.7</div>
<div id="145.55">$145.55</div>
announce the content in div
I’m not able to test in VoiceOver, but I’ll provide an answer based on the standards.
You must name focusable elements
If you allow focus on these elements, they must have an accessible name, provided by aria-label or aria-labelledby.
A description is only optionally read by screen readers, which is a configuration choice. You might provide one additionally, but not as the only text.
You must not name path elements without a role
The ARIA standard forbids to name elements with certain roles.
It‘s unclear which role a SVG path element has implicitly, since there is no ARIA in SVG standard. It might have role="none" which is a synonym for the presentation role, which in turn must not be named. This is the case in Firefox.
Which role to use for your path?
So the question follows which role should you use.
The standard to refer to here would be the W3C Recommendation WAI-ARIA Graphics Module.
So it seems that Safari might take its interpretation from this recommendation, when announcing graphic symbol. The standard says:
A graphical object used to convey a simple meaning or category, where the meaning is more important than the particular visual appearance. It may be a component of a larger structured graphic such as a chart or map.
(Emphasis mine)
The SVG–Aria Element Mapping Table also maps <path> to graphics-symbol if it should be included in the accessibility tree.
Reasons to include the element are aria-label and tabindex attributes.
In the W3C Wiki there also is an older page called SVG Accessibility/ARIA roles for charts. The corresponding role for your chart would probably be graphics dataunit:
A distinct data value in a chart or map.
Since the Wiki page never made it to a Recommendation, you could follow the standard’s suggestion to provide a aria-roledescription to approach the wiki role:
<path role="graphics-symbol" aria-roledescription="dataunit">
If you check out Highcharts’ Donut chart, you might notice that they use <path role="img" aria-label="…">.
Focus or not?
It’s unclear whether or not you should make these data units focusable. It might be preferable to not navigate within simple charts, doing so in more complex charts most probably improves comprehension of the data groups.
You should test with screen reader users.
In general, only interactive elements that can be clicked, should be focusable. Or put the other way around:
Focusable elements should have interactive semantics
If elements are focusable, focus needs to be visible, so you’ll need to add a :focus style as well.
If you have bigger charts than that one, it would be better to provide a single tab stop, as explained in Keyboard Navigation Inside Components.
Arrow keys then allow to focus single data units.
Again, Highcharts provide a good example for this.
Watch out for . in IDs
It’s not a good practice to use periods . in IDs, as MDN warns:
. has a special meaning in CSS (it acts as a class selector). Unless you are careful to escape it in the CSS, it won't be recognized as part of the value of an id attribute. It is easy to forget to do this, resulting in bugs in your code that could be hard to detect.
Playground
<svg class="donut-chart" width="236px" viewBox="0 0 236 236">
<g class="donut-chart-arcs">
<path class="donut-chart-path" d="M118,218.3
A100.3, 100.3 0 0 1 117.50623649597293, 218.29878462674455
L117.63984309118025,191.15911349244897
A73.16, 73.16 0 0 0 118, 191.16 z" stroke="#ffffff" stroke-width="2px" fill="#0046ad" opacity="1" tabindex="0" aria-labelledby="0-28" role="img"></path>
<path class="donut-chart-path" d="M117.50623649597293,218.29878462674455
A100.3, 100.3 0 0 1 33.32260328573676, 171.757124976093
L56.23531063194917,157.21107939432665
A73.16, 73.16 0 0 0 117.63984309118025, 191.15911349244897 z" stroke="#ffffff" stroke-width="2px" fill="#ec0439" opacity="1" tabindex="0" aria-labelledby="56-89" role="graphics-symbol" aria-roledescription="dataunit"></path>
<path class="donut-chart-path" d="M33.32260328573676,171.757124976093
A100.3, 100.3 0 0 1 63.65981518807381, 33.695585438212646
L78.36362990188914,56.5073682019904
A73.16, 73.16 0 0 0 56.23531063194917, 157.21107939432665 z" stroke="#ffffff" stroke-width="2px" fill="#1977d3" opacity="1" tabindex="0" aria-describedby="88.95"></path>
<path class="donut-chart-path" d="M63.65981518807381,33.695585438212646
A100.3, 100.3 0 0 1 173.18230621846504, 34.244384782800665
L158.25062335935098,56.907668900395784
A73.16, 73.16 0 0 0 78.36362990188914, 56.5073682019904 z" stroke="#ffffff" stroke-width="2px" fill="#7300cd" opacity="1" tabindex="0" aria-describedby="65.7"></path>
<path class="donut-chart-path" d="M173.18230621846504,34.244384782800665
A100.3, 100.3 0 0 1 117.99999999999994, 218.3
L117.99999999999996,191.16
A73.16, 73.16 0 0 0 158.25062335935098, 56.907668900395784 z" stroke="#ffffff" stroke-width="2px" fill="#aa00aa" opacity="1" tabindex="0" aria-describedby="145.55"></path>
</g>
</svg>
<div id="0-28">$0.28</div>
<div id="56-89">$56.89</div>
<div id="88-95">$88.95</div>
<div id="65-7">$65.7</div>
<div id="145-55">$145.55</div>
Related
Im having issues trying to insert svg path code into the footer of my website using the Wordpress Customizer menu. It seems Wordpress is stripping the code from:
<div class="wcpay-connect-account-page-payment-methods"><svg width="51" height="35" viewBox="0 0 51 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="50" height="34" rx="3.5" fill="white" stroke="#F3F3F3"></rect>
<path d="path...." fill="#15195A"></path>
<path d="path...." fill="#15195A"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="path...." fill="#15195A"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="path...." fill="#15195A"></path>
to:
<div class="wcpay-connect-account-page-payment-methods"></div>
Theme: Oceanwp-3.1.2
SVG Paths do load within main page content just not in the footer.
I have tried looking around for different code snippets to add into my functions file to disable the stripping of SVG tags but none seem to have worked.
Does anyone have an idea on how I could enable SVG path codes/stop them from being stripped within my footer?
Here I give code of html which not work properly, how can I get it to move smoothly?
I am happy to use jQuery if necessary.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1362px" height="219px" viewBox="0 0 1362 219" enable-background="new 0 0 1362 219" xml:space="preserve" class="header-svg-nav">
<g id="Shape_1">
<g>
<path fill="#454545" d="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z" class="header-svg-nav">
<animate attributeName="d" attributeType="XML" repeatCount="indefinite"
values="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z;
M1361.7-0.1 L124.1,0.1 L4,161.7 c0,0-9.6,21.3,0.7,37.9 c9.5,15.4,31.4,19.7,60.3,19.3
c70.7-1,109.2-28.3,161-41.9 c87.3-22.9,103,21.9,238,14c64.4-3.8,55.7-13.6,143-25 c129.3-16.8,154.8,4,273-7 c118.6-11,125.3-35,230-45 c107.5-10.2,196.2,5.9,252,20 C1361.9,89.3,1361.8,44.6,1361.7-0.1z;" begin="0s" dur="5s"/>
</path>
</g>
</g>
</svg>
An animation with easing between two path definitions can only work if they match structurally.
They must have the same number of control points and all path commands must be identical.
You cannot exchange absolute (C) commands for relative (c), or shorthand curve commands (S) for full (C).
Optional command letters (for repetitions of the same command) can be used or left out.
Whitespace can have different length or be exchanged for commas.
The reason for that is actually not that hard to understand: To compute an interim state, the renderer needs to formulate a path definition by choosing an appropriate value between the "from" and "to", for every control point. There can be no computed interim if the letters or the number of points differ.
Currently you go from
M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z
to a much longer command
M1361.7-0.1 L124.1,0.1 L4,161.7 c0,0-9.6,21.3,0.7,37.9 c9.5,15.4,31.4,19.7,60.3,19.3 c70.7-1,109.2-28.3,161-41.9 c87.3-22.9,103,21.9,238,14c64.4-3.8,55.7-13.6,143-25 c129.3-16.8,154.8,4,273-7 c118.6-11,125.3-35,230-45 c107.5-10.2,196.2,5.9,252,20 C1361.9,89.3,1361.8,44.6,1361.7-0.1z
That is much too different.
And there is a fair amount of work involved to get them to match. I don't know if Illustrator will be helpfull in that regard. It changes commands for what it deems optimal and if that happens in one command variant and not the other, easing will still not work. The only thing you can rely on is writing down the path commands in a text editor one below the other and comparing number for number, letter for letter.
The version below was worked out with Inkscape, some experience, and a lot of trial and error.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1362px" height="219px" viewBox="0 0 1362 219" enable-background="new 0 0 1362 219" xml:space="preserve" class="header-svg-nav">
<g id="Shape_1">
<g>
<path fill="#454545" d="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z" class="header-svg-nav">
<animate attributeName="d" attributeType="XML" repeatCount="indefinite"
values="M 1361.7,-0.1 124.1,0.1 4,161.7 C 4,161.7 -23.6,222.9 65,218.9 82,218.1 140.1,213.6 222.9,206.8 289.6,201.3 372.4,194.3 462.7,186.6 509.1,182.6 557.4,178.5 606.6,174.3 697.4,166.4 790.9,158.3 879.9,150.6 962.2,143.4 1040.7,136.6 1109.4,130.6 1193.6,123.2 1277.8,115.8 1362,108.4 Z;
M 1361.7,-0.1 124.1,0.1 4,161.7 C 4,161.7 -23.6,222.9 65,218.9 135.7,217.9 174.2,190.6 226,177 313.3,154.1 329,198.9 464,191 528.4,187.2 519.7,177.4 607,166 736.3,149.2 761.8,170 880,159 998.6,148 1005.3,124 1110,114 1217.5,103.8 1306.2,119.9 1362,134 Z;" begin="0s" dur="5s"/>
</path>
</g>
</g>
</svg>
I figured out a problem with SVG I couldn't solve yet. Given is a svg with multiple animations depending on each other with the begin attribute. So the animations got different ID's like 'circle' and begin tags with values like 'circle.end'. These svg is rendered / used multiple times on the page. In the first point is it not valid to have a id multiple times. At the second point all svg's doing the animation depending on circle.end when I start it with circle.beginElement() of the first svg.
So how can I start an animation depending on another animation without using id's or how can I start the animation on only one svg?
Here is a sample code
<svg>
<defs>
<path d="asdasd" id="circle-image">
<animateTransform id="circle" attributeName="transform" type="translate" from="0, 0" to="15, 0" begin="indefinite"/>
<animateTransform attributeName="transform" type="translate" from="15, 0" to="0, 0" begin="circle.end"/>
</path>
</defs>
</svg>
<svg viewBox="0 0 34 24" width="45px" height="24px" class="first">
<use xlink:href="#circle-image"/>
</svg>
<svg viewBox="0 0 34 24" width="45px" height="24px" class="second">
<use xlink:href="#circle-image"/>
</svg>
I want to somehow trigger .first #circle animation and .second #circle animation. The depending animation should only trigger within it's use element and not globally for all.
Can someone help here?
Thanks in advance
Regards Thomas
I am pretty new at editing and embedding SVG to webpages. My client is a graphic designer so he created an svg logo for his website and wanted me embed it to his nav bar.
I am also using Bootstrap and as part of the development I am using bootstrap tooltips. However, once i embed the svg and edit the co-ordinates via viewbox, I encountered a problem with one of my tooltips.
The tooltip seems to be buggy with this particular logo. The rest of them are okay but for some reason I cannot figure out how to fix this one.
I have uploaded the website today for testing purposes and you can see the issue on http://edizorac.com/
The problematic logo is the second one on the navigation bar and you can also see my code through web inspector.
Any help/recommendation is appreciated!!
Thanks in advance :)
Update:
Sorry for any inconveniences. The svg code is as follows:
<li>
<a href="#projects">
<span>
<svg version="1.2" baseProfile="tiny" x="0px" y="0px" width="70px" height="60px" viewBox="50 40 90 120" data-toggle="tooltip" title="Projects">
<polygon fill="none" stroke="#ffffff" stroke-miterlimit="10" points="33.493,81.046 96.934,46.112 88.647,82.874 57.203,117.371 52.946,86.674 99.573,74.629 81.325,117.276 37.909,101.254"/>
<polyline fill="none" stroke="#ffffff" stroke-miterlimit="10" points="96.451,81.928 114.361,106.172 112.365,112.871 82.791,113.852 "/>
<line fill="none" stroke="#ffffff" stroke-miterlimit="10" x1="95.854" y1="47.473" x2="37.909" y2="101.254"/>
</svg>
</span>
</a>
</li>
May I suggest you have a read over this and also have a look at this to help you with SVG's
Change the first line of your SVG block to:
<svg version="1.2" baseProfile="tiny" x="0px" y="0px" width="40px" height="40px" viewBox="30 47 85 70" data-toggle="tooltip" title="" data-original-title="Projects">
You made the following mistakes:
You had the height and width set incorrectly compared to the other SVG's (Height you had defined: 60px & Width you had defined 70px)
Your viewBox property was set incorrectly so the elements didn't align properly
I want to make a drawing effect of tree that looks something like this one with a progressive line like here. I would prefer using only css3 with svg/canvas and js. Do you have any ideas?
More info:
I tried to cut a tree into pieces and animate piece by piece the appearance but it's not cursive cause it's to much details on syncronizing delays and durations because every piece has a different length and so on. All of this is made without svg. I want to now if i can animate a line path.
Yes, take a look at this rendering of the Bahamas Logo using CSS 3
It describes his process, and techniques. Also you can view the source.
There are more that can be found here
Update:
Also maybe this Sencha Animator product may help?
You can do this with plain SVG. SVG provides the <animate> element for declarative animation.
What you want (as I understand it) is a line that appears as if it was drawn in front of the viewer's eyes. You can use the stroke-dasharray property for this purpose. This property defines a dash pattern using a series of values that defines the length of dashes and gaps. The strategy would be: First we have a dash that has length 0 and a gap that is at least as long as the whole path. This means we see nothing (or only the first point at the start of the path). In the end we want a dash that's at least the full length of the path. We want the dash to gradually become longer and longer until it reaches its final length (the length of the full path).
The simplest case would be:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<!-- This is the path of a spiral -->
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
<!-- This defines the animation:
The path is roughly 2305 units long, it will be drawn in 5 seconds -->
<animate from="0,2305" to="2305,0" dur="5s"
attributeName="stroke-dasharray" repeatCount="indefinite"/>
</path>
</svg>
More sophisticated things can be done using multiple values (using the values attribute) instead of one from and one to value:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
<animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite"
values="0,2305;
2000,305;
2305,0"/>
</path>
</svg>
You can specify the precise timing (when which value listed in values will be reached) using the keyTimes attribute:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
<animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite"
values="0,2305;
2000,305;
2305,0"
keyTimes="0;.9;1"/>
</path>
</svg>
See this in action on Tinkerbin.
Something similar can be done using CSS3:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
<style type="text/css">
path {
animation-name:animateDash;
animation-duration:5s;
animation-iteration-count:infinite;
}
#keyframes animateDash {
from{stroke-dasharray:0,2305}
to {stroke-dasharray:2305,0}
}
</style>
<path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
stroke-width="10" stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305"/>
</svg>
Decide for yourself which method you prefer.