Fork me on GitHub

提升键盘可访问性和AT可访问性

概述

很多地方比如官网中需要提升 html 的可访问性,我参考 element-ui,总结了一套提升可访问性的方案,记录下来,供以后开发时参考,相信对其他人也有用。

可访问性

可访问性基本上分为 2 类:

  1. 键盘可访问性:要求页面上的所有可交互的地方均可通过键盘操作。
  2. AT可访问性:AT 是 Assistive Technologies 的简写,主要是方便残障用户和网站内容进行交互。

键盘可访问性

键盘可访问性有很多内容,但是我觉得主要实现如下 2 点即可:

1.可以使用 tab 来获取焦点。这其中用到的主要方法是 tabindex

  • tabindex等于 -1:不能使用 tab 键获取焦点,如果元素是隐藏的,那么它的 tabindex 必须设置为 -1;
  • tabindex等于 0:能使用 tab 键获取焦点,适用于无顺序的内容
  • tabindex等于 xx:能使用 tab 键获取焦点,xx 的值越大,越在前面

示例如下:

<!-- 没有tabindex 属性的话, 这些 <span> 元素不会被键盘focus中 -->
<ul>
  <li tabindex="0">
    Include decorative fruit basket
  </li>
  <li tabindex="0">
    Include singing telegram
  </li>
  <li tabindex="0">
    Require payment before delivery
  </li>
</ul>

需要说明的是:html 里面的 a、button、form 标签即使不添加 tabindex 也能用 tab 键获取焦点。

2.可以使用上、下、左、右键移动选项。比如一个 popover 组件,弹出的内容是可供选择的,那么需要可以使用上、下键进行选择,方法是监听键盘的上、下键,然后监听 enter 键进行选择。示例如下:

<template>
  <popper
    trigger="clickToOpen"
    :options="{
      placement: 'top',
      modifiers: { offset: { offset: '0,10px' } }
    }">
    <ul
      class="popper"
      @keydown.down.prevent="navigateOptions('next')"
      @keydown.up.prevent="navigateOptions('prev')"
      @keydown.enter.prevent="selectOption"
    >
      <li tabindex="0">
        Include decorative fruit basket
      </li>
      <li tabindex="0">
        Include singing telegram
      </li>
      <li tabindex="0">
        Require payment before delivery
      </li>
    </ul>

    <button slot="reference">
      Reference Element
    </button>
  </popper>
</template>

<script>
import Popper from 'vue-popperjs';
import 'vue-popperjs/dist/vue-popper.css';

export default {
  components: {
    'popper': Popper
  },
  methods: {
    navigateOptions() {
      // ...
    },
    selectOption() {
      // ...
    },
  },
}
</script>

AT 可访问性

AT 可访问性我觉得也主要分为以下 2 点:

1.尽量使用语义化标签;图像使用 alt 属性描述图像内容;视频使用 title 属性。

2.用 role 来标记这一块 html 是用来干什么的,文档在这里:文档。示例如下:

<div id="main" role="main">
  <h1>Avocados</h1>
  <!-- main section content -->
</div>

我觉得如下 role 一定需要标出来:

navigation、main、article、dialog、search、img、banner、button

如果希望更进一步,可以参考 ARIA文档 使用 ARIA。

posted @ 2019-12-24 09:19  馒头加梨子  阅读(268)  评论(2编辑  收藏  举报