HTML 고급 보안

HTML 고급 접근성 기법

HTML 고급 접근성 기법 — 고급

고급 접근성 기법

1. 도입 (왜 배워야 하는가)

웹 접근성(Web Accessibility)은 장애인과 비장애인이 웹 콘텐츠에 동등하게 접근할 수 있도록 하는 방안입니다. 이는 단순히 법적 요구 사항을 충족하는 것을 넘어, 다양한 사용자가 웹사이트를 사용할 수 있도록 하는 매우 중요한 요소입니다. 예를 들어, 시각 장애인이 스크린 리더를 사용할 때, 적절한 접근성이 보장되지 않으면 사이트 내 정보를 이해하거나 탐색하는 데 큰 어려움을 겪습니다.

접근성을 무시하면 사용자의 경험이 저하되고, 이는 결국 비즈니스 손실로 이어질 수 있습니다. 따라서 고급 접근성 기법을 배우는 것은 모든 개발자에게 필수적인 스킬입니다.

2. 핵심 개념 설명

ARIA (Accessible Rich Internet Applications)

ARIA는 동적인 콘텐츠와 사용자 인터페이스 요소들을 접근 가능하게 만들어 주는 HTML 속성 집합입니다. 예를 들어, 일반적인 HTML 요소가 아닌, JavaScript로 만들어진 복잡한 UI 구성 요소에 접근성을 추가할 수 있습니다.

비유: ARIA는 마치 복잡한 기계에 설명서를 붙여주는 것과 같습니다. 사용자가 기계의 기능을 이해하고 사용할 수 있도록 도와줍니다.

용어	설명
WAI-ARIA	웹 접근성을 향상시키기 위한 ARIA의 규칙과 지침
역할(Role)	요소가 웹에서 어떤 기능을 수행하는지 정의하는 속성
상태(State)	요소의 현재 상태를 나타내는 속성

3. 기본 코드 예제

ARIA를 사용하여 버튼을 접근 가능하게 만드는 기본 예제입니다.

<button aria-label="닫기" onclick="closeWindow()">X</button>

실행 결과: 버튼에 "닫기"라는 레이블이 추가되어 스크린 리더 사용자가 버튼의 역할을 이해할 수 있습니다.

<button>: 버튼 요소를 생성합니다.
aria-label: 버튼에 대한 텍스트 레이블을 제공합니다. 이 경우 "닫기"라는 레이블이 스크린 리더에 의해 읽힙니다.
onclick: 버튼 클릭 시 closeWindow() 함수를 실행합니다.

4. 실전 활용 예제

1. 다이얼로그 박스

쇼핑몰에서 카트 내용을 확인하는 다이얼로그 박스를 구현할 때, ARIA 속성을 사용하여 접근성을 높일 수 있습니다.

<div role="dialog" aria-labelledby="cartTitle" aria-modal="true">
    <h2 id="cartTitle">장바구니</h2>
    <button aria-label="닫기" onclick="closeCart()">X</button>
    <!-- 카트 내용 -->
</div>

상황 설명: 사용자가 장바구니 버튼을 클릭하면 다이얼로그 박스가 열리고, 이때 ARIA 속성을 통해 스크린 리더가 다이얼로그 내용을 올바르게 인지할 수 있도록 합니다.

2. 탭 패널

탭 기능이 있는 웹사이트에서 각 탭을 ARIA 속성을 사용하여 접근성을 높일 수 있습니다.

<div role="tablist">
    <button role="tab" aria-selected="true" aria-controls="tab1">탭 1</button>
    <button role="tab" aria-selected="false" aria-controls="tab2">탭 2</button>
</div>
<div id="tab1" role="tabpanel" aria-labelledby="tab1">
    내용 1
</div>
<div id="tab2" role="tabpanel" aria-labelledby="tab2" hidden>
    내용 2
</div>

상황 설명: 각 탭 버튼에 ARIA 역할과 상태를 추가하여 사용자가 어떤 탭이 선택되었는지 알 수 있도록 합니다.

5. 흔한 실수와 주의사항

실수 1: ARIA 역할을 잘못 사용하기

<div role="button">버튼</div> <!-- 잘못된 사용 -->

문제점: <div>는 버튼이 아니므로 접근성이 보장되지 않습니다.
올바른 코드:

<button>버튼</button>

실수 2: ARIA 속성 누락

<div role="dialog">내용</div> <!-- 상태나 레이블이 없음 -->

문제점: 스크린 리더가 내용을 이해하지 못합니다.
올바른 코드:

<div role="dialog" aria-labelledby="dialogTitle">내용</div>

6. 정리

ARIA 속성을 사용하여 웹 콘텐츠의 접근성을 높일 수 있다.
역할, 상태 및 레이블을 명확히 정의하는 것이 중요하다.
접근성은 사용자 경험을 향상시키고, 법적 요구 사항을 충족하는 데 필수적이다.

다음에 학습하면 좋은 주제

WCAG (웹 콘텐츠 접근성 가이드라인)
접근성 테스트 도구 사용법
스크린 리더와의 상호작용 이해하기

학습