freeCodeCamp

4.9 KiB

Raw Blame History

id	challengeType	videoUrl	forumTopicId	localeTitle
587d778d367417b2b2512aaa	0	https://scrimba.com/c/cJ8QGkhJ	301020	使用自定义 CSS 让元素仅对屏幕阅读器可见

Description

到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。然而，如果我们需要在页面中添加一些只对屏幕阅读器可见的内容时，CSS 可以提升页面的可访问性。当信息以可视化形式（如：图表）展示，而屏幕阅读器用户需要一种替代方式（如：表格）来获取信息时，就会出现这种情况。CSS 被用来将这些仅供屏幕阅读器使用的信息定位到浏览器可见区域之外。举个例子：

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

注意：
下面的 CSS 代码与上面的结果不同：

display: none;或visibility: hidden;会把内容彻底隐藏起来，对于屏幕阅读器也不例外。
如果把值设置为 0px，如width: 0px; height: 0px;，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。

Instructions

Camper Cat 为他的训练页面创建了一个十分酷炫的条形图，并将数据放入表格中，供屏幕阅读器用户使用。表格已经有了一个sr-only类，但是还没有添加 CSS 规则。请设置position的值为 absolute，left 的值为 -10000px，width与height的值为 1px。

Tests

tests:
  - text: '<code>sr-only</code>类中的<code>position</code>属性的值应为 absolute。'
    testString: assert($('.sr-only').css('position') == 'absolute');
  - text: '<code>sr-only</code>类中的<code>left</code>属性的值应为 -10000px。'
    testString: assert($('.sr-only').css('left') == '-10000px');
  - text: '<code>sr-only</code>类中的<code>width</code>属性的值应为 1px。'
    testString: assert(code.match(/width:\s*?1px/gi));
  - text: '<code>sr-only</code>类中的<code>height</code>属性的值应为 1px。'
    testString: assert(code.match(/height:\s*?1px/gi));

Challenge Seed

<head>
  <style>
  .sr-only {
    position: ;
    left: ;
    width: ;
    height: ;
    top: auto;
    overflow: hidden;
  }
  </style>
</head>
<body>
  <header>
    <h1>Training</h1>
    <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>
  <section>
    <h2>Master Camper Cat's Beginner Three Week Training Program</h2>
    <figure>
      <!-- Stacked bar chart of weekly training-->
      <p>[Stacked bar chart]</p>
      <br />
      <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
    </figure>
    <table class="sr-only">
      <caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
      <thead>
        <tr>
          <th></th>
          <th scope="col">Stealth &amp; Agility</th>
          <th scope="col">Combat</th>
          <th scope="col">Weapons</th>
          <th scope="col">Total</th>                                        
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Week One</th>
          <td>3</td>
          <td>5</td>
          <td>2</td>
          <td>10</td>
        </tr>
        <tr>
          <th scope="row">Week Two</th>
          <td>4</td>
          <td>5</td>
          <td>3</td>
          <td>12</td>
        </tr>
        <tr>
          <th scope="row">Week Three</th>
          <td>4</td>
          <td>6</td>
          <td>3</td>
          <td>13</td>
        </tr>
      </tbody>
    </table>
  </section>
  <section id="stealth">
    <h2>Stealth &amp; Agility Training</h2>
    <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
    <article><h3>No training is NP-complete without parkour</h3></article>
  </section>
  <section id="combat">
    <h2>Combat Training</h2>
    <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
    <article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
  </section>
  <section id="weapons">
    <h2>Weapons Training</h2>
    <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
    <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
  </section>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solution required

4.9 KiB Raw Blame History Unescape Escape