입력 양식의 레이블

「Email」이라는 글자 옆에 있는 입력 칸도 label 요소로 연결해야 레이블이 됩니다. 그 전에는 화면 낭독기가 「편집 가능한 텍스트」라고만 말할 수 있습니다.

입력 칸마다 이름이 필요합니다

입력 칸에 초점이 오면 화면 낭독기는 그 칸의 레이블, 종류, 상태를 차례로 알려 줍니다. 「Email, 편집 가능한 텍스트, 필수」처럼요. 이때 읽는 레이블은 입력 칸에 연결된 label 요소에서 옵니다. 둘을 연결하는 방법은 두 가지입니다. input에 id를 주고 label에 같은 값의 for를 주거나, input을 label 요소 안에 넣으면 됩니다. 어느 방법을 쓰든 레이블 글자를 눌러도 입력 칸 안으로 초점이 옮겨 가므로, 작은 체크 상자와 라디오 버튼을 누르기가 훨씬 쉬워집니다.

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

<label>
  <input type="checkbox" name="news"> Send me the weekly menu
</label>

WCAG 2.2 성공 기준 3.3.2 「레이블 또는 설명」(A 수준)은 사용자 입력이 필요한 곳마다 레이블이나 설명을 두라고 요구합니다. 그리고 1.3.1 「정보와 관계」는 레이블과 입력 칸의 연결이 화면에만이 아니라 코드에도 있어야 한다고 합니다. 입력 칸 바로 위에 우연히 놓인 문단은 눈으로 보기에 가까이 있을 뿐이고, 두 요소가 한 짝이라고 보조 기술에 알려 주는 것은 아무것도 없습니다.

예시 글자는 레이블이 아닙니다

placeholder 속성은 아직 비어 있는 입력 칸 안에 회색 안내 글자를 보여 줍니다. 레이블 대신 이것만 쓰고 싶은 마음이 들기 쉽고, 실제로 그렇게 만든 회원 가입 양식도 많습니다. 문제는 이 글자가 무언가를 입력하는 순간 사라진다는 것입니다. 그래서 이 칸이 무엇이었는지 다시 확인할 수 없고, 대개 앞 단원의 대비 기준에 미달할 만큼 흐리다는 점입니다. 그러니 눈에 보이는 레이블을 따로 두고, 원하면 예시 값을 담은 placeholder를 함께 쓰세요.

묶음, 용도, 그리고 오류

라디오 버튼이나 서로 관련된 체크 상자에는 하나하나의 레이블과 함께 묶음 전체의 레이블도 필요합니다. fieldset으로 묶음 전체를 감싸고, 묶음에 대한 질문을 legend에 넣으면, 화면 낭독기가 「Small, 라디오 버튼, 3개 중 1」보다 먼저 「Size, 그룹」이라고 알려 줍니다. 개인 정보 칸에는 autocomplete 속성을 써서 그 칸이 무엇을 위한 칸인지 브라우저에 알려 줍니다. name, email, tel, new-password, one-time-code처럼 HTML 표준에 정해진 이름을 씁니다. 성공 기준 1.3.5 「입력 목적 식별」(AA 수준)이 바로 이것을 요구합니다. 그러면 브라우저가 칸을 대신 채워 줄 수 있고, 일부 도구는 칸 옆에 익숙한 아이콘을 보여 줄 수 있기 때문입니다.

입력에 무언가 잘못된 것이 있으면 그 사실을 글로 알려 줍니다. 3.3.1 「오류 식별」은 테두리를 빨갛게 바꾸는 것만이 아니라 입력 오류를 글로 밝히고 사용자에게 설명하라고 요구합니다. WCAG 2.2는 3.3.7 「중복 입력」도 새로 넣었습니다. 같은 절차 안에서 사용자가 이미 입력한 정보는 두 번 치게 하지 말고, 미리 채워 주거나 골라서 쓸 수 있게 하라는 것입니다. 3.3.8 「접근 가능한 인증(최소)」(AA 수준)은 도움 수단이 없다면 로그인 단계가 무언가를 기억하거나 옮겨 적는 일에 기대면 안 된다고 합니다. 비밀번호 관리 프로그램이 칸을 채우게 두는 것과 붙여넣기를 허용하는 것이 그 도움 수단에 해당합니다.

입력을 시작하기 전에 필요한 것 알리기

입력 방법에 대한 설명은 사용자가 실패한 뒤에 나오는 오류 메시지에 넣지 말고, 그 설명이 다루는 입력 칸 앞에 둡니다. 예를 들어 비밀번호가 15자 이상이어야 한다면, 레이블 바로 옆에 그렇다고 적어 둡니다. 반드시 채워야 하는 필수 칸은 레이블 글자 안에 「필수」 같은 말로 표시하고, required 속성도 넣어 브라우저가 함께 알려 주게 합니다. 오류 메시지가 나타나면 해당 입력 칸 옆에 두고, 메시지의 id를 가리키는 aria-describedby로 둘을 이어 줍니다. 그러면 그 입력 칸에 초점이 올 때 화면 낭독기가 오류 메시지를 함께 읽어 줍니다. 마지막으로, 오류가 생기면 문제가 있는 첫 칸이나 맨 위의 오류 요약으로 초점을 옮겨, 키보드 사용자가 긴 양식 맨 아래에서 무슨 일인지 모른 채 남지 않게 합니다.