💡웹 접근성이란?
장애인이나 고령자들 모두 개인의 능력에 상관없이 웹 페이지의 정보에 접근할 수 있도록 보장하는 것.
배경지식
Accessible Name
<div>
<div>텍스트1</div>
<div>
<div>내부텍스트1</div>
<div>내부텍스트2</div>
</div>
<div>텍스트2</div>
</div>
<h1>안녕하세요</h1>
<button>누름</button>스크린리더가 위와 같은 코드로 이루어진 웹을 읽는 방법
🔈텍스트1 > 내부텍스트1 > 내부텍스트2 > 텍스트2 > 안녕하세요제목1 > 누름버튼
이와 같이 요소단위(HTML Element)를 순차적으로 포커스하며 내용을 읽는것을 알 수 있습니다.
이때 텍스트1 처럼 스크린리더가 요소를 포커스했을 때 읽는 값을 Accessible Name 이라고 합니다.
각 요소의 Accessible Name은 다음 중 하나로 결정됩니다.
- author : 특별한 속성을 사용해서 정하는 값
ex) img태그의 alt값, aria-label, aria-labelledby ... - contents : 요소의 텍스트값
(우선순위 : author > contents)
Role
- 스크린리더가 요소를 어떤 방식으로 다룰지 결정하는 속성
- Role마다 기대되는 스크린리더 동작이 있음 (Role 종류 알아보기)
- 시맨틱태그는 암시적으로 Role을 갖고있음
ex)<button>:role="button"<a>:role="link"<img>:role="checkbox"...
WAI-ARIA
WAI-ARIA란?
접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말합니다.
aria-label
- aria-label은 모든 html 태그에서 사용할 수 있다.
- 이미지를 사용해 시각적 표현을 할 경우 대체 텍스트 역할을 한다.
<div>
<a href="#"><i class="ico ico-chat"></i></a>
</div>위와같은 코드를 스크린리더는 🔈내부링크 라고 읽습니다.
시각적 어려움이 없는 사용자는 화면을 보면 이미지나 아이콘이 어떤 역할을 하는지 알 수 있지만 스크린리더 사용자는 알 수 없습니다.
바로 이런 경우에 aria-label을 사용합니다.
<div>
<a href="#" aria-label="채팅창으로 이동"><i class="ico ico-chat"></i></a>
</div>위와같은 코드를 스크린리더는 🔈채팅창으로 이동 내부-링크 라고 읽습니다.
연습
<div>안녕하세요</div>
<div aria-label="여러분">안녕하세요</div>
<img src="./img/hello.png">
<img sr="./img/hello.png" alt="안녕하세요">
<a href="join.html"></a>
<a href="join.html" arial-label="hello"></a>위와 같은 코드를 스크린리더는 다음과 같이 읽습니다.
🔈안녕하세요 -> contents
🔈여러분 -> author > contents
🔈hello 이미지 -> 요소의 텍스트값이 없어 파일명을 읽음
🔈안녕하세요 -> alt값(author)
🔈링크
🔈hello링크 -> author
aria-labelledby
- aria-labelledby는 모든 html 태그에서 사용할 수 있다.
- aria-labelledby는 숨겨져 있는 요소도 참조할 수 있다. (display:none or visibility:hidden)
- aria-labelledby와 contents(요소의 텍스트값), aria-label과 함께 사용이 된다면 aria-labelledby에 있는 내용이 최우선된다.
1️⃣
<h2 id="today-todo">오늘 할 일</h2> /*2️⃣display:none 일때도 참조*/
<ul aria-labelledby="today-todo">
<li>자바스크립트 공부</li>
<li>html/css 과제</li>
<li>알고리즘 문제풀이</li>
</ul>오늘 할 일이라는 텍스트와 아래의 list 들이 같은 그룹이고 연결되어 있다는 것은 aria-labelledby를 통해 알 수 있습니다.
3️⃣
<span id="메뉴1">메뉴1</span>
<button aria-label="메뉴2" aria-labelledby="메뉴1">
메뉴3
</button>이처럼 button에 aria-label, aria-labelledby, content 값이 모두 존재할때 스크린리더는 🔈메뉴1 을 읽습니다.
⬇️ aria-labelledby 이해를 돕는 이미지를 첨부했습니다!
UX 개선 예시
위와같은 화면의 코드가 웹접근성 측면에서 올바르게 작성되어있다면
스크린리더는 해당 버튼을 🔈카드 추가 버튼 이라고 읽어야합니다.
하지만 다음과 같은 코드로 작성되었다는 가정 후 올바르게 개선된 코드도 살펴보겠습니다.
개선 전 코드
<div onClick="{() => navigate('/register')}">
<span> + </span>
</div>개선된 코드
<button aria-label="카드 추가" onClick="{() => navigate('/register')}">
<span aria-hidden="true"> + </span>
</button>- div -> button
- aria-label="카드 추가"
- aria-hidden="true"
💡aria-hidden이란?
사용자에게 불필요한 정보를 스크린 리더가 읽지 않게 하는 속성
마무리
본 포스팅에서는 스크린리더가 어떤 기준으로 요소를 탐색하고 읽는지, 기본적으로 aria속성이 무엇인지 어떨 때 사용되는지 간단히 알아보았습니다.
그러나 aria속성은 적절한 때에 사용해야 의미가 있고 남용할 경우 오히려 웹접근성을 해칠 수 있기때문에 aira속성을 사용할때 주의해야할 점들과 알아야할 규칙에 대한 공부도 필요합니다.
또한 aria속성 사용보다는 시맨틱태그가 가진 태그고유속성을 준수하는것이 좋기때문에 웹접근성 측면에서의 시맨틱태그 사용에 대한 포스팅도 추후 추가할 예정입니다!
WAI-ARIA 접근성2. 영역에 대한 설명, 레이블 (aria-label, aria-labelledby)
[10분 테코톡] 해온, 첵스의 웹접근성 & 웹표준
[A2] 모두를 위한 모바일웹: 접근성을 준수해서 스크린리더 UX 개선하기
WAI-ARIA: role과 aria-label 사용법
