Difference between revisions of "SVG Example"
Jump to navigation
Jump to search
(→Title Element; No role) |
|||
(22 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | Note: tabindex=-1 set on all elements | |
− | + | Note: Test results are current for Chrome only -- all others need updating | |
− | + | Note: Testing performed with browse mode/virtual cursor navigation (arrows) | |
− | |||
− | |||
− | == No accessible name== | + | * VoiceOver iOS 9.3.5 - |
+ | ** does not indicate an SVG content | ||
+ | * JAWS IE 11 - | ||
+ | ** Announced: title element and text elements indicated; | ||
+ | ** Not announced: title attribute not indicated | ||
+ | * JAWS 2019 and Chrome (no role) | ||
+ | ** Announced title element; title attribute, aria-label, aria-labelledby | ||
+ | ** Not announced text element, desc element | ||
+ | * JAWS 2019 and Chrome (role img) | ||
+ | ** Not tested | ||
+ | * JAWS FF 47.01- | ||
+ | ** does not indicate any SVG | ||
+ | * NVDA FF 47.01 - | ||
+ | ** does not indicate any SVG | ||
+ | * NVDA IE 11 - | ||
+ | ** Announced: title attribute, title element, and text element indicated | ||
+ | ** | ||
+ | |||
+ | ==No role== | ||
+ | === No accessible name; No role=== | ||
<html> | <html> | ||
<svg tabindex="-1" width="300" height="110"> | <svg tabindex="-1" width="300" height="110"> | ||
Line 12: | Line 29: | ||
</html> | </html> | ||
− | == Title attribute== | + | === Title attribute; No role=== |
<html> | <html> | ||
<svg title="this is a title attribute" tabindex="-1" width="300" height="110"> | <svg title="this is a title attribute" tabindex="-1" width="300" height="110"> | ||
Line 19: | Line 36: | ||
</html> | </html> | ||
− | == Title Element== | + | === aria-label attribute; No role=== |
+ | <html> | ||
+ | <svg aria-label="this is an aria-label attribute" tabindex="-1" width="300" height="110"> | ||
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </svg> | ||
+ | </html> | ||
+ | |||
+ | === aria-labelledby attribute; no role=== | ||
+ | <html> | ||
+ | <span id="sometext"> this text is aria-labelledby -- is it announced twice?</span> | ||
+ | <svg aria-labelledby="sometext" tabindex="-1" width="300" height="110"> | ||
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </svg> | ||
+ | </html> | ||
+ | |||
+ | === Title Element; No role=== | ||
<html> | <html> | ||
<svg tabindex="-1" width="300" height="110"> | <svg tabindex="-1" width="300" height="110"> | ||
<title>This is a title element</title> | <title>This is a title element</title> | ||
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </svg> | ||
+ | </html> | ||
+ | === Title Element referred to by aria-labelledby; No role=== | ||
+ | <html> | ||
+ | <svg aria-labelledby="t1" tabindex="-1" width="300" height="110"> | ||
+ | <title id="t1">This is a title element</title> | ||
<rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
</svg> | </svg> | ||
</html> | </html> | ||
− | == | + | === desc (only) Element; no role=== |
<html> | <html> | ||
<svg tabindex="-1" width="300" height="110"> | <svg tabindex="-1" width="300" height="110"> | ||
+ | <desc>This is a desc element</desc> | ||
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </svg> | ||
+ | </html> | ||
+ | |||
+ | ===SVG with text element; no role=== | ||
+ | <html> | ||
+ | <svg tabindex="-1" width="300" height="110"> | ||
+ | <g> | ||
+ | <text x=5 y=15><tspan font-weight="bold" fill="red">This is text</tspan></text> | ||
+ | <rect width="200" height="100" style="fill:rgb(0,0,250,.5);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </g> | ||
+ | </svg> | ||
+ | </html> | ||
+ | |||
+ | ===SVG with focusable set to false; no role === | ||
+ | <html> | ||
+ | <svg tabindex="-1" focusable="false" width="300" height="110"> | ||
<rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
<text>This is text</text> | <text>This is text</text> | ||
Line 35: | Line 92: | ||
</html> | </html> | ||
− | == | + | == With role img== |
+ | === No accessible name; role img=== | ||
<html> | <html> | ||
− | <svg | + | <svg tabindex="-1" width="300" height="110" role="img"> |
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </svg> | ||
+ | </html> | ||
+ | |||
+ | === Title attribute; role img=== | ||
+ | <html> | ||
+ | <svg role="img" title="this is a title attribute" tabindex="-1" width="300" height="110"> | ||
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </svg> | ||
+ | </html> | ||
+ | |||
+ | === aria-label attribute; role img=== | ||
+ | <html> | ||
+ | <svg role="img" aria-label="this is an aria-label attribute" tabindex="-1" width="300" height="110"> | ||
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </svg> | ||
+ | </html> | ||
+ | |||
+ | === aria-labelledby attribute; role img=== | ||
+ | <html> | ||
+ | <span id="sometext2"> this text is aria-labelledby -- is it announced twice?</span> | ||
+ | <svg role="img" aria-labelledby="sometext2" tabindex="-1" width="300" height="110"> | ||
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </svg> | ||
+ | </html> | ||
+ | |||
+ | === Title Element; role img=== | ||
+ | <html> | ||
+ | <svg role="img" tabindex="-1" width="300" height="110"> | ||
+ | <title>This is a title element</title> | ||
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | </svg> | ||
+ | </html> | ||
+ | |||
+ | === desc (only) Element; no role=== | ||
+ | <html> | ||
+ | <svg tabindex="-1" width="300" height="110"> | ||
+ | <desc>This is a desc element</desc> | ||
<rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
− | |||
</svg> | </svg> | ||
</html> | </html> | ||
− | == | + | ===SVG with text element; role imge=== |
<html> | <html> | ||
− | < | + | <svg role="img" tabindex="-1" width="300" height="110"> |
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | <text>This is text</text> | ||
+ | </svg> | ||
</html> | </html> | ||
− | == | + | ===SVG with focusable set to false; role img === |
<html> | <html> | ||
− | < | + | <svg role="img" tabindex="-1" focusable="false" width="300" height="110"> |
+ | <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)"> | ||
+ | <text>This is text</text> | ||
+ | </svg> | ||
</html> | </html> | ||
[[Category:Techniques]] | [[Category:Techniques]] |
Latest revision as of 02:02, 29 November 2019
Note: tabindex=-1 set on all elements Note: Test results are current for Chrome only -- all others need updating Note: Testing performed with browse mode/virtual cursor navigation (arrows)
- VoiceOver iOS 9.3.5 -
- does not indicate an SVG content
- JAWS IE 11 -
- Announced: title element and text elements indicated;
- Not announced: title attribute not indicated
- JAWS 2019 and Chrome (no role)
- Announced title element; title attribute, aria-label, aria-labelledby
- Not announced text element, desc element
- JAWS 2019 and Chrome (role img)
- Not tested
- JAWS FF 47.01-
- does not indicate any SVG
- NVDA FF 47.01 -
- does not indicate any SVG
- NVDA IE 11 -
- Announced: title attribute, title element, and text element indicated
Contents
- 1 No role
- 1.1 No accessible name; No role
- 1.2 Title attribute; No role
- 1.3 aria-label attribute; No role
- 1.4 aria-labelledby attribute; no role
- 1.5 Title Element; No role
- 1.6 Title Element referred to by aria-labelledby; No role
- 1.7 desc (only) Element; no role
- 1.8 SVG with text element; no role
- 1.9 SVG with focusable set to false; no role
- 2 With role img
No role
No accessible name; No role
Title attribute; No role
aria-label attribute; No role
aria-labelledby attribute; no role
this text is aria-labelledby -- is it announced twice?
Title Element; No role
Title Element referred to by aria-labelledby; No role
desc (only) Element; no role
SVG with text element; no role
SVG with focusable set to false; no role
With role img
No accessible name; role img
Title attribute; role img
aria-label attribute; role img
aria-labelledby attribute; role img
this text is aria-labelledby -- is it announced twice?
Title Element; role img
desc (only) Element; no role
SVG with text element; role imge
SVG with focusable set to false; role img