8.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d778d367417b2b2512aaa	Зробіть елементи видимими тільки програми екранного зчитування за допомогою Custom CSS	0	https://scrimba.com/c/cJ8QGkhJ	301020	make-elements-only-visible-to-a-screen-reader-by-using-custom-css

--description--

Ви помітили, що в жодному з попередніх завдань, пов'язаних із доступністю, не використовувався CSS? Це демонструє важливість використання логічної структури документа і семантично змістовних теґів у вашому контенті перед тим, як вводити візуальний дизайн.

Однак магія CSS також може поліпшити доступність вашої сторінки, якщо ви маєте на меті приховати вміст, призначений виключно для читання з екрану. Це трапляється, коли інформація міститься у візуальному форматі (наприклад, на графіку), але користувачі програми для читання потребують альтернативної подачі (у таблиці), щоб мати до неї доступ. CSS використовується для розміщення елементів екрану тільки для читання з візуальної зони вікна браузера.

Ось приклад правил CSS, які це здійснюють:

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

Примітка: Наступні підходи CSS НЕ будуть робити те саме:

display: none; чи visibility: hidden; приховують вміст від усіх, включаючи користувачів програми зчитування з екрана
Нульові значення для піксельних розмірів, зокрема width: 0px; height: 0px; вилучають цей елемент з вашого документа, тобто програма для читання з екрана буде його ігнорувати

--instructions--

Camper Cat створив просто чудову гістограму для своєї навчальної сторінки, а для користувачів із вадами зору подав інформацію у таблиці. Таблиця вже має клас sr-only, але правила CSS ще не заповнені. Надайте елементу position значення absolute, елементу the left - значення -10000px, а елементам width і height - значення 1px.

--hints--

Ваш код має встановити властивість position класу sr-only на значення absolute.

assert($('.sr-only').css('position') == 'absolute');

Ваш код має встановити властивість left класу sr-only на значення -10000px.

assert($('.sr-only').css('left') == '-10000px');

Ваш код має встановити властивість width класу sr-only на значення 1 піксель.

assert(code.match(/width:\s*?1px/gi));

Ваш код має встановити властивість height класу sr-only на значення 1 піксель.

assert(code.match(/height:\s*?1px/gi));

--seed--

--seed-contents--

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

--solutions--

<head>
  <style>
  .sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    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>

8.5 KiB Raw Blame History Unescape Escape