접근성

HTML 접근성 (Accessibility)은 웹 콘텐츠와 기능이 모든 사용자, 특히 장애가 있는 사람들에게 접근 가능하도록 만드는 개념이다. 접근성을 통해 웹사이트의 품질과 사용자 경험을 향상할 수 있다.

---

1. 접근성의 핵심 개념

1. 포괄성: 장애가 있는 사용자(예: 시각, 청각, 운동 능력 또는 인지 장애)가 웹사이트를 쉽게 이용할 수 있도록 지원.
2. 장치 독립성: 다양한 입력 및 출력 장치(화면 리더, 키보드, 음성 명령 등)에서 동일한 경험 제공.
3. 웹 표준 준수: W3C의 **웹 콘텐츠 접근성 가이드라인(WCAG)**을 준수하여 글로벌 기준 맞춤.

---

2. 접근성을 높이는 HTML 요소와 속성

2.1. 올바른 시맨틱 요소 사용

HTML 시맨틱 요소는 콘텐츠의 구조를 명확히 하여 화면 리더기가 페이지를 올바르게 해석할 수 있게 한다.

<header>
  <h1>Welcome to Our Website</h1>
</header>
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>
<footer>
  <p>&copy; 2024 Example Company</p>
</footer>

2.2. ARIA (Accessible Rich Internet Applications) 속성

ARIA 속성은 HTML 기본 기능만으로는 접근성을 보장하기 어려운 경우 유용하다. 하지만 남용 시 접근성을 저해할 수 있으므로 주의가 필요하다.

• role: 요소의 역할을 정의.
• aria-label: 요소에 레이블 제공.
• aria-hidden: 화면 리더가 요소를 무시하도록 지정.
• aria-live: 동적 콘텐츠 업데이트를 사용자에게 알림.

예시: ARIA 속성을 사용한 접근성 개선

<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
  <h2 id="dialog-title">Dialog Title</h2>
  <p id="dialog-desc">This is the dialog description.</p>
</div>

2.3. 레이블과 폼 요소

명시적인 레이블 연결

• label 요소는 폼 입력 필드와 명확하게 연결되어야 한다.

<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

숨겨진 레이블

• 화면 리더 전용 레이블을 제공할 때 사용.

 

<label class="sr-only" for="username">Username</label>
<input type="text" id="username" name="username">

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

2.4. 키보드 내비게이션

키보드만으로도 모든 콘텐츠를 탐색할 수 있어야 한다. 

1. 포커스 관리: tabindex 속성을 활용하여 포커스 가능한 순서를 지정.
2. 포커스 스타일: 시각적으로 포커스가 어디에 있는지 명확히 표시.

<button tabindex="0">Click Me</button>
<a href="#section" tabindex="1">Go to Section</a>

2.5. 미디어 접근성

대체 텍스트

이미지에 alt 속성을 사용하여 시각적으로 보지 못하는 사용자에게 이미지의 목적을 설명.

<img src="logo.png" alt="Company Logo">

비디오와 오디오

• 자막 제공: 청각 장애인을 위해 자막 추가.
• 대체 텍스트: 비디오 및 오디오 콘텐츠를 설명.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles.vtt" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

---

3. 동적 콘텐츠와 접근성

3.1. 스킵 링크

긴 내비게이션을 건너뛰고 주요 콘텐츠로 바로 이동할 수 있는 링크 제공.

<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
  <h1>Welcome to the Website</h1>
</main>

3.2. 실시간 알림

• 동적 콘텐츠(예: 알림, 로딩 상태)는 화면 리더에게 실시간으로 전달

<div aria-live="polite">Your data is being saved...</div>

---

4. 색상 대비와 시각적 접근성

4.1. 적절한 색상 대비

텍스트와 배경 간의 색상 대비는 최소한 4.5:1을 충족해야 한다.

• Contrast Checker Tool을 사용해 대비 확인.

4.2. 색상 외 정보 제공

색상만으로 중요한 정보를 전달하지 않도록 추가 표시를 제공.

<p><strong>*</strong> Required fields are marked with an asterisk.</p>

---

5. 접근성 테스트

5.1. 자동화 도구

1. Lighthouse (Chrome DevTools): 접근성 진단 도구.
2. WAVE: 웹 접근성 평가 도구.
3. axe: 접근성 검사 플러그인.

5.2. 수동 테스트

1. 키보드 내비게이션: Tab, Enter, Space 키만으로 사이트 탐색 가능 여부 확인.
2. 화면 리더 테스트: NVDA, JAWS, VoiceOver 등 화면 리더 사용.