1
<!-- 1. img 태그에 alt 속성으로 이미지 설명 제공 -->
2
<img src="cat.jpg" alt="흰색 고양이가 햇빛 아래 낮잠을 자고 있습니다">
3

4
<!-- 2. 장식용 이미지는 빈 alt 사용 (스크린리더가 건너뜀) -->
5
<img src="line.png" alt="">
6

7
<!-- 3. 의미있는 배경 이미지는 aria-label로 설명 -->
8
<div style="background-image: url('logo.png')"
9
     role="img"
10
     aria-label="회사 로고">
11
</div>
12

13
<!-- 4. 아이콘 버튼에 텍스트 설명 제공 -->
14
<button aria-label="검색">
15
  <img src="search.png" alt="">
16
</button>

1
<!-- 1. 좋은 예: 검정 텍스트 + 흰색 배경 (대비율 21:1) -->
2
<p style="color: #000; background: #fff">
3
  읽기 쉬운 텍스트입니다
4
</p>
5

6
<!-- 2. 나쁜 예: 회색 텍스트 + 흰색 배경 (대비율 2.5:1) -->
7
<p style="color: #999; background: #fff">
8
  읽기 어려운 텍스트입니다
9
</p>
10

11
<!-- 3. 좋은 예: 진한 파랑 + 흰색 배경 (대비율 8.6:1) -->
12
<p style="color: #0056b3; background: #fff">
13
  충분한 대비가 있는 텍스트입니다
14
</p>
15

16
<!-- 4. 큰 텍스트는 대비 기준이 낮음 -->
17
<h1 style="font-size: 24pt; color: #666; background: #fff">
18
  큰 제목 텍스트
19
</h1>

1
<!-- 1. video 태그에 track 요소로 자막 파일 연결 -->
2
<video controls>
3
  <!-- 2. src 속성에 비디오 파일 경로 지정 -->
4
  <source src="video.mp4" type="video/mp4">
5

6
  <!-- 3. track 태그로 자막 파일 추가 (WebVTT 형식) -->
7
  <track kind="captions"
8
         src="captions-ko.vtt"
9
         srclang="ko"
10
         label="한국어">
11

12
  <!-- 4. 영어 자막도 추가 가능 -->
13
  <track kind="captions"
14
         src="captions-en.vtt"
15
         srclang="en"
16
         label="English">
17
</video>
18

19
<!-- 5. 오디오에도 동일하게 적용 -->
20
<audio controls>
21
  <source src="podcast.mp3" type="audio/mp3">
22
  <track kind="captions"
23
         src="transcript.vtt"
24
         srclang="ko"
25
         label="한국어 자막">
26
</audio>

1
<!-- 1. 페이지에는 하나의 h1 제목만 사용 -->
2
<h1>웹 접근성 가이드</h1>
3

4
<!-- 2. 제목은 순서대로 사용 (h1 → h2 → h3) -->
5
<h2>인식의 용이성</h2>
6

7
<!-- 3. h2 다음에 h3 사용 (h4로 건너뛰지 않음) -->
8
<h3>대체 텍스트</h3>
9

10
<p>이미지에 대한 설명입니다.</p>
11

12
<!-- 4. 같은 레벨의 제목은 같은 숫자 사용 -->
13
<h3>색상 대비</h3>
14

15
<p>색상 대비에 대한 설명입니다.</p>
16

17
<!-- 5. 다음 섹션으로 넘어갈 때 h2 사용 -->
18
<h2>운용의 용이성</h2>
19

20
<!-- 6. 목록은 ul, ol 태그 사용 -->
21
<ul>
22
  <li>첫 번째 항목</li>
23
  <li>두 번째 항목</li>
24
</ul>
25

26
<!-- 7. 순서가 중요한 목록은 ol 사용 -->
27
<ol>
28
  <li>로그인하기</li>
29
  <li>상품 선택하기</li>
30
  <li>결제하기</li>
31
</ol>

1
<!-- 1. button 태그는 기본적으로 키보드 접근 가능 -->
2
<button onclick="save()">저장</button>
3

4
<!-- 2. 나쁜 예: div는 키보드로 접근 불가 -->
5
<div onclick="save()">저장</div>
6

7
<!-- 3. 좋은 예: div에 tabindex와 role 추가 -->
8
<div tabindex="0"
9
     role="button"
10
     onclick="save()"
11
     onkeypress="if(event.key==='Enter') save()">
12
  저장
13
</div>
14

15
<!-- 4. 링크는 기본적으로 Tab키로 이동 가능 -->
16
<a href="page.html">다음 페이지</a>
17

18
<!-- 5. 폼 요소는 모두 키보드 접근 가능 -->
19
<input type="text" placeholder="이름 입력">
20
<select>
21
  <option>옵션 1</option>
22
  <option>옵션 2</option>
23
</select>
24

25
<!-- 6. tabindex로 탭 순서 제어 (양수는 피할 것) -->
26
<input tabindex="1" type="text">
27
<input tabindex="2" type="text">
28

29
<!-- 7. tabindex="-1"은 포커스는 가능하지만 탭 순서에서 제외 -->
30
<div tabindex="-1" id="msg">알림 메시지</div>
31

32
<!-- 8. 모달 창에서는 포커스 트랩 구현 -->
33
<div role="dialog" aria-modal="true">
34
  <h2>알림</h2>
35
  <p>내용입니다</p>
36
  <button>확인</button>
37
</div>

1
<!-- 1. 자동으로 넘어가는 슬라이드에 일시정지 버튼 제공 -->
2
<div id="slide">
3
  <img src="slide1.jpg" alt="첫 번째 슬라이드">
4
  <!-- 2. 일시정지, 재생 버튼 -->
5
  <button onclick="pause()">일시정지</button>
6
  <button onclick="play()">재생</button>
7
</div>
8

9
<script>
10
// 3. 자동 슬라이드 변수
11
let timer;
12
let paused = false;
13

14
// 4. 슬라이드 자동 전환 함수
15
function autoSlide() {
16
  // 5. 일시정지 상태가 아닐 때만 실행
17
  if (!paused) {
18
    // 슬라이드 전환 코드
19
  }
20
  // 6. 5초마다 실행 (충분한 시간 제공)
21
  timer = setTimeout(autoSlide, 5000);
22
}
23

24
// 7. 일시정지 함수
25
function pause() {
26
  paused = true;
27
  clearTimeout(timer);
28
}
29

30
// 8. 재생 함수
31
function play() {
32
  paused = false;
33
  autoSlide();
34
}
35
</script>
36

37
<!-- 9. 세션 타임아웃 경고 -->
38
<div id="warn" style="display:none">
39
  <!-- 10. 남은 시간 표시 -->
40
  <p>5분 후 자동 로그아웃됩니다.</p>
41
  <!-- 11. 연장 버튼 제공 -->
42
  <button onclick="extend()">시간 연장</button>
43
</div>
44

45
<script>
46
// 12. 타임아웃 전 경고 표시
47
setTimeout(function() {
48
  document.getElementById('warn').style.display = 'block';
49
}, 25 * 60 * 1000); // 25분 후 경고
50
</script>

1
<!-- 1. 나쁜 예: 빠르게 깜빡이는 애니메이션 -->
2
<div style="animation: blink 0.3s infinite">
3
  깜빡임
4
</div>
5

6
<style>
7
/* 2. 초당 3회 이상 깜빡임은 위험 */
8
@keyframes blink {
9
  0% { opacity: 1; }
10
  50% { opacity: 0; }
11
  100% { opacity: 1; }
12
}
13
</style>
14

15
<!-- 3. 좋은 예: 애니메이션 제어 옵션 제공 -->
16
<button onclick="stop()">애니메이션 중지</button>
17

18
<div id="anim">
19
  움직이는 콘텐츠
20
</div>
21

22
<script>
23
// 4. 애니메이션 중지 함수
24
function stop() {
25
  // 5. CSS 애니메이션 제거
26
  document.getElementById('anim').style.animation = 'none';
27
}
28
</script>
29

30
<!-- 6. prefers-reduced-motion으로 사용자 설정 존중 -->
31
<style>
32
/* 7. 기본 애니메이션 */
33
.box {
34
  transition: transform 0.3s;
35
}
36

37
/* 8. 사용자가 애니메이션 줄이기를 선택한 경우 */
38
@media (prefers-reduced-motion: reduce) {
39
  .box {
40
    /* 9. 모든 애니메이션과 전환 효과 제거 */
41
    transition: none;
42
    animation: none;
43
  }
44
}
45
</style>

1
<!-- 1. 본문 바로가기 링크 (페이지 최상단) -->
2
<a href="#main" class="skip">본문 바로가기</a>
3

4
<!-- 2. 메인 네비게이션을 nav 태그로 감싸기 -->
5
<nav aria-label="주 메뉴">
6
  <!-- 3. 목록으로 메뉴 구조화 -->
7
  <ul>
8
    <li><a href="/">홈</a></li>
9
    <li><a href="/about">소개</a></li>
10
    <li><a href="/contact">연락처</a></li>
11
  </ul>
12
</nav>
13

14
<!-- 4. 현재 페이지 표시 -->
15
<nav aria-label="주 메뉴">
16
  <ul>
17
    <li><a href="/">홈</a></li>
18
    <!-- 5. aria-current로 현재 페이지 표시 -->
19
    <li><a href="/about" aria-current="page">소개</a></li>
20
    <li><a href="/contact">연락처</a></li>
21
  </ul>
22
</nav>
23

24
<!-- 6. 빵 부스러기(breadcrumb) 네비게이션 -->
25
<nav aria-label="빵부스러기">
26
  <!-- 7. 순서가 있는 목록 사용 -->
27
  <ol>
28
    <li><a href="/">홈</a></li>
29
    <li><a href="/products">상품</a></li>
30
    <!-- 8. 현재 위치는 링크 없이 표시 -->
31
    <li aria-current="page">노트북</li>
32
  </ol>
33
</nav>
34

35
<!-- 9. 본문 영역은 main 태그로 표시 -->
36
<main id="main">
37
  <h1>페이지 제목</h1>
38
  <p>본문 내용입니다.</p>
39
</main>
40

41
<!-- 10. 페이지 내 점프 링크 -->
42
<nav aria-label="목차">
43
  <ul>
44
    <!-- 11. 각 섹션의 id로 이동 -->
45
    <li><a href="#sec1">섹션 1</a></li>
46
    <li><a href="#sec2">섹션 2</a></li>
47
    <li><a href="#sec3">섹션 3</a></li>
48
  </ul>
49
</nav>
50

51
<!-- 12. 각 섹션에 id 부여 -->
52
<section id="sec1">
53
  <h2>섹션 1</h2>
54
</section>
55

56
<section id="sec2">
57
  <h2>섹션 2</h2>
58
</section>

1
<!-- 1. 페이지 언어 지정 (한국어) -->
2
<html lang="ko">
3

4
<!-- 2. 특정 부분만 다른 언어일 경우 -->
5
<p>
6
  <!-- 3. 한국어 문장 -->
7
  안녕하세요.
8
  <!-- 4. 영어 부분만 lang 속성 지정 -->
9
  <span lang="en">Hello</span>입니다.
10
</p>
11

12
<!-- 5. 약어나 줄임말에 설명 제공 -->
13
<p>
14
  <!-- 6. abbr 태그로 약어 표시 -->
15
  <abbr title="하이퍼텍스트 마크업 언어">HTML</abbr>은
16
  웹 페이지를 만드는 언어입니다.
17
</p>
18

19
<!-- 7. 복잡한 단어에 설명 추가 -->
20
<p>
21
  <!-- 8. dfn 태그로 정의 표시 -->
22
  <dfn title="웹 페이지를 모두가 사용할 수 있게 만드는 것">
23
    웹 접근성
24
  </dfn>은 중요합니다.
25
</p>
26

27
<!-- 9. 발음이 어려운 단어에 루비 주석 -->
28
<ruby>
29
  <!-- 10. 한자 표시 -->
30
  漢字
31
  <!-- 11. 읽는 방법 표시 -->
32
  <rt>한자</rt>
33
</ruby>

1
<!-- 1. 나쁜 예: 포커스만으로 팝업 열림 -->
2
<input type="text"
3
       onfocus="openPopup()">
4

5
<!-- 2. 좋은 예: 명시적 클릭으로 팝업 열림 -->
6
<input type="text" id="inp">
7
<button onclick="openPopup()">도움말 보기</button>
8

9
<!-- 3. 나쁜 예: 선택만으로 페이지 이동 -->
10
<select onchange="location.href=this.value">
11
  <option value="page1.html">페이지 1</option>
12
  <option value="page2.html">페이지 2</option>
13
</select>
14

15
<!-- 4. 좋은 예: 버튼으로 이동 확인 -->
16
<select id="sel">
17
  <option value="page1.html">페이지 1</option>
18
  <option value="page2.html">페이지 2</option>
19
</select>
20
<!-- 5. 이동 버튼 별도 제공 -->
21
<button onclick="go()">이동</button>
22

23
<script>
24
// 6. 사용자가 버튼을 눌러야 이동
25
function go() {
26
  const sel = document.getElementById('sel');
27
  location.href = sel.value;
28
}
29
</script>
30

31
<!-- 7. 새 창 열림을 사전에 알림 -->
32
<a href="page.html"
33
   target="_blank">
34
  <!-- 8. 새 창에서 열림을 명시 -->
35
  외부 사이트 (새 창)
36
</a>
37

38
<!-- 9. 또는 aria-label로 설명 -->
39
<a href="page.html"
40
   target="_blank"
41
   aria-label="외부 사이트, 새 창에서 열림">
42
  외부 사이트
43
</a>

1
<!-- 1. 폼에 명확한 레이블 제공 -->
2
<form>
3
  <!-- 2. label과 input을 for-id로 연결 -->
4
  <label for="name">이름</label>
5
  <input type="text" id="name" required>
6

7
  <!-- 3. 필수 입력 표시와 설명 -->
8
  <label for="email">
9
    이메일
10
    <!-- 4. 필수 표시 -->
11
    <span aria-label="필수">*</span>
12
  </label>
13
  <!-- 5. 입력 형식 안내 -->
14
  <input type="email"
15
         id="email"
16
         placeholder="example@email.com"
17
         required
18
         aria-describedby="tip">
19
  <!-- 6. 추가 설명 제공 -->
20
  <small id="tip">이메일 형식으로 입력해주세요</small>
21

22
  <!-- 7. 오류 메시지 영역 -->
23
  <div id="err"
24
       role="alert"
25
       style="display:none; color:red">
26
  </div>
27

28
  <button type="submit">제출</button>
29
</form>
30

31
<script>
32
// 8. 폼 제출 시 유효성 검사
33
document.querySelector('form').addEventListener('submit', function(e) {
34
  // 9. 기본 제출 동작 막기
35
  e.preventDefault();
36

37
  const name = document.getElementById('name').value;
38
  const email = document.getElementById('email').value;
39
  const err = document.getElementById('err');
40

41
  // 10. 이름이 비어있는지 확인
42
  if (!name) {
43
    // 11. 오류 메시지 표시
44
    err.textContent = '이름을 입력해주세요';
45
    err.style.display = 'block';
46
    // 12. 해당 필드로 포커스 이동
47
    document.getElementById('name').focus();
48
    return;
49
  }
50

51
  // 13. 이메일 형식 확인
52
  if (!email.includes('@')) {
53
    err.textContent = '올바른 이메일 형식이 아닙니다';
54
    err.style.display = 'block';
55
    document.getElementById('email').focus();
56
    return;
57
  }
58

59
  // 14. 모두 정상이면 제출
60
  alert('제출 완료');
61
});
62
</script>
63

64
<!-- 15. 비밀번호 입력 시 조건 표시 -->
65
<label for="pw">비밀번호</label>
66
<input type="password"
67
       id="pw"
68
       aria-describedby="pwrule">
69
<!-- 16. 비밀번호 규칙 설명 -->
70
<ul id="pwrule">
71
  <li>8자 이상</li>
72
  <li>영문, 숫자 포함</li>
73
</ul>

1
<form id="frm">
2
  <!-- 1. 각 입력 필드에 고유 id 부여 -->
3
  <div>
4
    <label for="user">사용자명</label>
5
    <!-- 2. aria-invalid로 오류 상태 표시 -->
6
    <input type="text"
7
           id="user"
8
           aria-invalid="false"
9
           aria-describedby="user-err">
10
    <!-- 3. 오류 메시지 영역 (처음엔 숨김) -->
11
    <span id="user-err"
12
          role="alert"
13
          style="display:none; color:red">
14
    </span>
15
  </div>
16

17
  <div>
18
    <label for="age">나이</label>
19
    <input type="number"
20
           id="age"
21
           aria-invalid="false"
22
           aria-describedby="age-err">
23
    <span id="age-err"
24
          role="alert"
25
          style="display:none; color:red">
26
    </span>
27
  </div>
28

29
  <button type="submit">제출</button>
30
</form>
31

32
<script>
33
// 4. 폼 제출 이벤트 처리
34
document.getElementById('frm').addEventListener('submit', function(e) {
35
  // 5. 기본 제출 막기
36
  e.preventDefault();
37

38
  // 6. 오류 여부 추적
39
  let hasError = false;
40

41
  // 7. 사용자명 검증
42
  const user = document.getElementById('user');
43
  const userErr = document.getElementById('user-err');
44

45
  // 8. 빈 값 체크
46
  if (!user.value.trim()) {
47
    // 9. aria-invalid를 true로 변경
48
    user.setAttribute('aria-invalid', 'true');
49
    // 10. 오류 메시지 표시
50
    userErr.textContent = '사용자명을 입력해주세요';
51
    userErr.style.display = 'block';
52
    hasError = true;
53
  } else {
54
    // 11. 정상이면 aria-invalid를 false로
55
    user.setAttribute('aria-invalid', 'false');
56
    userErr.style.display = 'none';
57
  }
58

59
  // 12. 나이 검증
60
  const age = document.getElementById('age');
61
  const ageErr = document.getElementById('age-err');
62

63
  // 13. 나이 범위 체크
64
  if (age.value < 1 || age.value > 120) {
65
    age.setAttribute('aria-invalid', 'true');
66
    // 14. 구체적인 수정 방법 제시
67
    ageErr.textContent = '나이는 1~120 사이로 입력해주세요';
68
    ageErr.style.display = 'block';
69
    hasError = true;
70
  } else {
71
    age.setAttribute('aria-invalid', 'false');
72
    ageErr.style.display = 'none';
73
  }
74

75
  // 15. 오류가 없으면 제출
76
  if (!hasError) {
77
    alert('제출 완료');
78
  } else {
79
    // 16. 오류가 있으면 첫 오류 필드로 포커스
80
    if (user.getAttribute('aria-invalid') === 'true') {
81
      user.focus();
82
    } else {
83
      age.focus();
84
    }
85
  }
86
});
87
</script>