Buttons do not have an accessible name 개선하기 (with aria-label)

LightHouse로 최적화 측정을 해봤더니, Accessibility에서 button 태그에 대한 경고를 마주쳤다.

분석

Buttons do not have an accessible name

When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers

해석하면 accessible name을 가지지 않는 버튼 태그일 경우, 스크린 리더기는 그저 button으로 인식한다.
즉, 스크린 리더기가 button의 목적 또는 의도를 분석하지 못한다는 뜻이다.

그럼 button에 accessible name을 지어주면 되는데, accessible name이 무엇일까?

사전 지식

accessible name

mdn에서 말하는 accessible name이란 요소의 이름과 같다고 말한다.

An accessible name is the name of a user interface element

accessible name으로 요소의 목적이나 의도를 나타내어 스크린 리더기와 같은 보조 기술에 요소에 대한 정보를 전달할 수 있다.

accessible name으로 가장 추천하는 방법은 텍스트이다. 요소가 포함하고 있는 텍스트에서 accessible name을 얻는다.

아래 코드에서 button의 accessible name은 마이페이지로 이동이다.

<buton>마이페이지로 이동</button>

텍스트 이외에도 accessible name을 지정할 수 있는 방법이 있다. (w3c)

예를 들면, aria-label 속성 값을 accessible name으로 인식한다.

<buton aria-label="마이페이지로 이동"></button>

aria-label

aria-label은 요소의 목적이나 의도를 나타내는 이름이라고 생각하면 된다.
button 태그 안에 텍스트가 없을 경우 혹은 svg, icon 태그가 있을 경우 accessible name을 정의하기 위해 사용된다.

문제의 코드

Accessibility에서 언급한 컴포넌트의 구조는 아래와 같다.

<button>
	<svg />
</button>

button 요소 안에 텍스트가 없을 뿐더러 따로 accessible name을 지정하지 않았다.

해결

aria-label으로 accessible name을 명시하면 된다.

<button >
	<svg aria-label="마이페이지로 이동"/>
</button>

적용한 후 다시 lighthouse로 측정한 결과, 87점에서 95점으로 상승했다.

마무리

여태 웹 접근성을 고려하지 않고 개발해왔다. 다른 사이트에서 aria 속성이 있는 요소를 많이 볼 수 있었는데, 이는 모든 사용자가 서비스를 이용할 수 있도록 하기 위한 개발자의 노력임을 깨달았다.