작성하는 양식은 사용자용입니다. 사람들은 저마다 다른 기기를 사용합니다. 일부는 마우스, 터치 기기, 키보드, 눈의 움직임으로 제어되는 기기를 사용합니다. 일부는 스크린 리더, 작은 화면, 텍스트 확대 소프트웨어를 사용합니다. 모든 사용자가 이 양식을 사용하고 싶어 합니다 모든 사용자가 양식을 액세스하고 사용할 수 있도록 하는 방법을 알아보세요.
사용자가 양식 입력란의 목적 이해
다양한 양식 컨트롤 중에서 선택할 수 있습니다.
이들의 공통점은 무엇일까요?
모든 양식 컨트롤에는 연결된 <label> 요소가 있어야 합니다.
<label> 요소는 양식 컨트롤의 목적을 설명합니다.
<label> 텍스트는 양식 컨트롤과 시각적으로 연결되어 스크린 리더에서 읽습니다.
또한 <label>을 탭하거나 클릭하면 연결된 양식 컨트롤에 포커스가 맞춰져 더 큰 타겟이 됩니다.
유용한 HTML을 사용하여 기본 제공 브라우저 기능에 액세스
이론적으로는 <div> 요소만 사용하여 양식을 만들 수 있습니다.
네이티브 <form>처럼 보이게 할 수도 있습니다.
비의미론 요소를 사용하면 어떤 문제가 있나요?
기본 제공 양식 요소는 다양한 기본 제공 기능을 제공합니다. 예를 살펴보겠습니다.
시각적으로는 <input> (예의 첫 번째 항목)과 <div>가 동일하게 표시됩니다.
<div>에는 contenteditable 속성이 있으므로 둘 다에 텍스트를 삽입할 수도 있습니다.
하지만 적절한 <input> 요소를 사용하는 것과 <input>와 같은 <div>를 사용하는 것 사이에는 많은 차이가 있습니다.
스크린 리더 사용자가 <div>를 입력 요소로 인식하지 못해 양식을 작성할 수 없습니다.
스크린 리더 사용자는 '이름'만 듣게 되며 해당 요소가 텍스트를 추가하기 위한 양식 컨트롤이라는 표시는 없습니다.
<div>Name</div>를 클릭해도 함께 실행되는 <div>에 포커스되지 않는 반면, <label>와 <input>는 for 및 id 속성을 사용하여 연결됩니다.
양식을 제출한 후에는 <div>에 입력된 데이터가 요청에 포함되지 않습니다.
JavaScript로 데이터를 연결할 수도 있지만 <input>가 기본적으로 연결을 수행합니다.
기본 제공 양식 요소에는 다른 기능이 있습니다.
예를 들어 적절한 양식 요소와 올바른 inputmode 또는 type를 사용하면 터치 키보드에 적절한 문자가 표시됩니다. <div>에서 inputmode 속성을 사용하면 불가능합니다.
사용자가 예상되는 데이터 형식을 알고 있어야 합니다.
양식 컨트롤에 다양한 유효성 검사 규칙을 정의할 수 있습니다.
예를 들어 양식 입력란이 항상 8자 이상이어야 한다고 가정해 보겠습니다.
브라우저에 유효성 검사 규칙을 나타내는 minlength 속성을 사용합니다.
사용자에게 유효성 검사 규칙도 알리도록 하려면 어떻게 해야 하나요? 이야기하세요.
양식 컨트롤 바로 아래에 필요한 형식에 관한 정보를 추가합니다.
보조 기기에서 명확하게 알 수 있도록 양식 컨트롤에 aria-describedby 속성을 사용하고 오류 메시지에 동일한 값의 id를 사용하여 둘 다 연결합니다.
사용자가 양식 컨트롤의 오류 메시지를 찾을 수 있도록 지원
유효성 검사에 관한 이전 모듈에서는 잘못된 데이터 입력이 발생할 경우 오류 메시지를 표시하는 방법을 알아보았습니다.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
예를 들어 필드에 required 속성이 있는 경우 잘못된 데이터를 입력하면 양식이 제출될 때 브라우저에서 양식 컨트롤 옆에 오류 메시지가 표시됩니다. 스크린 리더에서도 오류 메시지를 알려줍니다.
또한 오류 메시지를 직접 정의할 수도 있습니다.
이 예에서는 오류 메시지를 양식 컨트롤에 연결하려면 추가 변경사항이 필요합니다.
간단한 방법은 오류 메시지 요소의 id와 일치하는 양식 컨트롤에서 aria-describedby 속성을 사용하는 것입니다.
그런 다음 오류 메시지에 aria-live="assertive"를 사용합니다.
ARIA 라이브 리전은 오류가 표시되는 순간 스크린 리더 사용자에게 오류를 알려줍니다.
필드가 여러 개인 양식에 이 접근 방식의 문제는 일반적으로 오류가 여러 개인 경우 aria-live가 첫 번째 오류만 알려준다는 것입니다.
동일한 작업에 관한 여러 aria-live 공지사항에 관한 이 도움말에서 설명한 것처럼 모든 오류를 연결하여 단일 메시지를 만들 수 있습니다. 또 다른 접근 방식은 오류가 있다고 발표한 후 필드에 포커스가 맞춰지면 개별 오류를 알리는 것입니다.
사용자가 오류를 인식하도록 하기
디자이너는 :invalid 의사 클래스를 사용하여 잘못된 상태를 빨간색으로 표시하는 경우가 있습니다.
그러나 오류나 성공을 알리기 위해
색상에만 의존해서는 안 됩니다.
빨강-초록 색맹이 있는 사람의 경우 녹색과 빨간색 테두리가 거의 똑같아 보입니다.
메시지가 오류와 관련이 있는지는 알 수 없습니다.
색상 외에도 아이콘을 사용하거나 오류 메시지 앞에 오류 유형을 붙입니다.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
사용자의 양식 탐색 지원
CSS를 사용하여 양식 컨트롤의 시각적 순서를 변경할 수 있습니다. 시각적 순서와 키보드 탐색 (DOM 순서) 간의 연결 해제는 스크린 리더와 키보드 사용자에게 문제가 됩니다.
DOM 순서를 따르는 페이지의 시각적 순서를 확인하는 방법을 자세히 알아보세요.
사용자가 현재 포커스가 맞춰진 양식 컨트롤을 식별할 수 있도록 지원
키보드를 사용하여 이 양식을 탐색합니다.
양식 컨트롤이 활성화된 후 스타일이 변경되었다는 사실을 알고 계셨나요?
기본 포커스 스타일입니다.
:focus CSS 의사 클래스를 사용하여 재정의할 수 있습니다.
:focus 내에서 사용하는 스타일이 무엇이든 기본 상태와 포커스 상태의 시각적 차이를 항상 인식할 수 있어야 합니다.
포커스 표시기 디자인에 관해 자세히 알아보세요.
양식을 사용할 수 있는지 확인
다양한 기기로 양식을 작성하면 여러 일반적인 문제를 확인할 수 있습니다. 키보드만 사용하거나 스크린 리더 (예: Windows의 NVDA, Mac의 VoiceOver)를 사용하거나 페이지를 200%로 확대/축소합니다. 다양한 플랫폼, 특히 매일 사용하지 않는 기기 또는 설정에서 양식을 항상 테스트하세요. 스크린 리더를 사용하는 사람이나 텍스트 확대 소프트웨어를 사용하는 사람을 아시나요? 상대에게 양식을 작성해 달라고 요청하세요. 접근성 검토는 훌륭합니다. 실제 사용자를 대상으로 테스트하는 것이 훨씬 좋습니다.
접근성 검토 실행 및 실제 사용자를 대상으로 테스트하는 방법을 자세히 알아보세요.