freeCodeCamp刷题总结（三）

一：应用无障碍

HTML5 添加了诸如main、header、footer、nav、article、section等大量新标签，

1、介绍H5中的标签：

article是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。
article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用div。
nav也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。
footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。

<header>
//头部
	<nav>
      <ul>
        <li><a href="#stealth">Stealth &amp; Agility</a></li>
        <li><a href="#combat">Combat</a></li>
        <li><a href="#weapons">Weapons</a></li>
      </ul>
    </nav>
<header>

<main>
//主体
	<section id="stealth">
      <h2>Stealth &amp; Agility Training</h2>
      <article><h3>No training is NP-complete without parkour</h3></article>
    </section>
	<article>
	   <p>The internet is littered varying opinions on nutritional paradigms,
	    trifectathat is lasagna...</p>
	</article>
</main>


<footer>&copy; 2016 Camper Cat </footer>//尾部

audio标签用于呈现音频内容，它也具有语义化特性。可以在audio上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。
audio支持controls属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。controls属性是一个布尔属性，只要这个属性出现在audio标签中，浏览器就会开启播放控件。

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

figure标签以及与之相关的figcaption标签。它们一起用于展示可视化信息（如：图片、图表）及其标题； 为屏幕阅读器用户提供简要的说明 （为加载不出的图片做简要说明）

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

单选按钮通常成组出现，用户必须其中选择一项，因此如何解决：
使用fieldset标签将单选按钮组包含在里面就可以实现这个目的，通常还会使用legend标签来为单选按钮组提供文字说明

<!-- Add your code below this line -->
      <fieldset>
        <legend>What level ninja are you?</legend>
        <input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
      </fieldset>
      <!-- Add your code above this line -->

HTML5 引入了date类型来创建时间选择器。依赖于浏览器的支持，当点击input标签时，时间选择器会显示出来

<label for="pickdate">Preferred Date:</label>
<input type="date" id="pickdate">

（可以直接在输入框内选择时间，非常的方便~ 如下图：）

HTML5还引入了time标签与datetime属性来标准化时间。time是一个行内标签，用于在页面中呈现日期或时间，而datetime属性保存了日期的有效格式，辅助设备可以访问这个值。

<p>Posted by: Sub-Zero on <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time></p>

（通过标准化时间格式，辅助设备依然可以获取准确的时间和日期；但是在页面中是看不到的。如下图：）

自定义 CSS 让元素仅对屏幕阅读器可见，如果我们需要在页面中添加一些只对屏幕阅读器可见的内容时，CSS 可以提升页面的可访问性。CSS 被用来将这些仅供屏幕阅读器使用的信息定位到浏览器可见区域之外。
————————————————————————————————
不可行的（会让屏幕阅读器也忽视）：
display: none;或visibility: hidden;会把内容彻底隐藏起来，屏幕阅读器也看不到。
如果把值设置为 0px，如width: 0px; height: 0px;，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。
可行：

.ou {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden; ///超出范围的隐藏
  }

使用高对比度文本提高可读性
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的，其范围是从相同颜色的 1 : 1（无对比度）到白色与黑色的最高对比度 21 : 1。

body {
    color: #636363;
    background-color: #FFF;
  }

HTML 提供accesskey属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加有效。
给元素添加 accesskey 属性让用户使用指定快捷键使标签获得焦点：
accesskey=“自定义值”

<a href="" accesskey="h">使用shift+alt+h 可以直接获得该焦点</a><br />
<button accesskey="d" >按钮</button> ///使用shift+alt+d 使按钮获得焦点；

（第三部分完结）