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-label	요소에 대한 텍스트 레이블 제공	이미지에 대한 설명 제공
aria-labelledby	요소의 레이블을 지정하는 ID 참조	텍스트 입력 필드와 레이블 연결
aria-pressed	버튼의 눌려진 상태	버튼이 눌려 있는지 여부를 나타냄
aria-selected	선택된 항목 표시	드롭다운 메뉴에서 선택된 항목 표시
aria-checked	체크박스 또는 라디오 버튼의 선택 상태	체크박스 또는 라디오 버튼이 선택된지 여부를 나타냄
aria-valuenow	현재 값 표시	범위 입력 슬라이더의 현재 값
aria-valuemax	최대 값 표시	범위 입력 슬라이더의 최대 값
aria-valuemin	최소 값 표시	범위 입력 슬라이더의 최소 값

상태

• 요소의 상태 변화를 실시간으로 보조 기술에 알려준다.

• 예를 들어 aria-expended는 드롭다운 메뉴의 열림 상태를 나타낸다.

aria-checked	체크박스 또는 라디오 버튼의 선택 상태	체크박스 또는 라디오 버튼이 선택된지 여부를 나타냄
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>