2.5.3. 레이블과 네임

텍스트 또는 텍스트 이미지가 포함된 레이블이 있는 사용자 인터페이스 구성요소는 네임에 시각적으로 표시되는 해당 텍스트를 포함해야 한다.

목적

음성 입력을 사용하는 사용자는 화면에 표시된 레이블을 기반으로 명령을 수행한다. 이는 음성 명령 및 보조 기술 사용자가 화면에 표시된 레이블(텍스트)을 정확히 인식하고, 해당 기능을 올바르게 실행할 수 있도록 하기 위함이다.

배경 및 필요성

사용자는 화면에 보이는 레이블을 보고 음성 명령을 하거나 화면 낭독 프로그램 음성 출력을 듣고 조작 여부를 판단한다. 이때 시각적 레이블과 보조 기술이 인식하는 이름(Accessible Name)이 일치하는지가 중요하다.

레이블과 네임을 이해하기 위해 필요한 두 가지 개념이 있다.

시각적 레이블 (Label): 상호작용 요소의 기능이나 역할을 나타내며 화면에서 사용자가 눈으로 보는 텍스트나 이미지
접근 가능한 이름(Accessible Name): 화면에 노출되지 않지만, 상호작용 요소에 제공되어 화면낭독프로그램과 같은 보조 기술이 사용자에게 전달할 수 있게 제공된 텍스트

이를 위해, ‘레이블 제공’과 ‘레이블과 네임’ 두 검사 항목에서의 ‘레이블’의 개념이 어떻게 다르게 적용되는지 구분이 필요하다.

레이블 제공(3.3.2): 입력 요소(input, select 등)에 설명(label의 for 속성 연결 등)이 연결되어 있는지를 점검한다. → “폼 요소에 레이블이 연결되었는가?”
레이블과 네임(2.5.3): 버튼, 링크, 입력창 등 상호작용 요소에 보이는 텍스트(시각적 레이블)와 접근 가능한 이름이 같은지를 점검한다. → “보이는 글자와 접근 가능한 이름(네임)이 같은가?”

정리하면, 이 항목은 시각적 레이블 중 텍스트나 텍스트 이미지가 포함된 상호작용 요소인 경우만 대상이 된다.

일반적으로 시각적 텍스트 레이블이 HTML 마크업 규칙(텍스트 콘텐츠, 이미지로 제공된 경우 대체 텍스트 등)에 맞춰 올바르게 작성되면, 레이블과 접근 가능한 이름이 일치한다. 그러나 CSS로 숨김 텍스트나 aria-label 속성값이 시각적 텍스트 레이블과 다르게 설정된 경우, aria-labelledby 속성 연결이 바르지 않은 경우 등은 다음과 같은 문제가 발생할 수 있다.

음성 명령 사용자는 화면에 보이는 레이블과 실제 요소의 접근 가능한 이름이 다르면, 음성 명령이 제대로 작동하지 않아 원하는 기능을 실행할 수 없다.
화면낭독프로그램을 함께 사용하는 저시력 사용자는 화면의 시각적 레이블과 화면낭독프로그램이 읽어주는 이름이 다르면, 사용자는 원치 않는 결과를 얻게 된다. 특히 인지 장애가 복합적으로 있는 경우 이러한 불일치로 인해 혼란이 가중된다.

따라서, 시각적 레이블과 접근 가능한 이름이 일치하는 것은 웹 접근성을 보장하고 사용자 경험을 향상하는 데 중요하다.

디자인 제약이나 기술적 한계로 완벽한 일치가 어려운 경우에는, 접근 가능한 이름에 시각적 레이블을 포함하고 이를 접근 가능한 이름의 앞부분에 배치하는 것이 필요하다.

한 페이지 내에서 네임 중복이 우려될 경우, 예를 들어 할 일 목록을 보여주는 사용자 인터페이스에서 ‘완료’라는 레이블이 여러 개 동일하게 사용되면, 모든 버튼이 단순히 ‘완료’로 인식되어 어떤 항목을 완료하는 버튼인지 구분하기 어려울 수 있다. 이럴 때는 ‘완료, 숙소 예약’ 또는 ‘완료, 항공권 가격 비교하기’처럼 구체적인 정보를 함께 제공하면, 보조기술 사용자도 버튼의 기능을 명확하게 이해할 수 있다.

기본 규칙

시각적인 레이블과 접근 가능한 이름을 완전히 일치시킨다.
일치가 어려울 경우, 접근 가능한 이름에 시각적 레이블을 포함하고 이를 접근 가능한 이름의 앞부분에 위치시킨다.
로고, 텍스트로 표현된 심볼(예: X 텍스트가 닫기 버튼으로 쓰인 경우) 등은 텍스트가 아닌 콘텐츠로 보고 예외로 한다.

다음의 경우 시각적 레이블이 없는 사례로 보며, 검사 대상이 아니다.

placeholder만 존재하는 입력폼
레이블 없는 select 요소
레이블 없이 input 요소의 value 값만 노출된 경우

용어

상호작용 요소: 사용자 인터페이스 구성요소라고도 하며, 사용자가 특정 기능을 사용하기 위해 상호작용 할 수 있는 버튼, 입력창, 링크 등과 같은 웹페이지 구성 요소를 말한다.
레이블: 사용자와 상호작용을 하는 요소에 표시되는 텍스트나 이미지(이미지는 대체 텍스트)를 말한다. 예를 들어, 버튼에 ‘제출’이라고 쓰여 있거나, 입력창 옆에 ‘이메일’이라고 표시된 텍스트, 검색을 나타내는 ‘돋보기 아이콘’ 모두 레이블이다. 이러한 레이블은 사용자가 해당 요소가 무엇을 하는지 이해하는 데 도움을 준다. 이 정의는 HTML에서 input 요소와 짝을 이루는 label 요소만을 이야기하지 않는다.

이미지. ‘이메일’로 시각적 텍스트 레이블이 제공된 사례 (출처: 사람인)

이미지. 검색을 나타내는 돋보기 아이콘이 시각적 이미지 레이블로 제공된 사례 (출처: 구글)
접근 가능한 이름 (네임): 보조 기술이 상호작용 가능한 웹 콘텐츠 구성 요소를 인식하고 설명하는 데 사용하는 이름이다.

크롬에서 네임 값 확인

보조 기기에 전달되는 네임 값을 확인하는 방법 중 하나로 크롬 브라우저의 개발자 도구가 있다. 개발자 도구를 실행한 후, 검사할 요소를 선택하거나 접근성(Accessibility) 탭을 찾아 열면 ‘네임(Name)’값을 확인할 수 있다.

이미지. 크롬 개발자 도구 내 접근성 탭에서 접근 가능한 이름 확인(왼쪽)과 요소 검사로 접근 가능한 이름(네임) 확인 예시

참고. 상호작용 요소와의 관계를 예측할 수 있는 보편적인 레이블의 위치

시각적 레이블은 일반적으로 상호작용 요소에 인접한 위치에 제공되며, 이는 사용자가 레이아웃을 스캔하며 기능을 빠르게 인식할 수 있도록 돕는다. 보통 CSS나 스크립트 등으로 위치가 인위적으로 조정되지 않는 한, 다음과 같은 위치가 예측 가능한 레이블의 배치이다.

콤보 박스, 드롭다운 목록, 텍스트 입력창: 왼쪽 또는 위쪽
체크박스 및 라디오 버튼: 오른쪽
버튼 및 탭: 내부
버튼으로 사용되는 아이콘: 아래쪽

참고 자료

Technique G162: Positioning labels to maximize predictability of relationships

참고. 접근 가능한 이름 계산

접근 가능한 이름은 보조 기술이 구성 요소를 인식하고 조작할 수 있도록 제공하는 정보로, 어떤 방식으로 계산되는지 이해하는 것이 필요하다. 예를 들어, 하나의 버튼에 aria-label, aria-labelledby, alt 등 여러 속성이 중복 제공된 경우, 우선순위를 따라 접근 가능한 이름이 결정된다. 만약 정보가 전혀 없으면 접근 가능한 이름이 없는 것으로 판단한다. 접근 가능한 이름의 대략적인 계산 순서는 아래와 같다.

aria-labelledby 속성이 있는가?
aria-label 속성이 있는가?
button, input type=”submit”과 “reset”의 value 속성, input type=”image”, img, area의 alt 속성이 있는가?
텍스트 콘텐츠가 있거나 label 요소가 연결되어 있는가?
title 속성이 있는가?
input 의 경우, placeholder가 있는가?
위 모든 것이 없으면 접근 가능한 이름이 없다 판단

다음과 같이 작성된 HTML을 예시로 살펴보자.

<h3 id="idFind3">아이디 찾기 3</h3>
<a aria-label="아이디 찾기 2" href="#" class="my" aria-labelledby="idFind3" title="아이디 찾기 4">아이디 찾기 1</a>

여기에서는 제일 먼저 aria-labelledby이 있는지 확인했을 때 해당 속성이 존재한다. aria-labelledby=”idFind3”가 참조하는 h3 요소의 텍스트 값이 ‘아이디 찾기 3’ 이므로, 이 값이 접근 가능한 이름이 된다. 이 단계에서 접근 가능한 이름이 결정된다.

참고 자료

적용 사례

1) 눈에 보이는 텍스트 레이블과 일치하는 접근 가능한 이름 제공

접근 가능한 이름을 눈에 보이는 텍스트와 일치하게 제공한다.

다음은 버튼의 접근 가능한 이름이 화면에 보이는 텍스트 레이블과 동일한 가장 일반적인 사례이다. 버튼에 ‘디지털원패스 로그인’이라는 텍스트 레이블이 제공되었으며, 보조 기술도 ‘디지털원패스 로그인’라는 이름으로 읽어 사용자가 해당 버튼의 기능을 정확하게 이해할 수 있도록 한다.

이미지. 텍스트 레이블이 포함된 로그인 버튼과 접근 가능한 이름 사례 (출처: 디지털원패스)

<button type="button" class="onepass" onclick="onePassLogin();">
  <em>디지털원패스 로그인</em>
</button>

2) (권장) 눈에 보이는 레이블을 포함한 접근 가능한 이름 제공

‘상세 정보’라는 레이블을 가진 버튼이 한 페이지 내 여러 개 제공되는 사례이다. 목록에서 동일한 레이블이 반복되면, 시각을 활용하기 어려운 사용자는 해당 버튼이 어떤 정보를 제공하는지 명확히 구분하기 어렵다.

따라서, 접근 가능한 이름을 ‘상세 보기, KE5741 진에어 여정’과 같이 구분할 수 있는 정보를 조합하여 함께 제공하면 사용자가 더 쉽게 이해할 수 있다.

참고로, 해당 검사 항목에서 한 페이지 내 동일한 네임이 중복 제공되는 부분을 이슈로 점검하지 않는다.

이미지. 항공표 검색 결과 화면 내 여러 번 제공된 ‘상세 보기’ 버튼 예시

<button aria-label="상세 보기, KE5741 여정 정보" class="…">상세 보기</button>

3) 텍스트가 기호로 사용된 경우

텍스트가 기호로 사용된 경우는 시각적 레이블에 해당하지 않아 점검 대상이 아니다.

다만 에디터에서 ‘B’나 ‘I’처럼 기호 문자로 제공되는 버튼은 ‘굵게’ 또는 ‘기울임’ 등으로 기능이나 역할을 명확하게 설명하는 대체 텍스트를 제공하면 접근 가능한 이름으로 활용된다. 이렇게 하면 보조 기술 사용자도 기능을 정확하게 이해하고 사용할 수 있다.

이미지. 에디터에서 텍스트 H1, H2, B, I를 기호로 사용한 사례 (출처: 아지트)

4) 수학 공식의 표현

수학 공식에서 접근 가능한 이름은 시각적 레이블과 수학 공식이 일치하도록 적절한 기호를 사용해야 한다. 예를 들어, ‘2x3’(영문 소문자), ‘2*3’(별표 기호), ‘2×3’(× 기호 포함)로 각각 표현된 수식은 시각적으로는 동일한 ‘2 곱하기 3’ 의미를 가지지만, 음성 인식 소프트웨어는 이를 각각 다르게 인식할 수 있다. 이럴 때, 보조 기술이 인식할 수 있는 곱하기 기호를 사용하거나, 필요시 MathML을 사용하여 작성할 수 있다.

예를 들어, MathML을 사용하여 루트 기호를 포함한 수식을 제공할 수 있다.

이미지. 루트2 처럼 기호로 표현이 어려운 수식을 포함한 선택 항목 목록 예시

<ul>
  <li>
    <input type="radio" id="sample01">
    <label for="sample01">2 × 3</label>
  </li>
  <li>
    <input type="radio" id="sample02">
    <label for="sample02">2 + 3</label>
  </li>
  <li>
    <input type="radio" id="sample03">
    <label for="sample03">
      <math xmlns="http://www.w3.org/1998/Math/MathML">
        <msqrt><mn>2</mn></msqrt>
      </math>
    </label>
  </li>
</ul>

개선 필요 사례

1) 시각적 레이블과 접근 가능한 이름이 일치하지 않는 경우

다음은 ‘SHOW MORE’라는 시각적 텍스트 레이블을 가진 버튼의 접근 가능한 이름이 ‘Load more Instagram posts’로 설정된 사례이다.

이 경우, 시각적으로 보이는 레이블과 보조 기술이 읽어주는 접근 가능한 이름이 다르므로, 음성 명령 사용자나 화면 낭독 프로그램 사용자는 버튼의 기능을 다르게 전달받고 실행 시 원하는 결과를 얻을 수 없다.

이미지. SHOW MORE 버튼 화면(위쪽)과 접근 가능한 이름이 다르게 제공된 사례

<div class="load-more-btn">
    <button aria-label="Load more Instagram posts" class="LoadMoreBtn">
        <span>SHOW MORE</span>
    </button>
</div>

개선 방법

접근 가능한 이름을 눈에 보이는 레이블과 일치되도록 aria-label을 삭제한다.

점검 사례

1) 시각적 레이블과 접근 가능한 이름이 일치하지 않는 경우

홈택스 상단 영역에는 로고 링크, 검색어 입력창, 검색 버튼, 전체 메뉴 버튼에 해당하는 상호작용 요소가 있다.

이미지. 웹 페이지 내 텍스트 레이블을 가진 구성요소를 확인한 사례 (출처: 홈택스)

레이블과 네임 검사 항목의 점검 대상 여부를 살펴보자.

O 로고 링크: 로고는 점검 대상 예외이나 ‘국세청홈텍스’라는 로고에 대한 텍스트가 포함되어 점검 대상이며, 네임은 ‘국세청홈텍스’가 되어야 함
X 검색어 입력창: 플레이스홀더(placeholder)만 제공되어 시각적 텍스트 레이블이 없어 점검 대상 아님
X 검색 버튼: 돋보기 아이콘으로 텍스트가 없으므로 점검 대상 아님
O 전체 메뉴 버튼: ‘전체메뉴’라는 시각적 텍스트 레이블이 아이콘과 함께 포함되어 점검 대상

위와 같이 시각적 레이블 중 텍스트가 포함된 경우 점검 대상이 된다.

2) 시각적 레이블이 없는 콤보박스와 입력창

콤보박스와 검색어 입력창, 검색 버튼으로 구성된 영역이다.

이미지. 시각적 텍스트 레이블이 없는 콤보박스와 입력창 사례 (출처: 국세청)

X 콤보박스: 시각적 텍스트 레이블이 제공되지 않아 점검 대상 아님
X 검색어 입력창: 플레이스홀더(placeholder)만 제공되어 시각적 텍스트 레이블이 없어 점검 대상 아님
O 검색 버튼: 버튼 내 ‘검색’ 텍스트로 시각적 텍스트 레이블이 제공되어 점검 대상

3) 다양한 상호작용 요소로 구성된 로그인 화면

콤보박스와 검색어 입력창, 검색 버튼으로 다양하게 구성된 영역이다.

X 로고 링크: 로고는 점검 대상 아님
X 아이디/비밀번호 입력창: 플레이스홀더(placeholder)만 제공되어 시각적 텍스트 레이블이 없어 점검 대상 아님
O 로그인 버튼: 버튼 내 시각적 텍스트 레이블이 제공되어 점검 대상
O 로그인 방식 링크: 시각적 텍스트 레이블이 제공된 경우만 점검 대상. 이 경우 권장되는 네임은 ‘최근로그인 네이버’로 시각적 텍스트가 네임의 앞에 제공되도록 함
O 로그인 상태 유지 라디오 버튼: 텍스트 레이블이 제공되어 점검 대상

참고로, 해당 사례에서 아이디와 비밀번호 입력창에 연결된 레이블은 CSS로 화면에서 숨긴 텍스트로 제공하고 있다. 이는 2.5.3 (레이블과 네임)이 아닌 3.3.2 (레이블 제공) 검사 항목을 통해 레이블과 입력창이 바르게 연결되어 있는지 점검한다.