빠른 결론
로고, 아이콘 버튼, 배경 이미지 버튼에서 display:none으로 텍스트를 숨기지 않고 접근 가능한 이름을 유지하는 방법입니다.
display:none이 위험한 이유
display:none과 visibility:hidden은 화면뿐 아니라 접근성 트리에서도 요소를 제거할 수 있습니다. 로고 링크나 아이콘 버튼의 의미 텍스트를 이렇게 숨기면 스크린리더 사용자는 버튼의 이름을 듣지 못할 수 있습니다.
상황별 안전한 선택
아이콘 버튼은 aria-label이 간단하고, 로고 링크처럼 실제 브랜드명을 유지해야 하는 경우에는 visually hidden 텍스트가 좋습니다. 본문 바로가기 링크는 focus-visible 상태에서 실제 화면에 나타나야 합니다.
복붙 전에 확인할 것
Tab으로 포커스가 이동하는지, focus-visible 링이 보이는지, 버튼의 접근 가능한 이름이 있는지 확인하세요. 복붙랩 CSS 도구의 IR 레시피는 좋은 예와 피해야 할 예를 함께 보여줍니다.
체크 순서
- 아이콘만 보이는 버튼에는 aria-label 또는 숨김 텍스트를 넣습니다.
- 의미 텍스트를 display:none으로 숨기지 않습니다.
- skip link는 포커스 시 화면에 보이게 만듭니다.
- 키보드 Tab 이동과 focus-visible 상태를 실제 브라우저에서 확인합니다.
자주 묻는 질문
aria-label만 쓰면 항상 충분한가요?
단순 아이콘 버튼에는 충분한 경우가 많습니다. 다만 로고 링크처럼 보이는 텍스트가 브랜드 의미를 담는 경우에는 실제 텍스트를 visually hidden으로 유지하는 편이 더 명확합니다.
text-indent:-9999px 방식은 괜찮나요?
권장하지 않습니다. 큰 오프셋은 포커스 영역과 스크롤에 부작용을 만들 수 있어 현대적인 visually hidden 패턴이 더 안전합니다.