外贸独立站的底层设计密码WordPress 成品站模板
当前位置:首页>WordPress资讯>WordPress 5.2 优化后台选项卡语义化,开发者需要注意下

WordPress 5.2 优化后台选项卡语义化,开发者需要注意下

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>元素。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
欢迎关注WordPress大学公众号 WPDAXUE
WordPress资讯

WordPress 5.2 将要求PHP版本最低为 5.6+

2019-4-2 10:42:04

WordPress资讯

WordPress 5.2 正式版发布,让网站更安全

2019-5-8 16:19:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索