css - 您可以将任意元素包装在 "figure"中以指示它是 HTML-as-image 吗?

标签 css html semantic-markup

如果您以非语义方式使用 div-soup 和 CSS 来创建视觉图片,将其全部包装在 <figure> 中是否有意义?元素来指​​示内容是非语义的?

更多信息:我正在使用一组具有内联样式的嵌套 DIV 和 SPAN 来绘制条形图。 (我知道 SVG 是一种更好的方法,但是按照我的设计要求使 SVG 响应基于百分比的尺寸是不可行的。)另外,我还制作了图表的屏幕阅读器可访问的文本摘要.但我不希望屏幕阅读器在视觉版本上出错。

最佳答案

我会说这是对 figure 的可接受使用。

The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.

<子> Source , 强调我的

img 的 ARIA Angular 色添加到 figure 可能会进一步改进标记。

An img represents a single graphic within a document, whether or not it is formed by a collection of drawing objects.

<子> Source , 强调我的

关于css - 您可以将任意元素包装在 "figure"中以指示它是 HTML-as-image 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43979987/

相关文章:

html - 如何在所有跨浏览器中为 HTML 标签类型 ="range"设计独特的 CSS 布局?

css - 样式的字体粗细不起作用。任何想法 !

javascript - 具有 100% 高度的正文和 html 不会随子 div 展开

HTML 5 文档大纲算法

javascript - 使用 jQuery、+= 和 -= 支持设置 css3 转换属性

html - CSS 修复对浏览器窗口有异常影响

java html解析器多页表

html - 动态宽度文本框

html - 带有标题和副标题的语义导航链接

html - W3C 是否允许显示 <h#> 元素 :inline;?