웹접근성 준수 가이드

보호되어 있는 글입니다.

2023.05.31

React 접근성

보호되어 있는 글입니다.

2023.05.31

WAI-AREA 실무 예제 코드로 적용하기

WAI-ARIA는 HTML의 접근성 문제를 보완하는 W3C 명세입니다. WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 컨텐츠의 '역할(roles), 상태(states), 속성(properties)' 정보를 보조기기에 제공합니다. WAI-ARIA 속성을 모든 HTML 요소에 무분별하게 사용할 수 있는 것은 아닙니다. role 또는 aria-* 속성을 특정 HTML 요소에 사용할 수 있는지 ARIA in HTML 명세를 검토하면서 적용해야 합니다. ARIA in HTML : https://www.w3.org/TR/html-aria/ 0. 선택된 요소를 표현하는 방법으로 ::after WAI-ARIA를 사용할 수 없는 경우, 선택된 요소를 표현하는 방법으로 ::after 를 이용..

2023.01.28

WAI-ARIA 요소 - TreeView

트리뷰의 정의 - TreeView가 뭔가요? 트리뷰(TreeView)는 한글로 단순하게 풀어보면 "나무 구조로 보기" 정도로 해석됩니다. 이름 그대로 나무처럼 한 줄기에서 여러 개의 가지로 나뉘는 세로 막대 형태로 나열된 항목의 목록을 말합니다. 어디서 볼 수 있는 요소인가요? windows의 UI를 상속받아서 사용하는 응용 프로그램에서 주로 볼 수 있습니다. 멀리 가지 않고, Logo + E 를 눌러 탐색기 (explorer)를 열면 따로 보이지 않게 설정하지 않았다면 기본값으로 탐색기 좌측에 있는 폴더 디렉토리를 이동하는 트리뷰를 볼 수 있습니다. 보이지 않는다면, 탐색기의 윗 부분에 있는 리본 탭에서 "보기"를 선택하고, 가장 왼쪽에 있는 "탐색 창" 메뉴를 확장하여 "탐색 창" 항목을 활성화해보세..

2023.01.24

WAI-ARIA 요소 - aria-roleDescription

aria-roledescription 소개 aria-roledescription은 이름에서 바로 기능을 알 수 있듯이, 요소 역할(role)의 역할을 커스터마이징하여 전달하는 것입니다. 가을 난방 30% 할인 aria-roledescription은 WAI-ARIA 1.1 부터 추가된 WAI-ARIA의 속성으로, 이미 정해진 요소의 역할을 더 명확하게 만드는데 사용합니다. 이미지를 예로 들면 단순한 그래픽이 아니라, "thumbnail graphic"처럼, 무엇에 사용하는 이미지인지 정확히 사용자에게 알려주고자 할 때 사용하는 것 입니다. 이 외에는 HTML5 에서 따로 정의하진 않았지만, 익히 알려진 영역이나 위젯의 역할을 안내하고자 할 때 사용합니다. aria-roledescription의 문제점 ar..

2023.01.24

WAI-ARIA 요소 - 자동완성 편집창의 올바른 구현방법

편집 가능한 텍스트 편집창에 사용자가 내용을 입력할 때, 추천 목록을 제공하여 키보드 또는 마우스로 원하는 추천항목을 선택하여 완성하는 자동완성 편집창 기능을 WAI-ARIA를 중심으로 다룹니다. 이번 아티클은 크게 두 개의 부문으로 나뉩니다. 자동완성 편집 창의 유형 접근 가능한 자동완성 편집 창 구현하기 자동완성 편집 창의 유형 자동완성 편집창은 사용자의 상호작용 방법에 따라 크게 다음과 같은 세 가지 유형으로 나눌 수 있습니다. 직렬완성(inline) 형 목록선택(list) 형 복합(both) 형 직렬(inline)형 자동완성 직렬 완성형 자동완성 기능은 편집 중인 사용자에게 목록을 별도로 제공하지 않고, 캐럿 뒤에 사용자가 입력한 글자로 시작하는 단어가 입력되며, 블록으로 선택됩니다. 사용자가 추..

2023.01.24