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

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