화면에 글자가 보이는 것만으로 스크린 리더가 그 목적을 알 수 있는 것은 아닙니다. Accessible name은 버튼이나 링크 같은 사용자 인터페이스 요소를 보조 기술에서 식별하고 조작할 때 사용하는 이름입니다. 이 이름은 요소의 역할과 HTML·ARIA 마크업을 바탕으로 계산되며, 화면에 보이는 텍스트와 항상 같은 위치에서 오지는 않습니다.

크림색 배경 위 빈 라벨 모양 패널, 초록색과 노란색 원, 곡선, 반투명 아치를 조합한 추상 그림

실제 브라우저나 읽기 결과가 아닌 개념 설명입니다.

1. 이름과 설명은 다른 정보다

Accessible Name and Description Computation은 여러 콘텐츠 기술에서 이름과 설명을 계산하는 규칙을 정의합니다. 이름은 “무엇을 하는 요소인가”를 식별하는 짧은 값에 가깝고, 설명은 추가 맥락을 제공할 수 있습니다. 버튼에 “검색”이라는 이름이 있고 설명에 검색 범위가 담기는 식으로 역할을 나눌 수 있습니다. 두 값을 같은 문구로 반복하면 보조 기술 사용자가 정보를 중복해서 들을 수 있습니다.

role에 따라 이름을 가질 수 있는지와 이름의 출처가 다릅니다. 먼저 요소의 역할과 허용된 이름 제공 방식을 확인해야 합니다.

이 글에서 읽은 AccName 1.2는 2026년 10월 12일 작업 초안이며 확정 권고안이 아닙니다. AccName 1.1은 2018년 12월 18일 권고안입니다. 세부 순회나 빈 결과의 대체 규칙을 두 판에서 동일하다고 가정하지 않습니다. 1.2 초안 상태 1.1 권고안 이름의 역할

2. 이름의 출처: 연결된 텍스트와 작성자 속성

HTML 요소는 HTML label element과 입력 요소의 연결, 버튼의 콘텐츠, 이미지의 alt처럼 호스트 언어의 이름 지정 방식을 가질 수 있습니다. WAI-ARIA는 aria-labelledby로 다른 요소의 텍스트를 참조하거나, aria-label로 작성자 이름을 제공하는 방법도 정의합니다. 실제 계산에서는 역할과 이름 제공 규칙이 관여하므로, 속성 이름만 보고 결과를 추측하지 말고 접근성 트리에서 계산된 이름을 확인하세요.

화면에 보이는 라벨이 있다면 그 텍스트를 연결해 시각 사용자와 보조 기술 사용자에게 일치하는 단서를 주는 편이 이해하기 쉽습니다. aria-labelledby는 보이는 텍스트를 여러 곳에서 참조하거나 요소에 연결할 때 유용합니다. 표시 문구가 전혀 없는 아이콘 버튼처럼 이름을 제공할 보이는 콘텐츠가 없다면 aria-label을 고려할 수 있지만, 이름은 동작을 구체적으로 설명해야 합니다.

적용 가능한 aria-labelledby 참조를 먼저 계산합니다. 계산된 텍스트가 비어 있지 않을 때 aria-label보다 우선하며, 빈 결과가 나오면 알고리즘은 다음 적용 가능한 출처인 aria-label로 넘어갑니다. 이름 제공을 금지한 역할에 이름을 억지로 부여할 수는 없습니다. 참조된 요소의 aria-labelledby를 자동으로 연쇄 추적하지 않지만, 해당 순회 안의 텍스트 대안 계산은 재귀적일 수 있습니다. ARIA의 이름 속성 APG 참조 제한 작성자 이름 안내

3. 보이는 문구와 계산 결과의 일치

Accessible name은 시각적으로 보이지 않는 속성에서도 나올 수 있습니다. 그래서 화면에는 “닫기”라고 보이는데 계산된 이름은 오래된 aria-label 때문에 “메뉴 열기”로 남는 불일치가 생길 수 있습니다. 텍스트가 이미 자식 콘텐츠에 있는데 동일한 aria-label을 덧붙이면 일반적인 버튼에서는 콘텐츠에서 얻던 이름이 속성의 이름으로 대체될 수 있습니다. 이름과 설명이 따로 반복되는 현상과는 구분해야 합니다. 가장 간단한 방법은 가능한 한 의미 있는 visible text와 호스트 언어의 기본 연결 방식을 활용하는 것입니다.

이미지의 대체 텍스트는 문맥에 따라 이미지 자체의 역할과 목적을 설명해야 합니다. 장식 이미지는 주변 텍스트와 중복되는 이름을 만들지 않도록 처리할 수 있습니다. 반대로 이미지가 유일한 링크 콘텐츠라면 링크의 목적을 전달하는 대체 이름이 필요합니다. 이 결정은 파일 이름이나 모양이 아니라 요소의 기능을 기준으로 해야 합니다. 기능 이미지 안내

숨긴 참조와 자식 콘텐츠를 구분하기

1.2 초안의 숨김 규칙은 직접 참조된 순회 시작점이 숨겨져 있는 경우를 별도로 다룹니다. 이 경우 평소 제외되는 텍스트도 이름에 기여할 수 있습니다. 보이는 참조 요소 안의 숨긴 자식까지 항상 포함된다는 뜻은 아닙니다. 화면에서 보이지 않는 모든 배치 방식이 알고리즘의 숨김과 같지도 않습니다. 초안의 숨김 참조 규칙

가상의 비교에서는 같은 라벨 문구를 두되 참조 시작점의 숨김 상태와 자식 상태를 따로 적을 수 있습니다. 원인을 분리해야 이름 차이를 설명하기 쉽습니다. 이름에 기여하는 노드라는 사실만으로 그 노드가 독립적으로 탐색 가능하다고 판단하지 마세요. 이 비교는 구현 시험 결과가 아닙니다.

이름이 예상과 다를 때의 점검 순서

계산 결과가 화면의 문구와 다르면 속성을 더하기 전에 네 가지를 따로 확인하세요. (1) 접근성 트리에서 실제 role이 무엇인지, (2) 참조한 ID가 존재하고 의도한 텍스트를 가리키는지, (3) 여러 ID를 적었다면 순서와 중복이 의도한 대로인지, (4) 사용자가 조작한 뒤에도 이름이 갱신되는지입니다. 예를 들어 화면에 ‘닫기’가 보이는데 트리에 ‘메뉴 열기’가 나온다면, DOM의 오래된 aria-label이나 aria-labelledby 참조가 원인일 수 있습니다. 이는 가능한 진단 경로이지 모든 브라우저에서 관찰된 결과는 아닙니다.

계산된 이름은 브라우저가 접근성 API에 노출하는 값입니다. 스크린 리더는 여기에 role, 상태, 포커스 맥락 등을 붙여 말하거나 점자 등으로 표현할 수 있습니다. 따라서 값이 기대와 다르면 먼저 트리에서 이름을 확인해 계산 단계 문제인지, 실제 AT 표현·탐색 흐름 문제인지 나눠 봅니다. 트리 값이 맞아도 중요한 작업은 대상 브라우저와 보조 기술 조합으로 시험하고, 이름을 읽는 순서나 중복 발화를 별도로 확인하세요. 이 글은 특정 조합의 시험 결과를 주장하지 않습니다.

4. 실무자 관점: 접근성 트리에서 실제 이름 검토

개발자 도구의 접근성 패널이나 보조 기술로 주요 버튼, 링크, 입력, 아이콘 전용 조작 요소의 계산된 이름을 확인하세요. 이름이 비었는지, 중복되는지, 보이는 라벨과 다른지, 요소의 실제 동작을 말하는지 점검합니다. 동적 상태에 따라 이름이 바뀌는 경우에는 변경 이후에도 정확한지 확인합니다.

ARIA 속성을 추가하는 것만으로 접근성이 보장되지는 않습니다. 요소의 역할, 키보드 조작, 이름 계산을 함께 맞춰야 합니다. 특히 작성자 제공 이름을 허용하지 않는 역할에는 aria-label 또는 aria-labelledby를 억지로 넣지 말고, 올바른 HTML 요소를 선택하세요. 자동 검사 결과는 실제 보조 기술 사용 경험을 대신하지 않으므로 중요한 흐름은 수동으로 확인합니다.

브라우저가 계산해 접근성 API에 노출하는 이름과 스크린 리더가 표현하는 문장은 구분해야 합니다. 트리의 값만으로 모든 제품의 정확한 읽기 문구나 순서, 상호작용을 보장할 수 없습니다. 계산과 표현의 구분 전문 실무 안내

출처