aria-placeholder

설명

aria-placeholder는 textbox(와 이를 상속하는 searchbox)가 비어 있을 때 사용자에게 보여 주는 짧은 힌트를 보조기술에 알립니다. 예시 값이나 입력 형식(“예: 010-1234-5678”)을 전달하는 데 씁니다.

HTML <input>과 <textarea>에는 placeholder 속성이 있으므로 이 속성이 필요 없습니다. contenteditable로 만든 사용자 정의 텍스트 상자에만 씁니다. 이 경우 속성은 화면에 아무것도 표시하지 않으므로, 같은 문구를 CSS(:empty::before 등)로 시각적으로도 보여 줘야 하며, 사용자가 입력을 시작하면 힌트를 숨겨야 합니다.

가장 중요한 원칙은 플레이스홀더는 레이블이 아니라는 것입니다. 입력을 시작하면 사라지므로 무엇을 입력하는 칸인지 기억하기 어렵고, 기본 색상이 옅어 대비가 부족한 경우가 많습니다. 필드에는 반드시 aria-labelledby, aria-label, <label> 등으로 이름을 따로 주고, 플레이스홀더는 보조 힌트로만 씁니다. 형식 안내처럼 입력 중에도 필요한 정보라면 플레이스홀더보다 aria-describedby로 연결한 상시 표시 텍스트가 낫습니다.

이름 계산에서 플레이스홀더는 다른 이름 수단이 전혀 없을 때 브라우저가 이름 대신 쓰기도 하지만, 이에 기대어서는 안 됩니다. 화면낭독기는 보통 값이 비어 있을 때만 플레이스홀더를 읽습니다.

테스트할 때는 빈 텍스트 상자에서 이름과 힌트가 모두 읽히는지, 입력 후에는 힌트가 화면과 화면낭독기 모두에서 사라지는지, 힌트 텍스트의 대비가 충분한지(WCAG 1.4.3) 확인합니다.

값

사용 예

<label for="phone">휴대폰 번호</label>
<input id="phone" type="tel" placeholder="010-1234-5678">

<p id="bio-label">자기소개</p>
<div role="textbox" contenteditable="true" aria-multiline="true"
     aria-labelledby="bio-label" aria-placeholder="관심 분야와 경력을 적어 주세요"></div>
<style>
  [role="textbox"][aria-placeholder]:empty::before {
    content: attr(aria-placeholder);
    color: #5c6378;   /* 배경 대비 4.5:1 이상 */
  }
</style>

<div role="textbox" contenteditable="true" aria-placeholder="이름"></div>

직접 해 보기

편집 영역에 글자를 입력하면 힌트가 사라지고, 모두 지우면 다시 나타납니다. 힌트 문구도 바꿔 볼 수 있습니다.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-placeholder (새 창)
• MDN: aria-placeholder (새 창)
• WAI 튜토리얼: Labeling Controls (placeholder) (새 창)