웹 접근성을 높이기 위해 HTML과 WAI-ARIA에서 제공하는 다양한 속성을 사용할 수 있습니다. 이 속성들은 장애가 있는 사용자들이 웹 콘텐츠를 더 쉽게 접근하고 상호작용할 수 있도록 돕습니다. 주요 웹 접근성 속성들은 다음과 같습니다.
반응형
HTML 접근성 속성
- alt (대체 텍스트)
- 사용 요소: <img>
- 설명: 이미지를 설명하는 텍스트를 제공하여 시각 장애인 사용자들이 이미지를 이해할 수 있도록 돕습니다.
- 예시: <img src="image.jpg" alt="풍경 사진">
- title (제목)
- 사용 요소: 대부분의 HTML 요소
- 설명: 요소에 대한 추가 정보를 툴팁 형식으로 제공합니다.
- 예시: <button title="저장하기">💾</button>
- label (레이블)
- 사용 요소: <label>
- 설명: 입력 요소에 레이블을 제공하여 입력 필드의 용도를 설명합니다.
- 예시: <label for="name">이름:</label><input type="text" id="name">
- role (역할)
- 사용 요소: 대부분의 HTML 요소
- 설명: 요소의 역할을 명시적으로 정의하여 보조 기술이 이를 더 잘 인식하도록 합니다.
- 예시: <div role="button">클릭</div>
- aria-label (ARIA 레이블)
- 사용 요소: 대부분의 HTML 요소
- 설명: 요소의 접근성 레이블을 제공하여 시각적으로 표시되지 않는 텍스트를 설명합니다.
- 예시: <button aria-label="닫기">✖</button>
- aria-labelledby (ARIA 레이블 바이)
- 사용 요소: 대부분의 HTML 요소
- 설명: 다른 요소의 ID를 참조하여 요소의 레이블을 제공합니다.
- 예시: <h2 id="section1">섹션 1</h2><div aria-labelledby="section1">섹션 1 내용</div>
- aria-describedby (ARIA 디스크라이브드 바이)
- 사용 요소: 대부분의 HTML 요소
- 설명: 다른 요소의 ID를 참조하여 요소에 대한 추가 설명을 제공합니다.
- 예시: <input type="text" aria-describedby="desc"><div id="desc">이 입력 필드는 이메일 주소를 입력하는 곳입니다.</div>
- aria-hidden (ARIA 히든)
- 사용 요소: 대부분의 HTML 요소
- 설명: 요소를 보조 기술에서 숨깁니다.
- 예시: <div aria-hidden="true">이 내용은 스크린 리더가 무시합니다.</div>
- tabindex (탭 인덱스)
- 사용 요소: 대부분의 HTML 요소
- 설명: 요소의 탭 순서를 제어합니다.
- 예시: <button tabindex="0">첫 번째</button><button tabindex="1">두 번째</button>
- aria-expanded (ARIA 확장됨)
- 사용 요소: 대부분의 HTML 요소
- 설명: 요소가 확장되었는지 여부를 나타냅니다.
- 예시: <button aria-expanded="false">메뉴 열기</button>
- aria-pressed (ARIA 눌림)
- 사용 요소: 대부분의 HTML 요소
- 설명: 토글 버튼의 눌림 상태를 나타냅니다.
- 예시: <button aria-pressed="true">선택됨</button>
접근성 속성 사용 예제
아래는 다양한 접근성 속성을 사용한 예제 HTML 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Accessibility Example</title>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<h1>웹 접근성 예제</h1>
<!-- alt 속성을 사용한 이미지 -->
<img src="landscape.jpg" alt="아름다운 풍경">
<!-- label과 aria-labelledby 속성을 사용한 입력 필드 -->
<label id="nameLabel" for="name">이름:</label>
<input type="text" id="name" aria-labelledby="nameLabel">
<!-- role과 aria-label 속성을 사용한 버튼 -->
<div role="button" aria-label="닫기">✖</div>
<!-- aria-describedby 속성을 사용한 입력 필드 -->
<input type="text" aria-describedby="emailDesc">
<div id="emailDesc">이 입력 필드는 이메일 주소를 입력하는 곳입니다.</div>
<!-- aria-hidden 속성을 사용한 숨김 텍스트 -->
<div aria-hidden="true" class="hidden">이 텍스트는 스크린 리더가 무시합니다.</div>
<!-- tabindex 속성을 사용한 탭 순서 제어 -->
<button tabindex="1">두 번째</button>
<button tabindex="0">첫 번째</button>
<!-- aria-expanded 속성을 사용한 확장 상태 표시 -->
<button aria-expanded="false" aria-controls="menu">메뉴 열기</button>
<div id="menu" class="hidden">메뉴 내용</div>
<!-- aria-pressed 속성을 사용한 토글 버튼 -->
<button aria-pressed="false" aria-label="좋아요">👍</button>
</body>
</html>
이 예제는 다양한 웹 접근성 속성을 사용하여 웹 콘텐츠가 다양한 사용자에게 접근 가능하도록 하는 방법을 보여줍니다. 각 속성은 요소의 특정 상태나 역할을 명확하게 정의하여 보조 기술이 이를 올바르게 인식하고 사용자에게 전달할 수 있도록 합니다.
728x90
