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

WAI-ARIA 요소 - role="slider"

숫자를 조절하는 컨트롤 요소인 WAI-ARIA의 커스텀 슬라이더 위젯의 소개, 접근성이 지켜진 커스텀 슬라이더 위젯을 위한 올바른 마크업 방법 및 주의점에 대해 살펴보도록 하겠습니다. 또한, 스크린 리더 사용자를 포함한 키보드 사용자의 키보드 상호작용에 대해서도 살펴봅니다. 슬라이더 컨트롤 요소란? 슬라이더 요소는 숫자를 마우스 또는 키보드로 줄이거나, 늘릴 수 있는 막대 형태의 요소로, 안드로이드 운영체제에서는 시크 바(seek bar) 라고 불리며, 수치를 조절하는 컨텐츠에 주로 사용됩니다. 커스텀 슬라이더의 등장 배경 : range 입력 서식의 소개 웹에서의 슬라이더는 크게 두 가지 방법으로 제공할 수 있습니다. 첫 번재는 태그를 이용한 네이티브 마크업 방법이 있으며, 두 번째는 자바스크립트의 라..

2023.01.24

WAI-ARIA 요소 - menu role

웹페이지의 탐색을 돕기 위해 사용되거나 또는 복잡한 웹 앱에서 빠질 수 없는 요소인 메뉴 위젯을 ARIA를 사용하여 바르게 마크업하는 방법 및 주의점에 대해 살펴보겠습니다. 또한, 스크린 리더 사용자, 키보드 사용자의 메뉴 탐색을 위한 키보드 적용에 대해서도 살펴봅니다. 웹페이지 및 SPA(single page application)에서의 메뉴는 크게 두 가지로 정의할 수 잇습니다. 첫 번째로, 일반적인 웹페이지 탐색 시 사용되는 주메뉴, 서브메뉴와 같은 사이트 탐색에 필요한 네비게이션 형태이며, 두 번째로, 구글 문서와 같은 웹 앱에서의 파일 열기, 도구 메뉴와 같은 데스크톱 형태의 메뉴로 구분할 수 있습니다. 일반적으로 메뉴를 마크업할 때 ul 요소를 메뉴 컨테이너로 사용하며, ul 요소에 포함된 l..

2023.01.24

WAI-ARIA 요소 - aria-hidden, aria-Modal, presentation 역할 및 none 역할 바르게 사용하기

WAI-ARIA 에서는 보조기술 사용자를 위해 컨텐츠의 노출 여부를 제어하는 aria-hidden, Modal 및 탭 컨트롤과 같은 복잡한 위젯 제작 시 HTML 요소의 기본 역할을 적절한 ARIA 역할로 대체하기 위한 presentation 및 none 역할이 있습니다. 이번 시간에는 aria-hidden 상태를 사용하여 스크린 리더와 같은 보조기술 사용자에게 컨텐츠를 숨기는 방법과 presentation 역할 및 ARIA 1.1에 도입된 presentation 역할과 동일한 none 역할을 바르게 사용하는 방법에 대해 살펴보겠습니다. aria-hidden 웹페이지 제작자는 웹 페이지의 일부 컨텐츠를 숨길 필요가 있습니다. 대표적으로, 버튼을 클릭했을 때 관련 컨텐츠가 펼쳐지거나, 탭 위젯에서 탭을 활..

2023.01.24