17977 | HTML 접근성 문제 종합 수정하기

문제 설명

이번 단계에서 배울 내용

접근성은 한 가지 속성만 추가해서 끝나지 않습니다. 문서 언어, 제목 구조, 이미지 설명, 입력 이름표, 실제 버튼처럼 여러 기본 원칙을 함께 지켜야 합니다.

이번 문제에서는 접근성이 부족한 짧은 문서를 살펴보고 앞에서 배운 요소를 한 번에 고칩니다.

예시

아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다.

<html lang="ko">
<body>
  <main>
    <h1>월간 보고서</h1>
    <img src="chart.png" alt="월별 매출 막대그래프">
    <label for="report-email">받을 이메일</label>
    <input id="report-email" type="email">
    <button type="submit">보고서 받기</button>
  </main>
</body>
</html>

해야 할 일

접근성 점검 페이지를 수정하세요. 문서 언어를 한국어로 지정하고, 핵심 제목, 이미지 설명, 이메일 입력 label, 제출 버튼을 올바른 HTML 요소와 속성으로 완성합니다.

완성 조건

<html>의 lang 값은 ko입니다.
페이지의 핵심 제목 <h1>을 한 개 만듭니다.
report-email이라는 id의 입력칸을 한 개 만듭니다.
type="submit"인 버튼을 한 개 만듭니다.
이메일 입력칸의 type 값은 email입니다.
제목 단계를 <h1>부터 순서대로 사용합니다.
보고서 이미지에 내용을 설명하는 alt가 있습니다.
이메일 label과 입력칸이 연결되어 있습니다.

작업 방법

에디터에서 index.html을 엽니다.
TODO 주석이 있는 부분을 중심으로 코드를 수정합니다.
미리보기에서 결과를 확인한 뒤 제출합니다.

입력 형식

별도의 입력값은 없습니다.

에디터에 준비된 index.html을 열고, 문제에서 안내하는 HTML 요소와 속성을 추가하거나 수정하세요. 브라우저 미리보기로 작성한 결과를 확인할 수 있습니다.

출력 형식

별도의 출력값은 없습니다.

수정한 index.html이 브라우저에서 정상적으로 열리고, 아래의 완성 조건을 모두 만족하면 됩니다.

참고

도움말: 문서 바깥쪽의 언어부터 확인한 뒤 제목, 이미지, 입력, 버튼 순서로 하나씩 수정하세요.