안녕, velog.
내가 돌아왔다.
velog를 열심히 적겠다고 다짐해놓고서는 안적은지 몇달이 지났다.
아무튼 서론은 건너뛰고, 본론으로 들어가자.
- 개요
Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
서론은 건너뛰자고 해놓고서는 개요부터 쓰고 앉았다.
오늘 우리는 해당 에러가 뜨는 이유와 임시 해결 방안을 알아볼 것이다.
React를 사용했으면 빠르게 해결할 수 있었겠지만, 오늘은 유감스럽게도 react도 next도 아니다. 그러므로 조금 길어질수도 있다.
그럼 이제 천천히 하나씩 알아보자.
aria-hidden이 무엇인가
aria-hidden : 해당 엘리먼트가 접근성 api에 노출되는지 여부를 나타냄
⇒ aria-hidden을 true로 하면 접근성 트리에서 제거됨
조금 더 쉽게 말하자면…
aria-hidden이 true일 경우
⇒ 보이기는 하지만, 상호작용을 할 수는 없다!
솔직히 나는 aria-hidden 써본 적 없다.
하지만, 로고 이미지 같은 부분에 aria-hidden을 사용해도 괜찮을 것 같다.
다음에 코딩할 때는 한 번 써먹어보도록 하자.
그래서 오류 왜 뜨는거임?
일단 아아아아주 정직하게 저 오류 내용을 긁어서 번역기에 넣어보자.
요소의 후손이 초점을 유지하기 때문에 요소에 숨겨진 아리아를 차단했습니다. 보조 기술 사용자에게 초점을 숨겨서는 안 됩니다. 초점이 맞는 요소나 그 조상에 숨겨진 아리아를 사용하지 마세요. 대신 비활성 속성을 사용하는 것을 고려하면 초점을 맞출 수도 있습니다. 자세한 내용은 WAI-ARIA 사양의 아리아 숨겨진 섹션(https://w3c.github.io/aria/ #aria-hidden)을 참조하세요.
뭐라는거야? 싶더라도 자세히 살펴보자.
... 의역하자면 aria-hidden이 있는 요소의 하위 요소 중에 focus된 요소가 존재하기 때문에 오류가 뜬 것 같다. focus 되어 있던 부분이 aria-hidden으로 인해 숨겨지며 보조 기술 사용자의 접근성이 떨어지기 대문에 생긴 오류같다.
...
엥?
이거 보조 기술 사용자의 접근성이 떨어져서 오류가 뜨는거지, 사실 기능에는 문제 없는거 아니야?
하는 의문이 드는 사람도 있을것이다.
그리고 그 의문은...
정답이다, 개발자!
이 오류는 자신이 개발하는 웹프로젝트의 사용자가 한정되어있을때는 알빠임?하고 무시해도 괜찮을 것 같다. 하지만 우리는 일단 해결방법도 찾아보기로 하자.
해결방법을 찾아보자
자, 우선 React를 쓰는 사람들은 다른 좋은 블로그도 많으니 빨리 그 쪽으로 이동하시고...
https://github.com/mui/material-ui/issues/43106
https://ngost.tistory.com/130
그럼 이제 제각각의 이유로 react가 아니라 html, css, js (혹은 jsp)로 개발하는 사람들! 우선 chatGPT를 켜라.
난 그대들의 코드를 모르기 때문에 실용적인 이야기는 하지 못한다.
구체적인건 자신의 코드를 GPT에게 넘기고 물어보자.
우선, 당연한 이야기를 해보자.
1. 코드에 쓰여진 aria-hidden을 다른 것으로 대체해보자!
aria-hidden을 어떤 용도로 썼는지에 따라 대체할 코드는 달라진다.
display: none을 사용할 수도 있고... visibility: hidden을 사용할지도 모른다.
하지만 aria-hidden의 "눈에는 보이지만 상호작용을 할 수는 없다"부분을 보고 사용한 사람이라면 대체적으로 inert가 맞을 것이라고 추천해준다.
aria-hidden보다도 더 강력하게 해당 요소를 비활성화시키는 방법이다.
2. aria-hidden 내부 요소에서 focus가 사용되는 것을 지우자!
말은 쉽다.
진짜로 "말"은 쉽다. 이히힝.
...헛소리해서 미안하고,
사실 현실적으로는 어려운 일이다.
focus를 쓰는 이유가 보통 유저가 편하라고 일텐데, 유저의 접근성을 챙기기 위해 편리성을 버린다니... 그런 짓, 할 수 있을리가 없지 않아?!
그래도 해결방법 중 하나인 것은 부정할 수 없으니 일단 넣어봤다.
이야기를 마치며...
이딴 허접한 블로그 읽어준 사람이 있다면 정말 고맙다는 말밖에 못하겠다.
조금 길어질 수도 있다고 했으면서 이렇게나 짧은 글을... 읽다니.
시간낭비 했다는 생각이 들지는 않기를...
그리고, 해결방법이 현실적이지 않았다면 미안하다.
그럼 이제 마지막으로 chat GPT 링크를 두고 떠나겠다.
그럼 이만 총 총 . . .
- 참고
