Enhancement a11y when Button component has only Icon, without text (Implement IconButton component)

[sungik-choi]

현재 상황

텍스트가 들어가는 버튼과 동일하게 별도의 처리가 되어있지 않습니다.

문제점

스크린 리더 등에서 어떤 버튼인지 파악할 수 없습니다.

어떻게 개선할 수 있는지

MDN에서 발췌. 내부에 visually hidden 상태의 텍스트를 넣으면 됩니다. 실제 사용처에선 (아마도) 아이콘을 감싸는 툴팁에 들어갈 텍스트를 넣으면 될 거 같습니다.

아이콘 버튼

아이콘만 사용해 기능을 표현하는 버튼은 접근 가능한 이름을 갖지 않습니다. 접근 가능한 이름은 스크린 리더 등 접근성 보조 기술이 문서를 분석하고 접근성 트리를 생성할 때 사용할 수 있는 프로그램 훅을 제공합니다. 그 후 보조 기술이 페이지 콘텐츠를 탐색하고 조작할 때 접근성 트리를 사용합니다.

아이콘 버튼에 접근 가능한 이름을 부여하려면, 요소의 기능을 간략히 묘사하는 텍스트를 안에 포함하세요.

예제

<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg>
  Add to favorites
</button>

텍스트를 숨기고 싶은 경우, 접근 가능한 방식은 CSS 속성을 조합해 시각적으로는 숨기고, 보조 기술은 읽을 수 있는 형태로 남기는 것입니다.

그러나, 버튼의 텍스트를 시각적으로 남겨놓는 것은 아이콘의 뜻이나 버튼의 기능에 익숙하지 않은 사용자도 도울 수 있다는 점을 명심해야 합니다. 특히 기술과 가깝지 않거나, 문화적으로 다른 해석을 할 수 있는 사용자를 고려하세요.

• What is an accessible name? | The Paciello Group
• MDN Understanding WCAG, Guideline 4.1 explanations
• Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0

Reference

• MDN

[sungik-choi]

디자인 시스템 재설계 이후 IconButton 컴포넌트가 만들어질 예정 FYI. @kimminkyung94