首页 / WordPress资讯 / WordPress 5.2 优化后台选项卡语义化,开发者需要注意下
Loading收藏0

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 页面中选项卡原来的结构为:

1
2
3
4
5
6
<h2class="nav-tab-wrapper wp-clearfix"><ahref="about.php"class="nav-tab nav-tab-active">更新内容</a><ahref="credits.php"class="nav-tab">鸣谢</a><ahref="freedoms.php"class="nav-tab">您的自由</a><ahref="freedoms.php?privacy-notice"class="nav-tab">隐私</a></h2>

新的结构为:

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

如果您的插件或主题使用与Core相同的标记,您将需要更新它以保持一致性并避免将来的CSS不兼容。

请注意:如果您的插件或主题使用的项目实际上切换了页面内容的可见性,而不是链接到另一个页面,那么它们不是导航项目。在这种情况下,您不应使用ARIA选项卡或<nav>元素。

你可能还喜欢

发表评论

我们是国内最靠谱的WordPress建站团队!

专业承接WordPress网站建设及运维、WordPress主题和插件开发、汉化、安装等服务

联系电话:0773-8282430

查看所有服务项目

视频教程:点击联系我们
定制开发:点击联系我们
售后支持:点击联系我们
商务合作:点击联系我们

固话:0773-8282-430

手机:133-0773-9152

微信扫一扫,联系我们