lucky 的学习笔记(应用无障碍)

lucky 的学习笔记(应用无障碍)
0

1、添加替代图像的文本:img src="importantLogo.jpeg" alt="Company logo">,如果是背景图片,alt 属性值为空,即 alt=""

2、音频内容:

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg" />
</audio>

3、 figure 标签以及与之相关的 figcaption 标签提高图片 img 的可访问性。

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption> 图片下方的备注
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

4、label 标签提高表单的可访问性
之前学习了:

<label for="indoor">
  <input id="indoor" type="radio" name="indoor-outdoor" checked>Indoor
</label>

现在有另一种方式:

<label for="indoor">Indoor</label>
  <input type="radio" id="indoor" name="indoor">

5、fieldsetlegend 提高单选按钮的可访问性

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

6、时间选择器

<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">

7、timedatetime 标签让时间标准化

<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>

8、仅对屏幕阅读器可见

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

9、 HTML 提供 accesskey 属性,用于指定激活标签或者使标签获得焦点的快捷键,这可以使键盘用户的导航更加有效。
<button accesskey="b">Important Button</button>

10、tabindex 使元素获得焦点,值可以是零、正整数、负整数, 焦点将按照指定的 tabindex 的值(如:2,3 等)的顺序进行移动,直到回到默认的或 tabindex 值为 0 的标签上,如此循环。

<div tabindex="0">I need keyboard focus!</div>