🧐 aria-hidden에 대해 알아보자.
aria-hidden은 스크린 리더와 같은
보조 기술을 사용하는 사용자를 대상으로 콘텐츠의 탐색을 제한함.
aria-hidden이 "true"로 설정되면,
스크린 리더로 해당 콘텐츠를 가상 커서로 탐색할 수 없음.
스크린리더(보조기기)가 접근하는 것은 원치 않지만, 시각적으로 디자인을 주기 위해서 보여지게 하고 싶은경우에 사용
사용하는 이유는?
제목을 숨기는 것 같이, 일부 콘텐츠를 숨길 필요가 있음.
(이 외에도 콘텐츠 숨김 방법은 css -> display:none. visiblility:hidden 활용)
사용방법은?
aria-hidden은 키보드,마우스 사용자 등 모든 사용자를 대상으로 숨기는 방법이 아니기 때문에 사용에 주의해야 함.
또한 link,btn 같이 초점 받을 수 있는 요소를 aria-hidden으로 숨긴 경우, 키보드 또는 마우스 사용자가 해당 컨트롤에 초점이 제공되어 탐색에 혼란을 줄 수 있어, 컨트롤에 대한 초점을 제거해야함.
aira-hidden: true
스크린 리더와 같은 보조기술 사용자의 콘텐츠 탐색을 제한함.
aria-hidden이 "true"로 설정된 콘텐츠는 스크린 리더의 가상 커서에서 탐색되지 않음.
ul, table과 같이 하위 요소를 포함할 수 있는 요소에
aria-hidden을 "true"로 설정하면 하위 요소까지 숨길 수 있음.
aira-hidden: true
접근성 API가 스크린 리더와 같은 보조기술 사용자에게 숨겨진 콘텐츠를 노출하여 콘텐츠를 탐색할 수 있음.
온전히 나를 위한 코딩 기록 공간