Vue3-08 无障碍

发表于 分类于 阅读次数：

Vue3学习笔记-08 无障碍

基础

Web可访问性（a11y）是指创建可供任何人使用的网站的实践方式，无论身患某种障碍、设备老旧、网速慢、或者身处不利环境的人，都可以访问网站

关于更多a11y的内容可以参考MDN以及掘金的这篇文章。

跳过连接

在页面顶部提供一个返回首页的连接，让用户避免在多网页上反复跳转，可以使用:focus伪类来显示/隐藏这个链接，通过$refs访问DOM元素后执行focus()方法来获取焦点（a元素）

组织内容

可访问性不仅要考虑颜色对比度、字体选择、字体大小和语言，还要考虑应用程序的内容是如何组织的

标题

正确的设置页面的标题，让用户更容易预测每个部分的内容，推荐的访问性实践：

  • 按级别顺序嵌套标题：<h1> → <h6>
  • 不要在一个章节内跳跃标题的级别
  • 使用<h1>至<h6>来实现标题，而不是通过样式来说实现

正确的使用HTML标签

H5的很多标签是有语义的，例如header、nav等，它可以为屏幕阅读器提供正确的信息，除了正确使用带有语义的HTML标签外，还建议加上容易的role属性，来对不支持H5予以元素的浏览器提供支持

更多

可以参考Vue里面的介绍

a11y很重要，我从来没有真正关心过这部分内容，国内除了一些国民级的应用，恐怕也不会关注这部分内容。很可悲，但是我又无能为力