1. WAI-ARIA란?
접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)
시맨틱요소로 표현이 불가한 요소들은 스크린리더기에서 인식하지못합니다.
때문에 장애를 가진 사용자가 언제든지 접근이 가능하도록 별도로 작성해야합니다.
2. AIRA 사용 규칙
"좋은거아니야?"하고 무턱대고 사용하면 안됩니다!
스크린리더를 작동시켜보면 알 수 있겠지만 웹에는 정보가 아주 많고 그걸 다 읽어주기 때문에 정신이 없습니다.
따라서 핵심만 꼭 필요한 요소만 작성하도록 규칙이 정해져있습니다.
2.1 시맨틱요소를 최대한 활용하기
<header>, <footer>, <nav> 등 이미 존재하는 시맨틱요소들을 먼저 최대한으로 작성해주어야합니다.
❌ 오답입니다.
<div role=header>...</div>⭕️ 정답입니다.
<header>...</header>2.2 시맨틱요소와 충돌 금지
<h2>, <header> 등 의미를 담고있는 시맨틱요소에 tab 이라는 새로운 의미를 부여할 수 없습니다!
🔗 Nu Html Checker < 사이트에서 충돌여부를 확인할 수도 있습니다.
❌ 오답입니다.
<h2 role=tab>heading tab</h2>⭕️ 정답입니다.
<div role=tab><h2>heading tab</h2></div>2.3 키보드 사용보장
모든 대화형 ARIA 컨트롤은 키보드로 사용할 수 있어야 합니다.
클릭, 탭, 드래그, 슬라이드, 스크롤 등 사용자와 상호작용을 하는 요소를 대화형 콘텐츠 라고 합니다.
키보드를 사용하더라도 동등한 작업을 수행할 수 있도록 해야합니다.
<div>, <span> 등과 같이 포커스가 안되는 HTML 요소의 경우 tabindex 속성을 사용하면 포커스가 잡힙니다!
이때 tabindex 속성에 0을 지정하면 콘텐츠의 선형화 순서대로 키보드 포커스가 잡힙니다.
단 0보다 작은 값을 지정하면 키보드 포커스가 잡히지 않습니다.
❌ 포커스 안 잡힘
<span role="button" tabindex="-1">버튼입니다!</span>⭕️ 포커스 잡힘
<span role="button" tabindex="0">버튼입니다!</span>2.4 숨김 콘텐츠로 정보과잉 예방
aria-hidden=“true” 속성을 사용하게 되면, 스크린리더에 읽히지 않습니다.
장식요소 등에 적용하여 스크린리더 사용자의 정보과잉을 예방합니다.
예를 들어 'fontawesome'과 같은 이미지 폰트를 사용하게 되면, "p"가 읽힙니다.
이를 방지하기 위해 aria-hidden=“true” 속성을 적용해주면 됩니다.
<head>
<style>
.fa-dinosaur:before {content: "p";}
</style>
</head>
<html>
<body>
<i aria-hidden=“true” class="fa-dinosaur"></i>
</body>
</html>2.4.1 🚨 주의사항
aria-hidden=“true” 속성을 사용해도 대화형 콘텐츠는 포커스가 잡힐 수 있습니다..!
그렇게되면 포커스는 잡히는데 읽히지는않고... 사용자는 헷갈립니다.
스크린리더에 완전히 읽히지 않으려면 어떻게 해야할까요?
role="presentation" 와 role="none" 은 시맨틱 태그의 역할을 숨기고 싶을 때 사용합니다.
<h1 role="presentation" role="none">블로그제목</h1>위처럼 작성하게 되면 h1 은 더이상 제목의 의미를 가지고있지않습니다.
그냥 글자.. 입니다.
role="none" 은 기존 presentaion의 의미가 모호하다는 의견에서 최근에 나온 속성값입니다.
둘 다 의미는 같으니 호환성을 위해 둘 다 적어주도록 합시다.
⚡️ 스크린리더에서 완벽하게 읽히지 않는 법
<iframe role="presentation" tabindex="-1" title="hidden"></iframe>2.5 레이블 제공
모든 대화형 UI의 경우 반드시 레이블을 제공하여야 합니다.
레이블 제공을 위해 HTML의 <label> 요소를 사용하는 것을 권장하며, aria-label, aria-labelledby 등의 WAI-ARIA 관련 속성을 사용하여 레이블을 제공할 수 있습니다.
