트리뷰의 정의 - TreeView가 뭔가요? 트리뷰(TreeView)는 한글로 단순하게 풀어보면 “나무 구조로 보기” 정도로 해석됩니다. 이름 그대로 나무처럼 한 줄기에서 여러 개의 가지로 나뉘는 세로 막대 형태로 나열된 항목의 목록을 말합니다. 어디서 볼 수 있는 요소인가요? windows의 UI를 상속받아서 사용하는 응용 프로그램에서 주로 볼 ...

aria-roledescription 소개 aria-roledescription은 이름에서 바로 기능을 알 수 있듯이, 요소 역할(role)의 역할을 커스터마이징하여 전달하는 것입니다. <a href="..." aria-roledescription="Banner link">가을 난방 30% 할인</a> aria-roledescr...

편집 가능한 텍스트 편집창에 사용자가 내용을 입력할 때, 추천 목록을 제공하여 키보드 또는 마우스로 원하는 추천항목을 선택하여 완성하는 자동완성 편집창 기능을 WAI-ARIA를 중심으로 다룹니다. 이번 아티클은 크게 두 개의 부문으로 나뉩니다. 자동완성 편집 창의 유형 접근 가능한 자동완성 편집 창 구현하기 자동완성 편집 창의 유형 자...

숫자를 조절하는 컨트롤 요소인 WAI-ARIA의 커스텀 슬라이더 위젯의 소개, 접근성이 지켜진 커스텀 슬라이더 위젯을 위한 올바른 마크업 방법 및 주의점에 대해 살펴보도록 하겠습니다. 또한, 스크린 리더 사용자를 포함한 키보드 사용자의 키보드 상호작용에 대해서도 살펴봅니다. 슬라이더 컨트롤 요소란? 슬라이더 요소는 숫자를 마우스 또는 키보드로 줄이거...

웹페이지의 탐색을 돕기 위해 사용되거나 또는 복잡한 웹 앱에서 빠질 수 없는 요소인 메뉴 위젯을 ARIA를 사용하여 바르게 마크업하는 방법 및 주의점에 대해 살펴보겠습니다. 또한, 스크린 리더 사용자, 키보드 사용자의 메뉴 탐색을 위한 키보드 적용에 대해서도 살펴봅니다. 웹페이지 및 SPA(single page application)에서의 메뉴는 크...

WAI-ARIA 에서는 보조기술 사용자를 위해 컨텐츠의 노출 여부를 제어하는 aria-hidden, Modal 및 탭 컨트롤과 같은 복잡한 위젯 제작 시 HTML 요소의 기본 역할을 적절한 ARIA 역할로 대체하기 위한 presentation 및 none 역할이 있습니다. 이번 시간에는 aria-hidden 상태를 사용하여 스크린 리더와 같은 보조기...

랜드마크 역할은 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 위해 사용될 수 있으며, 보조기술 사용자에게 랜드마크 역할을 통해 효과적인 키보드 탐색을 지원하여 웹 페이지의 탐색 경험을 향상시킬 수 있습니다. 스크린 리더는 랜드마크를 위한 키보드 탐색 명령을 제공하며, 키보드 사용자의 경우 브라우저 확장 기능을 통해 랜드마...

웹 페이지에서는 사용자에게 다양한 목적의 알림을 제공합니다. 이러한 알림으로는 회원가입 양식과 같은 폼 필드에서 잘못된 값 입력 시 즉각적으로 제공되는 오류 메시지나 인터넷 뱅킹과 같이 보안이 중요한 사이트에서 로그인 시간 연장과 같은 것들이 있습니다. 스크린리더 사용자에게 웹페이지의 알림을 전달하는 방법에는 여러 가지 방법이 있지만, 이번 시간에...

아코디언(Accordion) 컨텐츠란 확장/축소를 토글할 수 있는 여러 개의 요소가 하나의 그룹으로 묶여 있는 영역을 말한다. 자주 묻는 질문과 같은 도움말 페이지에서 페이이지에 따라 다를 수 있겠으나, 각각의 질문 요소들이 토글 버튼으로 확장/축소 할 수 있고 이에 따라 그 질문에 대한 본문 컨텐츠가 나타나거나 숨겨지는 것이 한 예이다. 각각의 토...

웹페이지를 마크업 할 때 의미에 맞는 요소 사용 및 키보드 접근성 구현이 중요하다. 위 내용이 중요한 까닭은 스크린리더 사용자는 포커스 되는 각각의 요소의 이름이나 상태를 통하여 페이지 구조를 파악하고 각 요소에 맞는 키보드 액션을 통해 컨트롤하기 때문이다. WAI-ARIA 접근성 기술이 보편화되기 시작하면서 이러한 중요성은 더 커지게 되었다. ...