SVG elements role treated differently by browsers

[giacomo-petri]

Accessibility support

I opened a PR to add an accessibility support note related to the fact that browsers are exposing SVG elements differently, causing accessibility issues:

svg elements expect an [implicit role][] of graphics-document per svg-aam. There are popular browsers that expose SVG elements with a different [semantic role][], such as image, generic or SvgRoot.

ACT Rules

• SVG element with explicit role has non-empty accessible name - 7d6734
• Image has non-empty accessible name - 23a2a8

Test cases

Test case 1

Focusable (non-nevative tabindex computed value) elements with presentational role

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>

<svg height="130" width="500">
   <defs>
      <linearGradient id="grad1">
         <stop offset="0%" stop-color="yellow"></stop>
         <stop offset="100%" stop-color="red"></stop>
      </linearGradient>
   </defs>
   <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
   <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

<svg>
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1"></circle>
  </symbol>
</svg>

• Test cases
• WPT issue
• WPT results

Test instructions

• Just run the test and check the element role

External links

• WPT results
• WPT issue
• SVG-AAM