Difference between revisions of "SVG Example"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
 +
Note: tabindex=-1 set on all elements
 +
 
* VoiceOver iOS 9.3.5 - does not indicate an SVG content
 
* VoiceOver iOS 9.3.5 - does not indicate an SVG content
 
* JAWS IE 11 - title element and text elements indicated; title attribute not indicated
 
* JAWS IE 11 - title element and text elements indicated; title attribute not indicated
Line 8: Line 10:
 
* NVDA IE 11 - title attribute, title element, and text element indicated
 
* NVDA IE 11 - title attribute, title element, and text element indicated
  
== No accessible name==
+
==No role==
 +
=== No accessible name; No role===
 
<html>
 
<html>
 
<svg tabindex="-1" width="300" height="110">
 
<svg tabindex="-1" width="300" height="110">
Line 15: Line 18:
 
</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 22: Line 25:
 
</html>
 
</html>
  
== aria-label attribute==
+
=== aria-label attribute; No role===
 
<html>
 
<html>
 
<svg aria-label="this is an aria-label attribute" tabindex="-1" width="300" height="110">
 
<svg aria-label="this is an aria-label attribute" tabindex="-1" width="300" height="110">
Line 29: Line 32:
 
</html>
 
</html>
  
== aria-labelledby attribute==
+
=== aria-labelledby attribute; no role===
 
<html>
 
<html>
 
<span id="sometext"> this text is aria-labelledby -- is it announced twice?</span>
 
<span id="sometext"> this text is aria-labelledby -- is it announced twice?</span>
Line 37: Line 40:
 
</html>
 
</html>
  
== Title Element==
+
=== Title Element; No role===
 
<html>
 
<html>
 
<svg tabindex="-1" width="300" height="110">
 
<svg tabindex="-1" width="300" height="110">
Line 45: Line 48:
 
</html>
 
</html>
  
== desc (only) Element==
+
=== desc (only) Element; no role===
 
<html>
 
<html>
 
<svg tabindex="-1" width="300" height="110">
 
<svg tabindex="-1" width="300" height="110">
Line 53: Line 56:
 
</html>
 
</html>
  
==SVG with text element==
+
===SVG with text element; no role===
 +
<html>
 +
<svg 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; 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)">
 +
  <text>This is text</text>
 +
</svg>
 +
</html>
 +
 
 +
== 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>
 +
<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>
 
<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; 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)">
 
   <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 61: Line 126:
 
</html>
 
</html>
  
==SVG with focusable set to false ==
+
===SVG with focusable set to false; role img ===
 
<html>
 
<html>
<svg focusable="false" width="300" height="110">
+
<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)">
 
   <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>

Revision as of 22:37, 11 June 2019

Note: tabindex=-1 set on all elements

  • VoiceOver iOS 9.3.5 - does not indicate an SVG content
  • JAWS IE 11 - title element and text elements indicated; title attribute not indicated
  • JAWS 2019 and Chrome
    • Announced title element; title attribute, aria-label, aria-labelledby
    • Not announced text element, desc element
  • JAWS FF 47.01- does not indicate any SVG
  • NVDA FF 47.01 - does not indicate any SVG
  • NVDA IE 11 - 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