什么是 ARIA无障碍网页应用？WordPress 5.2后台采用了

WordPress 管理后台的一些Tab选项卡不是真正的ARIA选项卡 – 它们实际上是用h2标题包装的链接，并且样式看起来像ARIA选项卡。但由于它们只是导航菜单，因此WordPress 5.2会相应地更改其标记。这样，辅助技术将对它们做出正确的反应。说到这里，我们一起来科普下什么是 ARIA？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html

而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html

@：http://www.zhangxinxu.com/wordpress/?p=2277文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html

也就是通过语义化让一些辅助设备可以正确识别和操作的改进。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html

具体的更改如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html

• 将包装<h2>更改为<nav>元素。值得记住的是，<nav>元素也定义了ARIA标识。
• 为<nav>元素添加aria-label，以便可以将它们与页面中的其他<nav>元素区分开来
• 调整Credits页面中的标题级别

比如 关于WordPress 页面中选项卡原来的结构为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html

1
2
3
4
5
6

<h2 class="nav-tab-wrapper wp-clearfix"> 
	<a href="about.php" class="nav-tab nav-tab-active">更新内容</a> 
	<a href="credits.php" class="nav-tab">鸣谢</a> 
	<a href="freedoms.php" class="nav-tab">您的自由</a> 
	<a href="freedoms.php?privacy-notice" class="nav-tab">隐私</a> 
</h2>

新的结构为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html

1
2
3
4
5
6

<nav class="nav-tab-wrapper wp-clearfix" aria-label="Secondary menu"> 
	<a href="about.php" class="nav-tab nav-tab-active">更新内容</a> 
	<a href="credits.php" class="nav-tab">鸣谢</a> 
	<a href="freedoms.php" class="nav-tab">您的自由</a> 
	<a href="freedoms.php?privacy-notice" class="nav-tab">隐私</a> 
</nav>

如果您的插件或主题使用与Core相同的标记，您将需要更新它以保持一致性并避免将来的CSS不兼容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html

请注意：如果您的插件或主题使用的项目实际上切换了页面内容的可见性，而不是链接到另一个页面，那么它们不是导航项目。在这种情况下，您不应使用ARIA选项卡或<nav>元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/11583.html