HTML Accessibility
1. HTML 접근성이란?
HTML 접근성은 장애가 있는 사용자(예: 시각, 청각, 운동 장애 등)가 웹 페이지에 접근하고 사용할 수 있도록 HTML 태그와 속성을 활용하는 기술을 말합니다. 접근성을 갖춘 웹 페이지는 스크린 리더와 같은 보조 기술을 사용하는 사용자, 색맹 사용자, 키보드로만 사이트를 탐색하는 사용자 등을 포함하여 모든 사용자에게 친화적인 환경을 제공합니다.
접근성은 WCAG(웹 콘텐츠 접근성 지침)과 같은 표준을 따르며, 웹 페이지를 설계할 때 이러한 표준을 고려하는 것이 중요합니다.
2. 접근성을 높이는 주요 HTML 요소
2.1 alt 속성
<img> 태그에서 사용되는 alt 속성은 이미지의 대체 텍스트를 제공합니다. 시각 장애가 있는 사용자가 스크린 리더를 사용할 때 이미지 대신 이 대체 텍스트가 읽히게 됩니다.
<img src="logo.png" alt="웹사이트 로고">주의: 장식용 이미지에는 빈 alt 속성을 사용하여 스크린 리더가 이를 무시하게 하는 것이 좋습니다.
<img src="decoration.png" alt="">2.2 aria-* 속성
ARIA(Accessible Rich Internet Applications) 속성은 동적인 웹 콘텐츠에 대해 접근성을 추가로 제공하는 속성입니다. 이는 스크린 리더와 같은 보조 기술에 유용한 정보를 제공합니다.
예를 들어, 상태를 나타내는 요소에 aria-label이나 aria-hidden을 사용하여 스크린 리더가 이 정보를 이해할 수 있게 할 수 있습니다.
<button aria-label="Submit Form">Submit</button>2.3 <label> 태그
폼 요소에서 접근성을 높이기 위해 <label> 태그를 사용하여 입력 필드와 연결해야 합니다. for 속성을 통해 해당 레이블이 어떤 입력 필드를 설명하는지 명확히 할 수 있습니다.
<label for="email">Email:</label>
<input type="email" id="email" name="email">이렇게 하면 스크린 리더가 입력 필드와 연결된 레이블을 읽어줍니다.
2.4 <fieldset>과 <legend> 태그
여러 폼 요소를 그룹화할 때 <fieldset> 태그를 사용하고, 해당 그룹의 설명을 제공할 때 <legend> 태그를 사용합니다. 이를 통해 스크린 리더는 폼 그룹의 목적을 이해할 수 있습니다.
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name">
</fieldset>2.5 role 속성
role 속성은 요소의 의미를 명시적으로 정의하여, 보조 기술이 요소를 제대로 인식하도록 돕습니다. 이는 특히 시맨틱이 명확하지 않은 동적 콘텐츠나 사용자 정의 요소에서 유용합니다.
<nav role="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>2.6 tabindex 속성
tabindex 속성은 요소의 탭 순서를 제어하여 키보드 탐색을 더 효율적으로 만듭니다. 특히, 중요한 요소에 접근성을 제공하거나, 키보드 탐색 순서를 명확히 해야 할 때 사용합니다.
<button tabindex="1">First Button</button>
<button tabindex="2">Second Button</button>3. 접근성 고려 사항
3.1 색상 대비
충분한 색상 대비는 시각 장애가 있는 사용자에게 중요한 요소입니다. 텍스트와 배경 색상 사이에 충분한 대비를 유지하여 사용자가 쉽게 읽을 수 있도록 해야 합니다. WCAG 지침에서는 일반 텍스트와 배경 사이의 대비 비율이 최소 4.5:1이어야 한다고 권장합니다.
3.2 폰트 크기와 읽기 쉬운 텍스트
텍스트는 적절한 크기와 가독성을 유지해야 합니다. 사용자가 페이지를 확대하거나 축소할 수 있도록 레이아웃이 유연하게 설정되어 있어야 하며, 폰트 크기를 너무 작게 설정하지 않도록 주의해야 합니다.
3.3 키보드 접근성
모든 인터페이스 요소는 키보드로 접근 가능해야 합니다. 이는 클릭이나 터치 외에 키보드를 통해서도 사용자가 웹 페이지를 탐색하고, 인터랙션할 수 있게끔 해야 한다는 것을 의미합니다. 특히, 폼 요소, 버튼, 링크 등은 키보드로 접근이 가능해야 합니다.
3.4 동적 콘텐츠
동적으로 업데이트되는 콘텐츠는 스크린 리더나 보조 기술에 의해 인식될 수 있어야 합니다. JavaScript를 사용해 콘텐츠를 동적으로 변경할 경우, ARIA 속성을 활용하여 사용자에게 변경 사항을 알리도록 해야 합니다.
<div role="alert" aria-live="assertive">
이 영역의 내용이 동적으로 업데이트됩니다.
</div>4. 스크린 리더와의 호환성
4.1 스크린 리더란?
스크린 리더는 시각 장애가 있는 사용자가 웹 페이지를 읽을 수 있도록 해주는 소프트웨어입니다. 이 도구는 HTML 요소와 텍스트를 읽어주며, 페이지의 구조를 이해하도록 도와줍니다. 스크린 리더는 alt 텍스트, ARIA 속성, 시맨틱 HTML 요소를 기반으로 페이지를 탐색합니다.
4.2 스크린 리더 테스트
웹 페이지를 개발할 때 스크린 리더를 테스트하는 것이 중요합니다. 대표적인 스크린 리더 도구로는 NVDA, JAWS, VoiceOver(MacOS) 등이 있습니다. 각 도구를 통해 웹 페이지가 접근성 요구 사항을 충족하는지 확인해야 합니다.
5. 웹 접근성 테스트 도구
5.1 WAVE (Web Accessibility Evaluation Tool)
WAVE는 웹 페이지의 접근성 문제를 찾아주는 온라인 도구입니다. 사용자는 웹 페이지 URL을 입력하거나 페이지 코드를 직접 검사하여 접근성 문제를 찾아볼 수 있습니다. WAVE는 자동으로 접근성 문제를 분석하고, 시각적인 피드백을 제공합니다.
5.2 Axe
Axe는 Chrome과 Firefox에서 사용 가능한 접근성 검사 브라우저 확장 프로그램입니다. 이 도구는 페이지의 접근성 문제를 분석하고, 문제를 해결하는 방법을 제안합니다.
5.3 Lighthouse
Lighthouse는 Google Chrome에서 제공하는 웹 개발 도구로, 성능, SEO, 접근성 등을 분석합니다. 페이지를 검사한 후 접근성 점수와 함께 개선 사항을 제안합니다.
6. 접근성 모범 사례
- 시맨틱 HTML 사용: HTML5 시맨틱 요소(
<article>,<section>,<header>,<footer>등)를 사용하여 웹 페이지의 구조와 의미를 명확하게 만듭니다. - 폼에 레이블 추가: 모든 입력 필드에
<label>을 추가하여 스크린 리더가 필드를 정확히 설명할 수 있도록 합니다. - 충분한 색상 대비 제공: 텍스트와 배경의 대비를 높여 시각적 인식 능력이 낮은 사용자가 콘텐츠를 읽기 쉽게 만듭니다.
- 키보드 네비게이션 지원: 웹 페이지의 모든 상호작용 요소(버튼, 링크 등)가 키보드로도 접근 가능하도록 설정합니다.
- ARIA 속성 사용: 동적 콘텐츠나 복잡한 UI 요소에 ARIA 속성을 추가하여 보조 기술을 사용하는 사용자가 페이지의 상태나 변경 사항을 알 수 있도록 합니다.