Difference between revisions of "SVG Example"

From Level Access Web Labs
Jump to navigation Jump to search
(SVG with text element; no role)
(SVG with text element; no role)
Line 70: Line 70:
 
<html>
 
<html>
 
<svg tabindex="-1" width="300" height="110">
 
<svg tabindex="-1" width="300" height="110">
   <text x=5 y=10><tspan font-weight="bold" fill="red">This is text</tspan></text>
+
   <text x=5 y=15><tspan font-weight="bold" fill="red">This is text</tspan></text>
 
  </svg>
 
  </svg>
 
</html>
 
</html>

Revision as of 01:35, 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

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