컨트롤을 무음으로 만드는 흔한 이름 지정 실수

계산된 이름이 없는 컨트롤은 단순히 button 또는 link로 읽힙니다. 이러한 이름 지정 실수 때문에 사용자는 요소가 무엇을 하는지 추측해야 합니다.

아이콘만 담긴 버튼에는 계산되는 이름이 없는 경우가 많습니다. aria-label을 추가하면 글자가 없는 컨트롤도 동작을 알릴 수 있습니다.

placeholder는 신뢰할 수 있는 접근 가능한 이름이 아닙니다. 입력을 시작하면 사라지고 많은 스크린 리더가 무시하므로 실제 레이블을 추가하십시오.

존재하지 않거나 철자가 틀린 id를 가리키는 aria-labelledby는 이름을 전혀 만들지 못해 의도한 레이블을 조용히 무효화합니다.

빈 문자열로 설정된 aria-label은 이름을 지웁니다. 그 결과 스크린 리더가 읽을 내용이 요소에 남지 않습니다.

버튼 안에서 유일한 텍스트에 aria-hidden을 지정하면 이름의 출처가 제거되어 스크린 리더에 요소가 이름 없는 것으로 인식됩니다.

‘더 읽기’나 ‘여기를 클릭’이라는 링크는 기술적으로 이름이 있지만, 사용자가 목적지를 알 수 없으므로 맥락을 벗어나면 쓸모가 없습니다.

유일한 이름으로 title에 의존하는 것은 위험합니다. 우선순위가 가장 낮은 출처이며 여러 스크린 리더가 이를 완전히 건너뜁니다.

연결된 label이 없는 입력은 계산되는 이름이 없는 경우가 많아 사용자가 필드에 무엇을 입력해야 할지 알기 어렵습니다.

이름이 모두 ‘편집’인 버튼이 열 개라면 사용자는 어느 행에 영향을 주는지 추측해야 합니다. 각 버튼에 대상을 포함한 고유한 이름을 지정하십시오.

브라우저의 접근성 패널을 열고 각 컨트롤의 계산된 이름을 읽으십시오. 비어 있다면 수정해야 할 실수가 있는 것입니다.

아이콘 버튼에 휴지통 모양만 표시됩니다. 왜 아무 말도 하지 않을 수 있을까요?

아이콘만 있는 버튼부터 깨진 id까지 컨트롤을 침묵하게 만드는 함정을 배웠으며, 검사 도구에서 모든 이름을 확인하는 방법도 배웠습니다. ✅