<aside>

상황 : 부모 요소에 overflow : hidden 을 쓰다 보면 자식 요소에 focus시 보여지는 outline이 잘리는 문제가 종종 발생하는 걸 발견

</aside>

🚨 focus시 outline이 가려진다.

🚨 키보드 포커스 시 이렇게 보이던 outline이

🧐 부모 요소의 overflow: hidden을 끄면 잘 보인다!

무엇에 의한 문제인지 알았고, 포커스 시 완전히 잘 보이진 않지만 어쨌든 보이는 요소는 괜찮지 않을까? 라고 생각했다.

✅ focus를 명확히 해야한다.

W3C 문서를 찾아본 결과, 문제가 되었다.

W3C : https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html

이런 focus 관련 지침은 SC 2.4.7 Focus visible 문서에서 확인할 수 있다. 해당 문서에 성공 기준이 나와 있는데, 성공 기준은 사용자가 키보드 포커스가 어떤 요소에 있는지 알 수 있어야 한다는 것이다. ****그리고 실패 기준도 함께 나와 있는데, 다른 스타일 속성으로 인해 포커스 표시가 잘 보이지 않는 경우 실패라고 한다. 그래서 위와 같이 overflow: hidden 속성 때문에 스타일이 잘 보이지 않아 사용자가 한 눈에 알아보기 힘든 경우는 실패에 해당되었다.

W3C : https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance

성공 기준에 대한 가이드라인은 SC 2.4.13 Focus Appearance 문서에서 확인할 수 있는데, 최소 성공 기준으로 2px 두께의 실선을 요구하고 있다.

💡 명확한 focus 표시를 해준다.

가장 확실한 해결 방법은 부모 요소의 overflow: hidden 속성을 제거하는 것이다.