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

ARIA Authoring Practices Guide (APG)

소개 ARIA Authoring Practices Guide(APG)는 접근성 의미론을 적절하게 전달하고 일반적인 키보드 규칙을 구현하는 웹 사이트를 개발하여 보조 기술 및 키보드 인터페이스 사용자를 위한 접근성 있는 웹 경험을 만드는 방법을 설명합니다. 또한 고대비 및 동작 감소를 위한 운영 체제 설정 지원과 같이 밀접하게 관련된 일부 주제에 대한 지침을 제공합니다. Index 아래 주소에서 자세한 샘플을 확인할 수 있다. https://www.w3.org/WAI/ARIA/apg/example-index/ Index Accessibility resources free online from the international standards organization: W3C Web Accessibility ..

2023.01.24

WAI-ARIA 접근성: aria-rable, aria-labelledby

이전 포스팅에서 WAI-ARIA의 기본적인 내용에 대해 알아봤다면 이번엔 자주 사용하는 ARIA 속성에 대해서 알아보려 한다. ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 간단하게 설명을 먼저 하자면 aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고 있고, aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다. aria-label 1. aria-label은 모든 html태그에서 사용할 수 있다. 2. 이미지를 사용해 시각적 표현을 할 경우에 대체 텍스트 역할을 한다. 일반적인..

2023.01.03

WAI-ARIA 접근성: role

WAI-ARIA 란? WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)는 W3C에서 만든 기술로, WAI-ARIA 혹은 ARIA로 불린다. 마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, JavaScript, Ajax, Vue, React 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다. ex) 버튼을 클릭하여 페이지를 새로고침이나 링크 이동으로 전환되는 것이 아닌 컨텐츠 내용이나 구조가 바..

2023.01.03