信息可传达性应用

相较于旧版题库，这部分是全新的内容，加入了很多HTML5的新内容。其中包括：

• 基本的内容有：img元素中alt属性的设置，包括当图片仅做装饰作用时设置空alt属性；h2-h6元素的应用
• 新的语义化标签，如main, section, nav, header, footer, article
• figure和figcaption的搭配使用
• fieldset和legend的搭配使用
• label和for属性的搭配使用
• 新添加的input类型，如date
• 新添加的标签，如time及其datetime属性
• 网页设计中的实际操作设置，如accesskye属性设置快捷键，tabindex属性设置tab切换顺序
• 关于颜色在传递信息这一功能上的应用
  • 文本和背景应呈现高对比度
  • 从视障人士的角度出发，应注意避免将颜色作为强调重要信息的唯一方式
  • 避免使用相近的颜色分别作为文本颜色和背景颜色

---

以下是这一部分的习题解答：

Introduction to the Applied Accessibility Challenges

• Add a Text Alternative to Images for Visually Impaired Accessibility

  <img src="doingKarateWow.jpeg" alt="A Camper Cat is doing karate">

• Know When Alt Text Should be Left Blank

  <img src="samuraiSwords.jpeg" alt="">

• Use Headings to Show Hierarchical Relationships of Content

  <h1>How to Become a Ninja</h1>
  <main>
    <h2>Learn the Art of Moving Stealthily</h2>
    <h3>How to Hide in Plain Sight</h3>
    <h3>How to Climb a Wall</h3>
  
    <h2>Learn the Art of Battle</h2>
    <h3>How to Strengthen your Body</h3>
    <h3>How to Fight like a Ninja</h3>
  
    <h2>Learn the Art of Living with Honor</h2>
    <h3>How to Breathe Properly</h3>
    <h3>How to Simplify your Life</h3>
  </main>

• Jump Straight to the Content Using the main Element

  <header>
    <h1>Weapons of the Ninja</h1>
  </header>
  <main>
  
  </main>
  <footer></footer>

• Wrap Content in the article Element

  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>

• Make Screen Reader Navigation Easier with the header Landmark

  <header>
    <h1>Training with Camper Cat</h1>
  </header>

• Make Screen Reader Navigation Easier with the nav Landmark

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

• Make Screen Reader Navigation Easier with the footer Landmark

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

• Improve Accessibility of Audio Content with the audio Element

  <audio controls>
    <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg" >
  </audio>

• Improve Chart Accessibility with the figure Element

  <figure>
    <!-- Stacked bar chart will go here -->
    <br>
    <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
  </figure>

• Improve Form Field Accessibility with the label Element

  <label for="email">Email:</label>
  <input type="text" id="email" name="email">

• Wrap Radio Buttons in a fieldset Element for Better Accessibility

  <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 an Accessible Date Picker

  <input type="date" id="pickdate" name="date">

• Standardize Times with the HTML5 datetime Attribute

  <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>

• Make Elements Only Visible to a Screen Reader by Using Custom CSS

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

• Improve Readability with High Contrast Text

  <style>
  body {
    color: #636363;
    background-color: #FFF;
  }
  </style>

• Avoid Colorblindness Issues by Using Sufficient Contrast

  <style>
  body {
    color: hsl(0, 55%, 15%);
    background-color: hsl(120, 25%, 55%);
  }
  </style>

• Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information

  <style>
  button {
    color: #003366;
    background-color: #FFFF33;
    font-size: 14px;
    padding: 10px;
  }
  </style>

• Give Links Meaning by Using Descriptive Link Text

  Click here for <a href="">information about batteries</a> </p>

• Make Links Navigatable with HTML Access Keys

      <h2><a id="first" href="" accesskey="g">The Garfield Files: Lasagna as Training Fuel?</a></h2>
  ... ...
      <h2><a id="second" href="" accesskey="c">Is Chuck Norris a Cat Person?</a></h2>

• Use tabindex to Add Keyboard Focus to an Element

  <style>
    p:focus {
      background-color: yellow;
    }
    p:focus {
      tabindex: 0;
    }
  </style>
  ... ...
  <p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>

• Use tabindex to Specify the Order of Keyboard Focus for Several Elements

  <input tabindex="1" type="search" name="search" id="search">
  <input tabindex="2" type="submit" name="submit" value="Submit" id="submit">