WordPress 管理后台的一些Tab选项卡不是真正的ARIA选项卡 – 它们实际上是用h2标题包装的链接,并且样式看起来像ARIA选项卡。但由于它们只是导航菜单,因此WordPress 5.2会相应地更改其标记。这样,辅助技术将对它们做出正确的反应。说到这里,我们一起来科普下什么是 ARIA?
WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。
而ARIA就是可以让屏幕阅读器准确识别网页中的内容,变化,状态的技术规范,可以让盲人这类用户也能无障碍阅读!
@:http://www.zhangxinxu.com/wordpress/?p=2277
也就是通过语义化让一些辅助设备可以正确识别和操作的改进。
具体的更改如下:
- 将包装<h2>更改为<nav>元素。值得记住的是,<nav>元素也定义了ARIA标识。
- 为<nav>元素添加aria-label,以便可以将它们与页面中的其他<nav>元素区分开来
- 调整Credits页面中的标题级别
比如 关于WordPress 页面中选项卡原来的结构为:
<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>
新的结构为:
<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不兼容。
请注意:如果您的插件或主题使用的项目实际上切换了页面内容的可见性,而不是链接到另一个页面,那么它们不是导航项目。在这种情况下,您不应使用ARIA选项卡或<nav>元素。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。