微数据不能提升可访问性,须依附于合法语义容器(如),且itemprop必须在itemscope内;需匹配schema.org定义、避免与aria混用,并通过读屏器和google工具双重验证。

微数据本身不提升可访问性,也不能替代语义化标签;它只是给已有正确语义结构“贴机器可读标签”,用错位置或跳过语义基础,反而干扰读屏器行为。
微数据必须依附于合法语义容器才能生效
所有 itemprop 必须出现在带 itemscope 和 itemtype 的祖先元素内,且该祖先最好本身就是语义化标签(如 @#@#@#@#@#@#@#@#@#@0,才能被读屏器识别为可拨号链接
schema.org type 和 itemprop 必须严格匹配定义
查 schema.org 时不能只看属性名,还要确认它属于哪个 type、Expected Type 是什么、是否已废弃。同一属性名在不同 type 下含义可能完全不同。
-
telephone可用于Person或Organization,但在Event中不存在,得通过performer关联到人再取 -
price要求是数值,不能直接写<span itemprop="price">¥299</span>;正确方式是<meta itemprop="price" content="299.00">或<data itemprop="price" value="299.00">¥299</data> -
image推荐用<img itemprop="image" src="...">;若用 URL 字符串,必须包在<meta itemprop="image" content="https://...">里 - 旧地址如
http://data-vocabulary.org/Person已被 Google 淘汰,必须用https://schema.org/Person(注意末尾不加斜杠)
验证微数据是否真正起效的关键动作
别只信 Lighthouse 或 axe 报告——它们不检查微数据副作用。最可靠的方式是关闭 CSS 后,用真实读屏器(NVDA / VoiceOver)逐元素导航,观察是否出现重复播报、跳过关键信息或语义断裂。
- Google Rich Results Test 只能验证结构化数据是否被识别,无法反映可访问性影响
- 嵌套实体(如作者是
Person)必须显式声明内层itemscope和itemtype,不能靠父级“继承” - 所有
itemprop值必须对应可见文本内容,不能藏在display: none、aria-hidden="true"或仅靠aria-label补充
最容易被忽略的是:微数据写完不等于生效,它高度依赖语义结构完整性与属性路径准确性。一个没包裹在 <article></article> 里的 itemtype="https://schema.org/Article",哪怕语法全对,也会被 Google 静默丢弃。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











