確認テスト: CSS と JavaScript のアクセシビリティ

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

<ul>
  <li><a href="">動物</a></li>
  <li><a href="">コンピューター</a></li>
  <li><a href="">多様性と包容性</a></li>
  <li><a href="">食べ物</a></li>
  <li><a href="">薬品</a></li>
  <li><a href="">音楽</a></li>
</ul>

a {
  text-decoration: none;
  color: #666666;
  outline: none;
}

/* 上記のコードは編集しないでください。 */

/* ここにコードを追加 */

<main>
  <h1>I am the eggman</h1>

  <p>
    Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm.
    Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm
    hempen halter furl.
  </p>

  <h2>They are the eggman</h2>

  <p>
    Swab barque interloper chantey doubloon starboard grog black jack gangway
    rutters.
  </p>

  <h2>I am the walrus</h2>

  <p>
    Deadlights jack lad schooner scallywag dance the hempen jig carouser
    broadside cable strike colors.
  </p>
</main>

/* CSS を編集してアクセシビリティの問題を修正してください */

main {
  padding: 20px;
  background-color: red;
}

h1,
h2,
p {
  color: #999999;
}

h1 {
  font-size: 2vw;
}

h2 {
  font-size: 1.5vw;
}

p {
  font-size: 1.2vw;
}

<section class="preview">
  <div class="animal-list">
    <h1>動物の概要</h1>

    <p>
      以下の動物の一覧をクリックすると、その動物の説明が表示されます。
    </p>

    <ul>
      <li
        data-description="大きな反り返った角を持つ野生の山羊の一種で、ユーラシア、北アフリカ、東アフリカに生息している。">
        アイベックス
      </li>
      <li
        data-description="マナティーに似た中型の海洋哺乳類だが、尾びれはイルカのような形をしている。">
        ジュゴン
      </li>
      <li
        data-description="体長約 50～75 センチメートルで、まるで小さなカンガルーのような姿をした珍しい有袋類です。">
        クオッカ
      </li>
    </ul>
  </div>

  <div class="animal-description">
    <h2></h2>

    <p></p>
  </div>
</section>

p {
  color: purple;
  margin: 0.5em 0;
}

li {
  cursor: pointer;
}

const listItems = document.querySelectorAll("li");
const descHeading = document.querySelector(".animal-description h2");
const descPara = document.querySelector(".animal-description p");

listItems.forEach((item) => {
  item.addEventListener("mouseup", handleSelection);
});

function handleSelection(e) {
  const heading = e.target.textContent;
  const description = e.target.getAttribute("data-description");
  descHeading.textContent = heading;
  descPara.textContent = description;
}