2023.05.04[웹 접근성]

📖오늘 배운  것

WAI-ARIA

: RIA의 웹접근성에 대한 표준 기술 규격

RIA란?

정적인 웹사이트가 아닌 자바스크립트 등을 이용하여 동적인 UX를 제공하는 웹 애플리케이션

 

자바스크립트에서 주로 사용하는 div 태그는 태그 자체에 의미가 없기 때문에 스크린리더기 등의 보조기기에서 기능을 명확하게 파악하기가 어렵다고 한다. 그래서 해당 태그에 대한 정보를 제대로 전달하고자 하는 목적으로 WAI-ARIA를 통해 역할, 속성, 상태에 대한 정보를 추가할 수 있다.

 

즉, WAI-ARIA는 웹접근성 향상을 위한 방법 중 하나!

WAI-ARIA에서는 role, aria-* 속성을 통해서 해당 태그에 대한 역할, 상태, 속성 정보를 보조기기에 제공할 수 있다.

 

role

탭, 탭 패널의 경우 role='tablist | tab | tabpanel' 을 통해서 해당 태그의 정보를 역할을 제공할 수 있다.

 

탭뿐만 아니라 laert, dialog, status 등 다양한 역할이 존재한다! 하지만 주의할 점은 HTML5의 시맨틱 태그와 중복해서 사용하지 않아도 되고 의미를 가진 HTML 요소를 변경해서는 안된다. 

즉, 시맨틱 태그가 존재하는 경우 해당 태그를 먼저 사용하고 이에 대한 보조 용도로 WAI-ARIA를 사용해야 한다.

X
<h1 role="button">태그의 의미를 변경하면 안됨!</h1>
○
<h1><button>필요한 경우 태그를 분리해서 사용하자</button></h1>

 

 

aria-label / aria-labelledby / aria-describedby

현재 요소에 대한 설명을 제공한다.

label 속성보다 labelledby 속성이 우선순위가 높음!

<section aria-labelledby="LZ-PATH" hidden>
    <h2 id="LZ-PATH">레진패스란?</h2>
    <p>이 작품의 유료 에피소드 열람 시 자동으로 구매합니다.</p>
</section>

출처: https://github.com/lezhin/accessibility/tree/master/aria#aria-labelledby

 

 

이 외의 속성들은 웹 접근성을 높이면서 공부하는 중!

 

💭배운 점

사실 웹 접근성이라고 하면 시맨틱 태그나 alt 속성 밖에 몰랐는데 이런 규격이 있다는 걸 몰랐다니 반성했다. 사실 가장 중요한 요소라고 생각한다. 장애인 차별을 없애려면 비장애인이 사용하는 모든 기능과 편의를 장애인도 똑같이 누릴 수 있어야 한다. 그렇기 때문에 웹 접근성은 필수라고 생각한다. 그들도 우리와 똑같이 사이트를 아무 불편함 없이 사용할 수 있어야하기 때문에!

그래서 이러한 규격을 보니 생각보다 많은 속성이 있고 이러한 속성을 자연스럽게 사용할 수 있도록 자주 사용하면서 익숙해져야 한다는 생각이 들었다. 프로젝트에 웹 접근성을 높이려고 리팩토링 하면서 차크라에서 해당 부분을 잘 구현해두었구나하는 생각이 들었다. 솔직히 저 많은 속성을 보고 생각보다 오래걸리는 작업이 되려나? 하고 봤는데 평소에 아무 생각 없이 지나갔던 차크라 태그 내의 속성들이 사실은 다 WAI-ARIA 였던 것이다! 세상에! 이것까지 이미 다 고려되어있다니 매우 편리하다! 라는 생각을 했다. 컴포넌트 단위로 스타일을 지정하는 것의 장점인 것 같다! 하지만 사용하면서 lighthouse에서 충돌이 나거나 개선하라는 부분이 있었는데 내가 컴포넌트를 잘못 사용한 건지... 방법을 찾아봐야 할 것 같다!