Difference between revisions of "SVG Example"

From Level Access Web Labs
Jump to navigation Jump to search
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
* VoiceOver iOS 9.3.5 - does not indicate an SVG content
+
Note: tabindex=-1 set on all elements
−
* JAWS IE 11 - title element and text elements indicated; title attribute not indicated
+
Note: Test results are current for Chrome only -- all others need updating
−
* JAWS FF 47.01- does not indicate any SVG
+
Note: Testing performed with browse mode/virtual cursor navigation (arrows)
−
* NVDA FF 47.01 - does not indicate any SVG
 
−
* NVDA IE 11 - title attribute, title element, and text element indicated
 
  
−
== 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">
Line 27: Line 59:
 
</html>
 
</html>
  
−
==SVG with text element==
+
=== 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)">
 +
</svg>
 +
</html>
 +
 
 +
===SVG with text element; no role===
 
<html>
 
<html>
 
<svg tabindex="-1" width="300" height="110">
 
<svg tabindex="-1" width="300" height="110">
Line 35: Line 75:
 
</html>
 
</html>
  
−
==SVG with focusable set to false ==
+
===SVG with focusable set to false; no role ===
 
<html>
 
<html>
−
<svg focusable="false" width="300" height="110">
+
<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 43: Line 83:
 
</html>
 
</html>
  
−
==Delete me ==
+
== With role img==
 +
=== No accessible name; role img===
 +
<html>
 +
<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>
 
<html>
−
<div><div role="heading" aria-level="3"><div tabindex="0" id="ATHEYHRC" role="button" aria-expanded="false" aria-controls="POPDRIZB" data-accessible-id="HEDOKSBI"><div class="alG5qZX5  _335j6YvB " style="display: flex;"><div style="flex:1 1 auto; display: flex;"><svg xmlns="http://www.w3.org/2000/svg" class="_3QysL_gu  " aria-hidden="true" color="#00698c" viewBox="0 0 16 16" focusable="false" width="16px" height="16px" version="1.1"><path d="M 13.66 2.342 C 12.148 0.832 10.139 0 8 0 C 5.862 0 3.853 0.832 2.341 2.342 c -3.121 3.12 -3.121 8.195 0 11.314 C 3.853 15.167 5.862 16 8 16 c 2.139 0 4.148 -0.833 5.66 -2.344 C 16.78 10.538 16.78 5.463 13.66 2.342 Z M 12.938 12.937 C 11.619 14.256 9.867 14.981 8 14.981 c -1.866 0 -3.62 -0.726 -4.939 -2.045 c -2.723 -2.724 -2.723 -7.152 0 -9.874 C 4.38 1.745 6.134 1.018 8 1.018 c 1.867 0 3.619 0.727 4.938 2.045 C 15.663 5.785 15.663 10.215 12.938 12.937 Z" /><polygon points="12.406,7.491 8.51,7.491 8.51,3.385 7.49,3.385 7.49,7.491 3.593,7.491 3.593,8.51 7.49,8.51 7.49,12.615 8.51,12.615 8.51,8.51 12.406,8.51" /></svg><div class="_2MTueUUY"><span class="XgYryhBT  _335j6YvB ">Statements and Disclosures</span></div></div></div></div></div></div>
+
<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>
 
</html>
  
−
==Delete me with native heading ==
+
=== aria-label attribute; role img===
 
<html>
 
<html>
−
<div><h3>><div tabindex="0" id="ATHEYHRC" role="button" aria-expanded="false" aria-controls="POPDRIZB" data-accessible-id="HEDOKSBI"><div class="alG5qZX5  _335j6YvB " style="display: flex;"><div style="flex:1 1 auto; display: flex;"><svg xmlns="http://www.w3.org/2000/svg" class="_3QysL_gu  " aria-hidden="true" color="#00698c" viewBox="0 0 16 16" focusable="false" width="16px" height="16px" version="1.1"><path d="M 13.66 2.342 C 12.148 0.832 10.139 0 8 0 C 5.862 0 3.853 0.832 2.341 2.342 c -3.121 3.12 -3.121 8.195 0 11.314 C 3.853 15.167 5.862 16 8 16 c 2.139 0 4.148 -0.833 5.66 -2.344 C 16.78 10.538 16.78 5.463 13.66 2.342 Z M 12.938 12.937 C 11.619 14.256 9.867 14.981 8 14.981 c -1.866 0 -3.62 -0.726 -4.939 -2.045 c -2.723 -2.724 -2.723 -7.152 0 -9.874 C 4.38 1.745 6.134 1.018 8 1.018 c 1.867 0 3.619 0.727 4.938 2.045 C 15.663 5.785 15.663 10.215 12.938 12.937 Z" /><polygon points="12.406,7.491 8.51,7.491 8.51,3.385 7.49,3.385 7.49,7.491 3.593,7.491 3.593,8.51 7.49,8.51 7.49,12.615 8.51,12.615 8.51,8.51 12.406,8.51" /></svg><div class="_2MTueUUY"><span class="XgYryhBT  _335j6YvB ">Statements and Disclosures</span></div></div></div></div></div></h3></div>
+
<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)">
 +
</svg>
 +
</html>
 +
 
 +
===SVG with text element; role imge===
 +
<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>
 +
 
 +
===SVG with focusable set to false; role img ===
 +
<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 22:40, 11 June 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

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

This is a title element

desc (only) Element; no role

This is a desc element

SVG with text element; no role

This is text

SVG with focusable set to false; no role

This is text

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

This is a title element

desc (only) Element; no role

This is a desc element

SVG with text element; role imge

This is text

SVG with focusable set to false; role img

This is text

Retrieved from "https://labs.levelaccess.com/index.php?title=SVG_Example&oldid=6185"