실무 첫걸음, 생성형 AI로 배우는 UX/UI & 프론트엔드
아래는 NVDA 실습용 HTML 예제입니다. 웹접근성 테스트 수업이나 실무 점검용으로 활용할 수 있습니다. 기본 시맨틱 태그, 폼 요소, 대체 텍스트, 포커스 흐름을 점검하기에 적절한 구조입니다.
[실습 예제 코드 - nvda-test.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>NVDA 웹접근성 테스트 예제</title>
</head>
<body>
<header>
<h1>웹접근성 테스트 페이지</h1>
<nav>
<ul>
<li><a href="#section1">소개</a></li>
<li><a href="#section2">이미지</a></li>
<li><a href="#section3">폼</a></li>
</ul>
</nav>
</header>
<main>
<section id="section1">
<h2>1. 소개</h2>
<p>이 페이지는 NVDA 스크린리더로 웹 접근성 테스트를 하기 위한 예제입니다.</p>
</section>
<section id="section2">
<h2>2. 이미지 테스트</h2>
<p>다음은 대체 텍스트가 있는 이미지입니다.</p>
<img src="sample.jpg" alt="예쁜 고양이 사진">
<p>다음은 alt가 없는 이미지입니다.</p>
<img src="sample2.jpg">
</section>
<section id="section3">
<h2>3. 폼 요소 테스트</h2>
<form>
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
<fieldset>
<legend>관심 분야</legend>
<label><input type="checkbox" name="interest" value="design"> 디자인</label>
<label><input type="checkbox" name="interest" value="frontend"> 프론트엔드</label>
</fieldset>
<button type="submit">제출하기</button>
</form>
</section>
</main>
<footer>
<p>© 2025 웹접근성 실습 페이지</p>
</footer>
</body>
</html>
실습 포인트
- H 키로 제목 구조 확인 (h1, h2)
- Tab/Shift+Tab으로 포커스 순서 점검
- 이미지 alt 유무 차이 확인
- NVDA + F7로 요소 목록 보기 (링크, 제목, 버튼 등)
- 폼 라벨 연결 (label for) 여부 확인
추가 제공 가능
- 이미지 포함된 ZIP 파일
- 위 코드 기반 ARIA 속성 실습 버전 (role, aria-label, aria-hidden 등)
- NVDA 테스트 체크리스트(PDF)
💬 댓글
이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.
'프론트엔드 개발 실무 > 웹표준 & 웹접근성 실무 가이드' 카테고리의 다른 글
| [웹접근성 완벽가이드 ⑥] NVDA 사용법 가이드 (0) | 2025.05.15 |
|---|---|
| [웹접근성 완벽가이드 ⑤]접근성 테스트 도구1-axe DevTools (0) | 2025.05.15 |
| [웹접근성 완벽가이드 ④] [프롬프트]코딩 작업물 접근성 보완 프롬프트 예시 (0) | 2025.05.15 |
| [웹접근성 완벽가이드 ③] 웹접근성 코딩예제 모음(WAI-ARIA) (0) | 2025.05.15 |
| [웹접근성 완벽가이드 ②] WAI-ARIA 속성’s (0) | 2025.05.15 |