<img src="cat.jpg" alt="흰색 고양이가 햇빛 아래 낮잠을 자고 있습니다">


<img src="line.png" alt="">


<div style="background-image: url('logo.png')" 
     role="img" 
     aria-label="회사 로고">
</div>


<button aria-label="검색">
  <img src="search.png" alt="">
</button>

<p style="color: #000; background: #fff">
  읽기 쉬운 텍스트입니다
</p>


<p style="color: #999; background: #fff">
  읽기 어려운 텍스트입니다
</p>


<p style="color: #0056b3; background: #fff">
  충분한 대비가 있는 텍스트입니다
</p>


<h1 style="font-size: 24pt; color: #666; background: #fff">
  큰 제목 텍스트
</h1>

<video controls>
  
  <source src="video.mp4" type="video/mp4">
  
  
  <track kind="captions" 
         src="captions-ko.vtt" 
         srclang="ko" 
         label="한국어">
  
  
  <track kind="captions" 
         src="captions-en.vtt" 
         srclang="en" 
         label="English">
</video>


<audio controls aria-describedby="podcast-transcript">
  <source src="podcast.mp3" type="audio/mpeg">
</audio>
<details id="podcast-transcript">
  <summary>전체 대본 보기</summary>
  <p>여기에 오디오의 전체 대본을 텍스트로 제공합니다…</p>
</details>

<h1>웹 접근성 가이드</h1>


<h2>인식의 용이성</h2>


<h3>대체 텍스트</h3>

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


<h3>색상 대비</h3>

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


<h2>운용의 용이성</h2>


<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
</ul>


<ol>
  <li>로그인하기</li>
  <li>상품 선택하기</li>
  <li>결제하기</li>
</ol>

<button onclick="save()">저장</button>


<div onclick="save()">저장</div>


<div tabindex="0" 
     role="button" 
     onclick="save()" 
     onkeypress="if(event.key==='Enter') save()">
  저장
</div>


<a href="page.html">다음 페이지</a>


<input type="text" placeholder="이름 입력">
<select>
  <option>옵션 1</option>
  <option>옵션 2</option>
</select>


<input tabindex="1" type="text">
<input tabindex="2" type="text">


<div tabindex="-1" id="msg">알림 메시지</div>


<div role="dialog" aria-modal="true">
  <h2>알림</h2>
  <p>내용입니다</p>
  <button>확인</button>
</div>

<div id="slide">
  <img src="slide1.jpg" alt="첫 번째 슬라이드">
  
  <button onclick="pause()">일시정지</button>
  <button onclick="play()">재생</button>
</div>

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

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

// 7. 일시정지 함수
function pause() {
  paused = true;
  clearTimeout(timer);
}

// 8. 재생 함수
function play() {
  paused = false;
  autoSlide();
}
</script>


<div id="warn" style="display:none">
  
  <p>5분 후 자동 로그아웃됩니다.</p>
  
  <button onclick="extend()">시간 연장</button>
</div>

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

<div style="animation: blink 0.3s infinite">
  깜빡임
</div>

<style>
/* 2. 초당 3회 이상 깜빡임은 위험 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>


<button onclick="stop()">애니메이션 중지</button>

<div id="anim">
  움직이는 콘텐츠
</div>

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


<style>
/* 7. 기본 애니메이션 */
.box {
  transition: transform 0.3s;
}

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

<a href="#main" class="skip">본문 바로가기</a>


<nav aria-label="주 메뉴">
  
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/about">소개</a></li>
    <li><a href="/contact">연락처</a></li>
  </ul>
</nav>


<nav aria-label="주 메뉴">
  <ul>
    <li><a href="/">홈</a></li>
    
    <li><a href="/about" aria-current="page">소개</a></li>
    <li><a href="/contact">연락처</a></li>
  </ul>
</nav>


<nav aria-label="빵부스러기">
  
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/products">상품</a></li>
    
    <li aria-current="page">노트북</li>
  </ol>
</nav>


<main id="main">
  <h1>페이지 제목</h1>
  <p>본문 내용입니다.</p>
</main>


<nav aria-label="목차">
  <ul>
    
    <li><a href="#sec1">섹션 1</a></li>
    <li><a href="#sec2">섹션 2</a></li>
    <li><a href="#sec3">섹션 3</a></li>
  </ul>
</nav>


<section id="sec1">
  <h2>섹션 1</h2>
</section>

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

<html lang="ko">


<p>
  
  안녕하세요. 
  
  <span lang="en">Hello</span>입니다.
</p>


<p>
  
  <abbr title="하이퍼텍스트 마크업 언어">HTML</abbr>은 
  웹 페이지를 만드는 언어입니다.
</p>


<p>
  
  <dfn title="웹 페이지를 모두가 사용할 수 있게 만드는 것">
    웹 접근성
  </dfn>은 중요합니다.
</p>


<ruby>
  
  漢字
  
  <rt>한자</rt>
</ruby>

<input type="text" 
       onfocus="openPopup()">


<input type="text" id="inp">
<button onclick="openPopup()">도움말 보기</button>


<select onchange="location.href=this.value">
  <option value="page1.html">페이지 1</option>
  <option value="page2.html">페이지 2</option>
</select>


<select id="sel">
  <option value="page1.html">페이지 1</option>
  <option value="page2.html">페이지 2</option>
</select>

<button onclick="go()">이동</button>

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


<a href="page.html" 
   target="_blank">
  
  외부 사이트 (새 창)
</a>


<a href="page.html" 
   target="_blank"
   aria-label="외부 사이트, 새 창에서 열림">
  외부 사이트
</a>

<form>
  
  <label for="name">이름</label>
  <input type="text" id="name" required>

  
  <label for="email">
    이메일 
    
    <span aria-label="필수">*</span>
  </label>
  
  <input type="email" 
         id="email" 
         placeholder="example@email.com"
         required
         aria-describedby="tip">
  
  <small id="tip">이메일 형식으로 입력해주세요</small>

  
  <div id="err" 
       role="alert" 
       style="display:none; color:red">
  </div>

  <button type="submit">제출</button>
</form>

<script>
// 8. 폼 제출 시 유효성 검사
document.querySelector('form').addEventListener('submit', function(e) {
  // 9. 기본 제출 동작 막기
  e.preventDefault();
  
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const err = document.getElementById('err');
  
  // 10. 이름이 비어있는지 확인
  if (!name) {
    // 11. 오류 메시지 표시
    err.textContent = '이름을 입력해주세요';
    err.style.display = 'block';
    // 12. 해당 필드로 포커스 이동
    document.getElementById('name').focus();
    return;
  }
  
  // 13. 이메일 형식 확인
  if (!email.includes('@')) {
    err.textContent = '올바른 이메일 형식이 아닙니다';
    err.style.display = 'block';
    document.getElementById('email').focus();
    return;
  }
  
  // 14. 모두 정상이면 제출
  alert('제출 완료');
});
</script>


<label for="pw">비밀번호</label>
<input type="password" 
       id="pw" 
       aria-describedby="pwrule">

<ul id="pwrule">
  <li>8자 이상</li>
  <li>영문, 숫자 포함</li>
</ul>

<form id="frm">
  
  <div>
    <label for="user">사용자명</label>
    
    <input type="text" 
           id="user" 
           aria-invalid="false"
           aria-describedby="user-err">
    
    <span id="user-err" 
          role="alert" 
          style="display:none; color:red">
    </span>
  </div>

  <div>
    <label for="age">나이</label>
    <input type="number" 
           id="age" 
           aria-invalid="false"
           aria-describedby="age-err">
    <span id="age-err" 
          role="alert" 
          style="display:none; color:red">
    </span>
  </div>

  <button type="submit">제출</button>
</form>

<script>
// 4. 폼 제출 이벤트 처리
document.getElementById('frm').addEventListener('submit', function(e) {
  // 5. 기본 제출 막기
  e.preventDefault();
  
  // 6. 오류 여부 추적
  let hasError = false;
  
  // 7. 사용자명 검증
  const user = document.getElementById('user');
  const userErr = document.getElementById('user-err');
  
  // 8. 빈 값 체크
  if (!user.value.trim()) {
    // 9. aria-invalid를 true로 변경
    user.setAttribute('aria-invalid', 'true');
    // 10. 오류 메시지 표시
    userErr.textContent = '사용자명을 입력해주세요';
    userErr.style.display = 'block';
    hasError = true;
  } else {
    // 11. 정상이면 aria-invalid를 false로
    user.setAttribute('aria-invalid', 'false');
    userErr.style.display = 'none';
  }
  
  // 12. 나이 검증
  const age = document.getElementById('age');
  const ageErr = document.getElementById('age-err');
  
  // 13. 나이 범위 체크
  if (age.value < 1 || age.value > 120) {
    age.setAttribute('aria-invalid', 'true');
    // 14. 구체적인 수정 방법 제시
    ageErr.textContent = '나이는 1~120 사이로 입력해주세요';
    ageErr.style.display = 'block';
    hasError = true;
  } else {
    age.setAttribute('aria-invalid', 'false');
    ageErr.style.display = 'none';
  }
  
  // 15. 오류가 없으면 제출
  if (!hasError) {
    alert('제출 완료');
  } else {
    // 16. 오류가 있으면 첫 오류 필드로 포커스
    if (user.getAttribute('aria-invalid') === 'true') {
      user.focus();
    } else {
      age.focus();
    }
  }
});
</script>

<button class="icon-btn">
  <span aria-hidden="true">🗑</span>
  <span class="sr-only">삭제</span>
</button>

.icon-btn {

  min-width: 24px;
  min-height: 24px;

  padding: 8px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

<main id="page" inert>
  <h1>본문</h1>
  <button>저장</button>
  <a href="#">링크</a>
</main>


<dialog id="alert" open>
  <p>정말 삭제하시겠습니까?</p>
  <button>확인</button>
  <button>취소</button>
</dialog>

const dialog = document.getElementById('alert');
const main = document.getElementById('page');

function openAlert() {
  main.inert = true;
  dialog.show();
}
function closeAlert() {
  dialog.close();
  main.inert = false;
}

<dialog id="confirm">
  <h2>알림</h2>
  <p>저장하시겠습니까?</p>
  <form method="dialog">
    <button value="ok">확인</button>
    <button value="cancel">취소</button>
  </form>
</dialog>

document.getElementById('confirm').showModal();
document.getElementById('confirm').addEventListener('close', e => {
  console.log('결과:', e.target.returnValue);  // "ok" 또는 "cancel"
});