aria-hidden 알아보기 (span에 onClick 달았다가 린트 규칙 어긋나는 문제)

상황 🌈

개발을 하다가 span에 click event를 추가해야 하는 상황이 있었다.

/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */

...

<span onClick={something}>hello</span>

린트 에러 때문에 위에 린트 규칙을 무시한다는 문구를 써야 했다ㅠㅠ

내가 무시한 규칙들..

• jsx-a11y/click-events-have-key-events : click event 를 가지면 key event가 필요하다는 규칙 : 마우스 없이 키보드만 사용하는 사람. 스크린 리더 사용자에게 필요함. 참고
• sx-a11y/no-static-element-interactions : span은 접근성 면에서 semantic하게 연결이 되어 있지 않다. 스크린 리더 사용자에게 이게 버튼 역할을 한다는 걸 전달할 수 없다. 그래서 마우스, 키 이벤트를 추가하려면 role을 줘야 한다. 참고

 

해결 🎉

이런 상황에서 aria-hidden을 true로 하면 린트 규칙을 무시하지 않아도 된다는 리뷰를 받았다!!
신기하게 그 말대로 하니 린트 규칙을 무시하지 않아도 됐다! aria-hidden.. 들어는 봤는데 확실히 몰라서 알아봤다.

 

더 알아보기 📚

해당 엘리먼트가 접근성 api에 노출되는지 여부를 결정한다고 한다. interactive하지 않은 컨텐츠를 accessibility API로부터 숨길 수 있다. aria-hidden을 true로 하면 그 요소와 그 자식 요소들이 접근성 트리에서 제거된다.

그래서 스크린 리더 등 보조 도구를 사용하는 사람들이 더 편한 경험을 할 수 있다고 한다!

사용 예시 : 특정 기능을 가진 게 아니라 이미지, 아이콘 등 데코레이션 요소, 중복된 문구, 화면에 나오지 않는 콘텐츠에 적용하는 게 좋다고 한다.

주의

• 포커스되는 요소에 사용하면 안된다.
• 이 속성을 쓴다고 해서 hide되지는 않는다.

 

내가 span에 onClick을 사용했던 상황은 비밀번호 인풋에서 눈 (eye) 모양 아이콘이었다. 누르면 @@@@ 이런 식으로 보이던 비밀번호를 문자로 보여주는 역할이라서 aria-hidden:true로 해도 될 것 같다 !

 

출처 📝🔖

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

aria-hidden - Accessibility | MDN