프로젝트 C(반응형) - 뷰어

·2021년 4월 10일
0

스터디

목록 보기
7/14
post-thumbnail

제출


HTML
😡Try again

  • 메뉴를 나타내는 nav태그로 한번 더 감싸주세요. 이는 의미없는 뎁스를 늘리는 것과는 다릅니다. nav태그를 작성함으로써 스크린리더는 '메뉴'라는 의미가 들어나게 읽게 됩니다. 즉, 웹 접근성 조치가 되는 것입니다.
<!--No-->
      <ul class="nav active">
        <li>
          <a class="nav_link">About</a>
        </li>
        <li>
          <a class="nav_link">Work</a>
        </li>
        <li>
          <a class="nav_link">Contact</a>
        </li>
      </ul>

<!--Yes-->
    <nav>
      <ul class="nav active">
        <li>
          <a class="nav_link">About</a>
        </li>
        <li>
          <a class="nav_link">Work</a>
        </li>
        <li>
          <a class="nav_link">Contact</a>
        </li>
      </ul>
    </nav>
  • alt속성에 명시적으로 잘 작성해주셨습니다. 다만 바로 아래 라인에서 figcaption태그로 사진을 설명하고 있기 때문에 중복된 정의가 되버립니다. 그렇기에 해당 라인의 alt속성은 ''와 같이 비워 작성하는 것이 적합합니다.
<!--No-->
    <figure>
      <img class="making_img" src="./image/strawberry_cake_material.jpg" alt="밀가루, 달걀 및 재료">
      <figcaption class="contents_text img_ex">[사진1] 밀가루, 달걀 및 재료</figcaption>
    </figure>

<!--Yes-->
    <figure>
      <img class="making_img" src="./image/strawberry_cake_material.jpg" alt="">
      <figcaption class="contents_text img_ex">[사진1] 밀가루, 달걀 및 재료</figcaption>
    </figure>

0개의 댓글