Reporch
문제
랭킹
포럼
챌린지
소개
IDE
로그인
회원가입
웹 접근성 | Reporch
목록
학습 경로
웹 접근성
문서 구조, 키보드, 폼, 상태 알림과 대화상자를 모두가 사용할 수 있게 만듭니다.
0 / 16
0%
01
문서의 주 언어 알려 주기
5
## 이번 단계에서 배울 내용 화면 읽기 프로그램은 `html` 요소의 `lang` 속성을 보고 발음 언어를 정합니다. 한국어 문서에는 `lang="ko"`를 사용합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <!doctype html> <html lang="en"> ... </html> ``` ## 해야 할 일 한국어로 작성된 문서의 html 요소에 올바른 언어를 지정하세요. ## 완성 조건 - html 요소에 lang 속성이 있습니다. - lang 값은 ko입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
02
제목 단계를 순서대로 구성하기
5
## 이번 단계에서 배울 내용 제목은 글자 크기가 아니라 문서 구조를 나타냅니다. 페이지 제목은 `h1`, 그 아래 구역은 `h2`처럼 단계를 건너뛰지 않습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <h1>여행 안내</h1> <h2>준비물</h2> <h3>의류</h3> ``` ## 해야 할 일 페이지 제목 아래의 두 구역 제목을 올바른 제목 단계로 고치세요. ## 완성 조건 - 첫 제목은 h1입니다. - 두 구역 제목은 h2입니다. - 제목 단계가 건너뛰지 않습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
03
랜드마크로 페이지 영역 나누기
5
## 이번 단계에서 배울 내용 `header`, `nav`, `main`, `footer` 같은 랜드마크 요소는 페이지의 큰 영역을 알려 줍니다. 보조 기술 사용자는 원하는 영역으로 빠르게 이동할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <header>...</header> <nav>...</nav> <main>...</main> <footer>...</footer> ``` ## 해야 할 일 일반 div로 된 네 영역을 역할에 맞는 header, nav, main, footer로 바꾸세요. ## 완성 조건 - header, nav, main, footer가 각각 한 개 있습니다. - 기존 글과 링크는 그대로 유지합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
04
입력창과 label 연결하기
5
## 이번 단계에서 배울 내용 입력창의 label은 무엇을 입력해야 하는지 알려 주고 클릭 영역도 넓혀 줍니다. `label for` 값과 `input id` 값을 같게 연결합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <label for="email">이메일</label> <input id="email" type="email"> ``` ## 해야 할 일 이메일 label과 입력창을 `email` 값으로 연결하세요. ## 완성 조건 - label의 for는 email입니다. - input의 id는 email입니다. - label과 입력창이 연결됩니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
05
클릭 동작에 button 사용하기
5
## 이번 단계에서 배울 내용 기본 `button`은 키보드 포커스와 Enter/Space 동작을 이미 지원합니다. 클릭 기능을 div로 만들면 이런 동작을 직접 다시 구현해야 합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <button type="button">메뉴 열기</button> ``` ## 해야 할 일 클릭용 div를 `type="button"`인 button 요소로 바꾸세요. ## 완성 조건 - 동작 요소가 button입니다. - type은 button입니다. - 표시 글은 메뉴 열기입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
06
이미지에 의미 있는 대체 텍스트 작성하기
5
## 이번 단계에서 배울 내용 `alt`는 이미지를 볼 수 없을 때 같은 정보를 전달합니다. 파일 이름이 아니라 이미지가 문맥에서 전하는 의미를 간결하게 씁니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <img src="chart.png" alt="월별 가입자 수 막대그래프"> ``` ## 해야 할 일 강의 진도를 나타내는 이미지에 `HTML 강의 진도 80퍼센트`라는 대체 텍스트를 추가하세요. ## 완성 조건 - img에 alt 속성이 있습니다. - alt가 이미지의 정보를 정확히 설명합니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
07
목적을 알 수 있는 링크 문구 쓰기
5
## 이번 단계에서 배울 내용 링크만 따로 읽어도 어디로 이동하는지 알 수 있어야 합니다. `여기`나 `자세히` 대신 대상과 행동을 함께 씁니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <a href="/schedule">강의 일정 확인하기</a> ``` ## 해야 할 일 `여기` 링크 문구를 `CSS 강의 계획 보기`로 바꾸세요. ## 완성 조건 - 링크 주소 /css-plan은 유지합니다. - 링크 문구만으로 목적을 알 수 있습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
08
키보드 포커스를 눈에 보이게 만들기
5
## 이번 단계에서 배울 내용 키보드 사용자는 현재 어느 요소에 있는지 포커스 표시로 확인합니다. `:focus-visible`에 분명한 outline을 제공하고 무조건 제거하지 않습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html .button:focus-visible { outline: 3px solid royalblue; outline-offset: 3px; } ``` ## 해야 할 일 링크가 키보드 포커스를 받으면 `3px solid royalblue` 외곽선과 `3px` 간격이 보이게 하세요. ## 완성 조건 - focus-visible 상태에 3px 외곽선이 있습니다. - outline-offset은 3px입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
09
키보드로도 동작하는 토글 만들기
5
## 이번 단계에서 배울 내용 네이티브 button에 click 이벤트를 연결하면 마우스 클릭뿐 아니라 Enter와 Space 키도 동작합니다. 별도의 keydown 흉내보다 기본 동작을 활용하세요. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html button.addEventListener('click', () => { panel.hidden = !panel.hidden; }); ``` ## 해야 할 일 button의 click 이벤트로 도움말 패널의 hidden 상태를 전환하세요. 키보드 Enter로도 열려야 합니다. ## 완성 조건 - 동작 요소는 button입니다. - click 이벤트로 hidden을 토글합니다. - Enter 키로 도움말이 보입니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
10
펼침 상태를 aria-expanded로 알리기
5
## 이번 단계에서 배울 내용 열고 닫는 버튼은 현재 상태를 `aria-expanded`로 알려야 합니다. 닫힘은 `false`, 열림은 `true`이며 실제 패널 상태와 함께 바뀌어야 합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <button aria-expanded="false" aria-controls="details">상세 보기</button> ``` ## 해야 할 일 상세 버튼을 누르면 패널을 열고 aria-expanded를 true로 바꾸세요. ## 완성 조건 - 버튼이 details 패널을 aria-controls로 가리킵니다. - 처음 aria-expanded는 false입니다. - 클릭 후 true가 되고 패널이 보입니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
11
동적 상태를 라이브 영역으로 알리기
5
## 이번 단계에서 배울 내용 화면 일부의 글만 바뀌면 화면 읽기 프로그램이 변화를 놓칠 수 있습니다. 일반 상태 메시지는 `aria-live="polite"` 영역에서 알립니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <p id="status" aria-live="polite"></p> ``` ## 해야 할 일 저장 버튼을 누르면 라이브 상태 영역에 `저장되었습니다.`를 표시하세요. ## 완성 조건 - 상태 영역에 aria-live polite가 있습니다. - 클릭 후 저장 완료 문장이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
12
관련 선택지를 fieldset으로 묶기
5
## 이번 단계에서 배울 내용 여러 라디오 버튼이 하나의 질문에 답한다면 `fieldset`으로 묶고 `legend`에 질문을 씁니다. 각 선택지에는 개별 label도 필요합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <fieldset> <legend>연락 방법</legend> <label><input type="radio" name="contact"> 이메일</label> </fieldset> ``` ## 해야 할 일 학습 시간 라디오 버튼을 fieldset으로 묶고 legend에 `선호 학습 시간`을 작성하세요. ## 완성 조건 - 라디오 그룹이 fieldset 안에 있습니다. - legend 글은 선호 학습 시간입니다. - 두 입력에 label이 있습니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
13
표의 제목과 머리글 관계 만들기
5
## 이번 단계에서 배울 내용 데이터 표에는 `caption`으로 표의 목적을 설명하고, 머리글 셀은 `th`를 사용합니다. `scope="col"`은 열 머리글임을 알려 줍니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <table> <caption>월별 점수</caption> <thead><tr><th scope="col">월</th></tr></thead> </table> ``` ## 해야 할 일 학습 진도 표에 caption을 추가하고 두 열 머리글에 scope="col"을 지정하세요. ## 완성 조건 - caption 글은 주간 학습 진도입니다. - 두 열 머리글이 th입니다. - 각 th의 scope는 col입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
14
본문 바로가기 링크 만들기
5
## 이번 단계에서 배울 내용 키보드 사용자는 반복되는 메뉴를 매번 지나지 않고 본문으로 이동할 수 있어야 합니다. 페이지 첫 링크를 본문 id와 연결합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <a class="skip-link" href="#main-content">본문 바로가기</a> <main id="main-content">...</main> ``` ## 해야 할 일 페이지 첫 요소에 `본문 바로가기` 링크를 만들고 `main-content` 본문과 연결하세요. ## 완성 조건 - 첫 포커스 가능한 요소가 skip-link입니다. - href는 #main-content입니다. - main의 id는 main-content입니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
15
움직임 줄이기 설정 존중하기
5
## 이번 단계에서 배울 내용 큰 애니메이션은 일부 사용자에게 어지럼증이나 집중 어려움을 줄 수 있습니다. `prefers-reduced-motion: reduce`에서 애니메이션과 전환 시간을 줄입니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms; } } ``` ## 해야 할 일 움직임 줄이기를 선호하는 환경에서 배너 애니메이션을 끄세요. ## 완성 조건 - 기본 배너 애니메이션은 유지합니다. - reduce 미디어 쿼리 안에서 animation을 none으로 바꿉니다. ## 작업 방법 1. 에디터에서 `index.html`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
16
접근 가능한 대화상자 완성하기
5
## 이번 단계에서 배울 내용 대화상자는 이름, 모달 상태, 키보드 포커스 관리가 필요합니다. 네이티브 `dialog`와 `showModal()`을 사용하면 기본 포커스와 Escape 닫기를 활용할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```html <dialog aria-labelledby="dialog-title"> <h2 id="dialog-title">설정</h2> <button type="button">닫기</button> </dialog> ``` ## 해야 할 일 열기 버튼으로 dialog를 모달로 열고, 제목을 aria-labelledby로 연결하며 닫기 버튼으로 닫으세요. ## 완성 조건 - dialog가 제목 id를 aria-labelledby로 가리킵니다. - 열기 버튼은 showModal을 호출합니다. - 닫기 버튼은 close를 호출합니다. - 열기 후 대화상자가 보이고 닫기 후 사라집니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%