Vue3-08 无障碍

文章目录

  • 基础
    • 跳过连接
    • 组织内容
    • 标题
    • 正确的使用HTML标签
  • 更多

基础

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

Vue3-08 无障碍_第1张图片

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

跳过连接

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

组织内容

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

标题

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

  • 按级别顺序嵌套标题:

  • 不要在一个章节内跳跃标题的级别
  • 使用

    来实现标题,而不是通过样式来说实现

正确的使用HTML标签

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

Vue3-08 无障碍_第2张图片

更多

可以参考Vue里面的介绍

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

你可能感兴趣的:(Vue)