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 요소 - tab 컨트롤

웹페이지를 마크업 할 때 의미에 맞는 요소 사용 및 키보드 접근성 구현이 중요하다. 위 내용이 중요한 까닭은 스크린리더 사용자는 포커스 되는 각각의 요소의 이름이나 상태를 통하여 페이지 구조를 파악하고 각 요소에 맞는 키보드 액션을 통해 컨트롤하기 때문이다. WAI-ARIA 접근성 기술이 보편화되기 시작하면서 이러한 중요성은 더 커지게 되었다. 그러나 WAI-ARIA와 HTML요소를 어떻게 적용해야 하는지, 또 이 요소의 키보드 접근성은 어떻게 구현해야 하는지 등에 대한 국내 자료가 부족하다. ARIA를 이용한 tab 컨트롤 구현하기 tab 이란 주메뉴, 하위 메뉴보다는 작은 개념으로, 한 주제에 대해 여러 개의 세부 섹션을 표현하는 방법 중의 하나다. Tab은 3가지의 요소로 나뉜다. Tab list ..

2023.01.24

스크린리더가 이미지를 무시하는 방법 4가지

1. CSS의 background 속성 사용 .image {background-image: url(bg.gif);} 2. 태그에 alt 속성을 빈 값으로 사용 3. aria-hidden="true" 사용 4. role="presentation" 사용 참고:) https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/ignore#less-than-img-greater-than-aria-hidden 제발 나를 무시해 주세요. - WCAG 2.1 항공사 WAI-ARIA 적용사례 1번 방법으로 사용하게 되면 스크린리더는 해당 영역을 "p"로 읽게 되어 스크린리더 사용자는 무엇을 읽는지 알 수 없게 된다. 2번 방법으로 사용하면 스크린리더는 해당 문구를 읽으려고 부단히 aoa.gitbo..

2023.01.03

WAI-ARIA 접근성: role, properties, states

ARIA role (역할) 특정 요소에 역할 정의, 사용자에게 정보 제공, 부여한 역할 동적 변경 불가 ARIA role 속성 role="application" 동일요소x, div 요소와 같이 그룹역할을 하는 요소로 대체 role="banner" 비슷한 의미로 사용 가능 로 사용 시 1페이지에서 1개만 사용하기를 권장 role="navigation" 와 동일 role="main" 과 동일 1페이지 내에 1개만 사용 가능하다. 본문의 주요 컨텐츠 영역 role="aside" 와 동일, 주요 컨텐츠와 연관이 적은 의미를 가진 영역 role="form" 과 동일 서버에 전송될 수 있는 컨텐츠, 폼 관련 요소의 모임 role="search" 검색 역할을 담당하는 서식 영역, 또는 에 사용 권장 role="con..

2023.01.03

WAI-ARIA 접근성: aria-hidden

숨김 제목과 같이 일부 컨텐츠를 숨길 필요가 있다. 컨텐츠를 숨기는 방법으로는 CSS를 활용해 display:none, visibility:hidden을 활용할 수 있다. 이러한 기술은 웹 페이지에서 보이지 않을 뿐만 아니라 스크린 리더와 같은 보조 기술로도 탐색이 불가능하다. aria-hidden aria-hidden은 스크린 리더와 같은 보조 기술을 사용하는 사용자를 대상으로 콘텐츠의 탐색을 제한합니다. aria-hidden이 "true"로 설정되면, 스크린 리더로 해당 컨텐츠를 가상 커서로 탐색할 수 없습니다. 스크린리더(보조기기)가 접근하는 것은 원치 않지만, 시각적으로 디자인을 주기 위해서 보여지게 하고 싶은 경우에 사용 div팝업을 띄울 때 팝업에 초점맞추기 위해 사용 aria-hidden 사..

2023.01.03

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