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

WAI-ARIA 요소 - 랜드마크 역할

랜드마크 역할은 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 위해 사용될 수 있으며, 보조기술 사용자에게 랜드마크 역할을 통해 효과적인 키보드 탐색을 지원하여 웹 페이지의 탐색 경험을 향상시킬 수 있습니다. 스크린 리더는 랜드마크를 위한 키보드 탐색 명령을 제공하며, 키보드 사용자의 경우 브라우저 확장 기능을 통해 랜드마크를 활용할 수 있습니다. 키보드 사용자를 위한 랜드마크 브라우저 플러그인은 플러그인 홈페이지에서 다운로드 할 수 있습니다. 랜드마크 브라우저 플러그인 : https://github.com/matatk/landmarks 랜드마크를 적용하기 전 고려 사항 앞에서 언급하였듯 랜드마크 역할은 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 ..

2023.01.24

WAI-ARIA 요소 - alert, alertdialog

웹 페이지에서는 사용자에게 다양한 목적의 알림을 제공합니다. 이러한 알림으로는 회원가입 양식과 같은 폼 필드에서 잘못된 값 입력 시 즉각적으로 제공되는 오류 메시지나 인터넷 뱅킹과 같이 보안이 중요한 사이트에서 로그인 시간 연장과 같은 것들이 있습니다. 스크린리더 사용자에게 웹페이지의 알림을 전달하는 방법에는 여러 가지 방법이 있지만, 이번 시간에선 ARIA 역할 중 alert과 alertdialog 역할로 알림을 제공하는 방법과 alert, alertdialog 역할을 바르게 사용하는 방법을 살펴보겠습니다. alert, alertdialog 역할을 사용하여 알림을 제공할 수 있는 사례는 다음과 같은 것들이 있을 수 있습니다. 채팅 페이지에서 특정 사용자가 온라인 또는 오프라인과 같은 사용자의 상태 전환..

2023.01.24

WAI-ARIA 요소 - Accordion

아코디언(Accordion) 컨텐츠란 확장/축소를 토글할 수 있는 여러 개의 요소가 하나의 그룹으로 묶여 있는 영역을 말한다. 자주 묻는 질문과 같은 도움말 페이지에서 페이이지에 따라 다를 수 있겠으나, 각각의 질문 요소들이 토글 버튼으로 확장/축소 할 수 있고 이에 따라 그 질문에 대한 본문 컨텐츠가 나타나거나 숨겨지는 것이 한 예이다. 각각의 토글할 수 있는 객체를 아코디언 헤더, 그 버튼과 관련된 컨텐츠 영역을 아코디언 패널이라고 한다. 한 페이지에 컨텐츠 양이 많을 때 모든 컨텐츠를 다 펼쳐 놓기보다 여러 버튼을 두어 사용자의 선택에 따라 확장/축소가 가능하도록 하면 페이지 컨텐츠 이용이 더 용이할 수 있다. 그러나 스크린리더 사용자는 아코디언 요소가 확장/축소될 때 페이지 경로가 변경되지 않기에..

2023.01.24