WebAccessbility
웹 접근성은 장애인, 노인, 임산부 등 모든 사용자가 웹 콘텐츠를 이용할 수 있도록 설계하는 것을 의미한다. 시각, 청각, 운동 능력 등에 제약이 있는 사용자도 웹 사이트를 탐색하고 정보를 이해하며 상호 작용할 수 있도록 돕는 것이 중요하다.
기본적인 원칙(POUR)
인식의 가능성(Perceivable)
정보와 사용자 인터페이스 구성 요소는 사용자가 인식할 수 있어야 한다.
대체 텍스트 사용
멀티미디어에 대한 자막 제공
콘텐츠를 들을 수 있고 보는 방식을 조절할 수 있게 함
운용 가능성(Operable)
사용자 인터페이스 구성 요소와 탐색은 조작 가능해야 한다.
모든 기능을 키보드로만 사용할 수 있게 함
충분한 시간 제공
발작을 유발하지 않는 콘텐츠를 제공
이해 가능성(Understandable)
정보와 사용자 인터페이스 운용은 이해하기 쉬워야 한다.
콘텐츠의 가독성와 이해성을 높임
예측 가능한 웹 페이지와 인터페이스 제공
입력 오류를 방지하거나 수정하는 메커니즘 제공
견고성(Robust)
콘텐츠는 다양한 사용자 에이전트(포함하여 보조 기술)에 의해 신뢰성 있게 해석 될 수 있어야 한다.
최신 기술의 호환성 유지
코드의 견고성을 확보
ARIA(Accessible Rich Internet Applications)
웹 콘텐츠와 웹 애플리케이션을 장애가 있는 사용자들에게 더욱 접근하기 쉽게 만들어주는 방법을 제공하는 W3C(World Wride Web Consortium)의 기술 사양이다. 이는 주로 시각 장애인들이 스크린 리더를 사용할 때, 더 풍부하고 상호작용이 많은 웹 경험을 할 수 있도록 돕는다.
역할 (Roles)
HTML 요소의 역할을 명시적으로 정의한다.
예를 들어, **
role="button"**은 일반적인 **<div>**나<a>태그를 버튼처럼 작동하게 만든다.
button
버튼
클릭 가능한 버튼
menuitem
메뉴 항목
드롭다운 메뉴의 각 항목
textbox
텍스트 입력 필드
사용자가 텍스트를 입력하는 필드
checkbox
체크박스
선택 가능한 옵션
radiobutton
라디오 버튼
여러 옵션 중 하나만 선택 가능한 버튼
link
링크
다른 웹 페이지로 이동 가능한 링크
heading
제목
웹 페이지의 제목 및 섹션 헤더
landmark
주요 영역
웹 페이지의 주요 영역 (예: 네비게이션, 메인 콘텐츠)
search
검색
검색 기능
속성
요소의 상태나 특성을 설명한다.
예를 들어
aria-disabled="true"는 요소가 비활성되었음을 나타낸다.
aria-labelledby
요소의 레이블을 지정하는 ID 참조
텍스트 입력 필드와 레이블 연결
aria-pressed
버튼의 눌려진 상태
버튼이 눌려 있는지 여부를 나타냄
aria-selected
선택된 항목 표시
드롭다운 메뉴에서 선택된 항목 표시
aria-checked
체크박스 또는 라디오 버튼의 선택 상태
체크박스 또는 라디오 버튼이 선택된지 여부를 나타냄
aria-valuenow
현재 값 표시
범위 입력 슬라이더의 현재 값
aria-valuemax
최대 값 표시
범위 입력 슬라이더의 최대 값
aria-valuemin
최소 값 표시
범위 입력 슬라이더의 최소 값
상태
요소의 상태 변화를 실시간으로 보조 기술에 알려준다.
예를 들어
aria-expended는 드롭다운 메뉴의 열림 상태를 나타낸다.
aria-selected
선택된 항목 표시
드롭다운 메뉴에서 선택된 항목 표시
aria-hidden
요소가 보이지 않는지 여부
접근성 메뉴를 숨김
aria-disabled
요소가 사용 불가능한지 여부
버튼을 비활성화
사용 예제
<div role="navigation" aria-label="메인 네비게이션">
<ul>
<li><a href="#home" aria-current="page">홈</a></li>
<li><a href="#services">서비스</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</div>
Last updated