Difference between revisions of "SVG Example"

From Level Access Web Labs
Jump to navigation Jump to search
Line 11: Line 11:
 
   <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>
  
<svg tabindex="-1" width="300" height="110">
+
== Title attribute==
 +
<html>
 +
<svg 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)">
 
   <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)">
 
  </svg>
 
  </svg>
 +
</html>
  
 +
== aria-label attribute==
 +
<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>
 
</html>
  
== Title attribute==
+
== aria-labelledby attribute==
 
<html>
 
<html>
<svg title="this is a title attribute" tabindex="-1" width="300" height="110">
+
<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)">
 
   <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)">
 
  </svg>
 
  </svg>
Line 29: Line 39:
 
<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>
 +
 +
== desc (only) Element==
 +
<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>
Line 48: Line 66:
 
  </svg>
 
  </svg>
 
</html>
 
</html>
 
  
 
[[Category:Techniques]]
 
[[Category:Techniques]]

Revision as of 22:28, 11 June 2019

  • 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 - title element and title attribute, no text 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 accessible name

Title attribute

aria-label attribute

aria-labelledby attribute

this text is aria-labelledby -- is it announced twice?

Title Element

This is a title element

desc (only) Element

This is a desc element

SVG with text element

This is text

SVG with focusable set to false

This is text