Können Sie beliebige Elemente in eine "Figur" einfügen, um anzuzeigen, dass es HTML-als-Bild ist?

Question

Wenn Sie div-soup und CSS auf nicht-semantische Weise verwenden, um ein visuelles Bild zu erstellen, macht es Sinn, alles in ein <figure>-Element zu packen, um anzuzeigen, dass der Inhalt nicht-semantisch ist?

Weitere Informationen: Ich verwende eine Reihe von geschachtelten DIVs und SPANs mit Inline-Stilen, um ein Balkendiagramm zu zeichnen. (Ich weiß, dass SVG ein besserer Weg ist, dies zu tun, aber es ist nicht machbar, SVG mit prozentualen Dimensionen so ansprechend zu gestalten, wie mein Entwurf es erfordert.) Außerdem habe ich eine Screenreader-zugängliche Textzusammenfassung des Diagramms erstellt . Aber ich möchte nicht, dass Screenreader über die visuelle Version stolpern.

Answer 1

Ich würde sagen, dass dies eine akzeptable Verwendung von figure ist.

Die Figur Element stellt eine Strömungsgehalt, gegebenenfalls mit einem caption, dh -Selbstversorger (wie ein kompletter Satz) und typischerweise als eine einzelne Einheit aus dem Hauptstrom des referenzierten Dokument.

Das Element kann somit Abbildungen, Diagramme verwendet werden, eine ARIA Rolle Fotos, Codelisten, usw.

_{Source, Hervorhebung von mir}

zu annotieren Hinzufügen von img zu figure könnte die Markup weiter verbessern.

Ein img stellt eine einzelne Grafik in einem Dokument, , ob oder nicht es durch eine Sammlung von Zeichenobjekten gebildet wird.

_{Source, Hervorhebung von mir}