폴리이엔엠 디지털 미디어 연구

aria-label 오남용, 차라리 안 쓰는 게 낫다 48

현대의 웹 환경은 나날이 고도화되고 복잡해짐에 따라, 스크린 리더와 같은 보조 기기가 시각적 요소를 올바르게 해석할 수 있도록 돕는 웹 접근성 확보가 중요해졌습니다. 이를 위해 쓰이는 대표적인 기술 중 하나가 바로 WAI-ARIA 사양, 특히 aria-label 속성입니다. 하지만 접근성 향상이라는 명분 아래 남용되는 aria-label은 종종 결함을 유발하곤 합니다. ¹

잘못된 ARIA는 없는 것보다 못하다

W3C와 접근성 전문가들은 입을 모아 경고합니다. 불필요하게 ARIA 속성을 덧칠하는 코드는 결코 근본적인 해결책이 될 수 없습니다. WebAIM의 통계에 따르면 ARIA를 어설프게 적용한 사이트들이 그렇지 않은 사이트보다 스크린 리더 환경에서 41% 더 많은 오류를 발생시키는 것으로 나타났습니다. ²

이름 덮어쓰기(Overriding) 메커니즘의 위험성

브라우저는 요소의 이름을 결정할 때 자체적인 우선순위 연산 알고리즘을 사용합니다. 이때 aria-label은 실제 요소 안에 존재하는 시각적 텍스트를 일방적으로 덮어써 버리는(Override) 무시무시한 권한을 가집니다. 시각적으로는 "상세보기"라는 버튼에 aria-label="개인정보 취급방침 상세 내용 읽기"라고 긴 텍스트를 부여하면, 음성 인식 소프트웨어 사용자는 "상세보기 클릭"이라는 명령을 내려도 기기가 이를 인지하지 못하는 끔찍한 조작 불능 상태에 빠지게 됩니다. ³

반복되는 최악의 안티패턴들

• 잉여적 중복: 이미 명확한 텍스트가 있는 버튼(<button>메시지 전송</button>)에 aria-label="메시지 전송"을 또 달면 단일 진실 공급원(SSOT) 원칙을 위배하여 향후 유지보수 시 텍스트 동기화 버그를 낼 위험이 큽니다.
• 역할(Role)의 하드코딩: 버튼 요소 내부 레이블에 "이메일 보내기 버튼"이라고 기입하면 스크린 리더가 "이메일 보내기 버튼, 버튼"이라고 두 번 읽어 극심한 피로를 줍니다. ⁴
• 정적 요소에 남발: 시맨틱 롤(role)이 없는 단순 <span>이나 <div>에 역할을 선언하지 않고 aria-label만 달아두면 대다수의 스크린 리더는 이를 완전히 무시합니다. 아무도 읽지 않는 죽은 코드가 됩니다. ⁵

다국어(i18n) 자동 기계 번역 환경의 붕괴

가장 치명적인 한계는 최신 브라우저 기반 구글이나 엣지의 자동 기계 번역기가 HTML 태그 내부의 속성 값을 대거 누락시킨다는 점입니다. 한국어 화면을 스페인어로 번역하여 볼 때, 시각적 텍스트는 정상 번역되지만 aria-label="상품 검색하기"는 한국어 문자열 고립 상태로 남아, 스페인어 기반 보조 기기 사용자가 해당 부분을 탐색할 때 읽지 못하고 완전히 고장 나게 됩니다. ⁶

결론

결국, 가장 안전한 길은 기계적인 친절함으로 aria-label을 남용하는 것을 멈추는 것입니다. 네이티브 시맨틱 HTML(<button>, <dialog> 등)을 신뢰해야 합니다. 불가피하다면 aria-labelledby로 화면의 텍스트를 매핑하거나, .sr-only 클래스를 이용해 물리적인 텍스트 노드를 숨겨 기계 번역마저 완벽히 소화할 수 있도록 견고하게 설계해야 할 것입니다.