[HTML] 접근성을 위한 또 다른 방법 - ARIA Role

안녕하세요 WEB YB 36기 고제성입니다!

웹 접근성을 주제로 다른 분들도 많이 해주셔서 컨텐츠가 살짝 겹치는 감이 있지만 ARIA에 속성에 대해서 다룬 분은 안 계신 것 같아서 제 경험과 지식을 토대로 한 번 소개해드리면 어떨까 합니다..! 잘 부탁드립니다

이 주제를 고른 이유

1주차 세미나 때 SEO 검색엔진과 시멘틱 태그를 활용한 접근성에 관한 내용을 배우게 되어서 접근성에 대한 제 얕은 지식에 구글링을 더해서 ARIA Role에 대해서 설명해드리려 합니다!

 

어떻게 알게 됨?

개인 프로젝트를 진행하면서 팀원들이 해주는 코드 리뷰보다 더 객관적이고 자세한 리뷰를 받아보고 싶어서 정적 코드 분석 도구인 Sonar Qube(관례나 가독성 측면에서 컴포넌트 재활용을 안했다거나 코드가 못생기면 수많은 잔소리를 제공하는 서비스)를 도입하게 되었습니다!

시멘틱 태그에 무지했던 시절,,, 아무리 봐도 버튼처럼 생기지 않았는데 onClick 이벤트를 줘야하는 상황이 발생했고

'클릭만 되면 되지 뭐 상관 없잖아!'하고 div에 onClick 이벤트를 할당하고 PR을 올려보니

Replace this <div> with a button element or make it interactive.

 

Button처럼 안 생겨서 div 썼는데 button을 쓰라는 경고가 뜨는 모습에 기분이 안 좋아졌고

 

찾아보니 키보드, 스크린 리더 사용자에게 혼동을 줄 수 있고 결국 크롤링하는 검색 엔진 로봇에게 우리 서비스를 소개할 때 방해가 될 수 있다는 사실을 알게 되었습니다

 

어떻게 고쳐야하는지 방법을 찾던 중

1. <div role = "button"/>(사실 이렇게도 쓰면 안됨!)

2. <div onClick={() => {}} onKeyDown={this.handleKeyDown} />

 

이런 두 가지 해결 방안을 제안해 주었고 여기서 role이라는 Aria의 속성을 처음 알게 되었습니다.

 

Role이 뭐지?

role은 WAI-ARIA라는 웹 접근성을 위한 도구의 속성 중 하나입니다.(aria-label, aria-labelledby, role 개념이 존재하고 그 중 하나!)

더 자세히 설명하자면 HTML 요소의 기능과 목적을 명확하게 정의하여 보조 기술(ex. 스크린 리더)로 올바른 정보를 전달하는 데 도움을 주는 도구! 정도로 설명할 수 있을 것 같습니다

 

어떻게 쓸까

기본적인 사용법은

<element role="역할이름">콘텐츠</element>

이런 형식이고 role로 어떤 역할을 가지고 있는지 자세히 설명할 수 있습니다!

 

role에는 정말 정말 다양한 역할이 있어서(menu, grid, tree, link, img, article, button, search.........) HTML의 태그만으로 전달하지 못하는 내용들을 role을 통해 전달해줄 수 있습니다!!

 

그럼 시멘틱 태그는 왜 씀?

role의 역할에는 시멘틱 태그에 있는 대부분의 element들을 부여할 수 있습니다(종류도 시멘틱 태그의 거의 10배는 되는 수준!!)

그럼 div에 role을 주면 시멘틱 태그보다 더 자세하게 역할을 알려줄 수 있을텐데 왜 시멘틱 태그를 사용하는 걸까요?

사실 여러분이 생각하는게 정답입니다.. 

아무리 생각해봐도 <div role = "button"/> 보다는 <button/>이 가독성이 더 좋아 보이기 때문이죠! ㅋㅋ

심지어 <button/>이나 <nav/>같은 role에 있는 태그들을 사용하면 해당 태그들은 자동으로 role="button", role="role"의 의미를 부여받게 됩니다

 

따라서 시멘틱 태그와 ARIA role을 잘 사용하려면

HTML에 해당하는 태그가 없을 때나, 더 구체적인 역할을 부여하고 싶을 때!

ex)

<section role="tab"/>
<section role="search"/>

요런식으로 시멘틱 태그와 ARIA role은 상호보완해주는 존재이기 때문에 서로 부족한 부분을 채워주며 사용하면 됩니다!

 

 

마무리

공유 과제에서는 ARIA role이 어떤 건지에 대해서만 설명드렸지만!

ARIA Role의 카테고리, ARIA Role 사용 규칙, 고려사항 등 ARIA Role을 잘 쓰고 싶다면 얼마든지 더 찾아서 ARIA Role의 고수가 될 수 있다는 걸 말씀드리며 마무리하겠습니다