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

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

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


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

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

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

4、label 标签提高表单的可访问性

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


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

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

    <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>


<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>


.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>