폼과 이름 계산 확인

문항 6개. 정답과 해설은 풀어 본 뒤에 보여 드립니다.

1. 입력칸에 `aria-label="이메일"` 이 있고, 화면에는 `<label for>` 로 연결된 '회사 메일' 이 보입니다. 스크린리더는 무엇을 읽습니까?

   1. 이메일 — aria-label 이 label 보다 앞 단계라 그것만 쓰인다
   2. 회사 메일 — 눈에 보이는 글자가 언제나 우선한다
   3. 회사 메일 이메일 — 두 값을 공백으로 이어 붙인다
   4. 아무것도 읽지 않는다 — 두 값이 부딪히면 이름이 없어진다

2. `<label for="mail">` 과 `<input id="email">` 이 나란히 있습니다. 이 칸의 접근 가능한 이름은 어떻게 됩니까?

   1. label 이 바로 옆에 있으므로 그 글자가 이름이 된다
   2. for 와 id 가 달라 연결이 없고, 다른 후보가 없으면 이름이 없다
   3. 브라우저가 가장 가까운 label 을 자동으로 이어 준다
   4. input 의 name 속성값이 대신 이름으로 쓰인다

3. `placeholder` 만 있는 입력칸에 대해 맞는 설명은?

   1. placeholder 는 이름 계산에 전혀 쓰이지 않아 언제나 이름이 없다
   2. placeholder 가 있으면 label 보다 먼저 이름으로 쓰인다
   3. 이름이 되기는 하지만 글자를 치면 사라져 다시 확인할 수 없다
   4. type 이 text 일 때만 이름이 되고 email 이면 무시된다

4. 라디오 버튼 세 개에 각각 label 을 붙였는데도 무엇을 고르는 중인지 읽히지 않습니다. 무엇이 빠졌습니까?

   1. 각 라디오의 name 을 서로 다르게 주어야 한다
   2. 라디오마다 aria-label 을 하나씩 더 붙여야 한다
   3. 라디오를 table 로 감싸 행 머리를 만들어야 한다
   4. fieldset 으로 묶고 legend 로 묶음 이름을 주어야 한다

5. 오류가 뜰 때 도움말 안내가 사라지지 않게 하려면 `aria-describedby` 를 어떻게 씁니까?

   1. 도움말 id 와 오류 id 를 공백으로 나열해 둘 다 가리킨다
   2. 오류가 나면 도움말 id 를 오류 id 로 바꿔 끼운다
   3. 도움말에는 aria-describedby, 오류에는 aria-labelledby 를 쓴다
   4. 두 요소를 하나의 부모로 감싸고 그 부모 id 만 가리킨다

6. 가입 폼의 비밀번호 칸에 알맞은 `autocomplete` 값은?

   1. password — 속성 이름과 같게 맞추면 된다
   2. new-password — 가입에서 새 암호를 제안하게 하는 값이다
   3. off — 비밀번호는 자동완성을 꺼 두는 것이 원칙이다
   4. current-password — 어떤 화면이든 이 값을 쓴다