SVG example with image fallback

Example link01 - a link on an ellipse Obtain carbon elsewhere? Start Energy from light? Energy from light? Energy from inorganic oxidation? Energy from inorganic oxidation? Autotroph Heterotroph Photoautotroph Chemoautotroph Chemoheterotroph Photoheterotroph No Yes Yes Yes Yes Yes No No No No

These categories are related as follows:

venn diagram depicting content category relationships

Sectioning content, heading content, phrasing content, interactive content and embedded content are all types of flow content. A subset of metadata content is also flow content. Embedded content is also phrasing content. Subsets of interactive and metadata content are phrasing content. A subset of the interactive content which is phrasing content is also embedded content.

Code:

<object data="http://dev.w3.org/html5/spec/images/content-venn.svg" height="288" width="1000" role="img" aria-label="Venn diagram depicting HTML content category relationships.">
<img src="http://dev.w3.org/html5/spec/images/content-venn.png" alt="Venn diagram depicting HTML content category relationships."></object>

Ad hoc testing notes

Appears to work as expected in Firefox using NVDA and JAWS. In IE the object and SVG is ignored by JAWS, while NVDA announces the image but not the label. Using VoiceOver and Safari on iPad it works as expected.