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

스크린리더가 이미지를 무시하는 방법 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 접근성: aria-hidden

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

2023.01.03