작성하는 양식은 사용자를 위한 것입니다. 사람들은 다양한 기기를 사용합니다. 일부는 마우스, 터치 기기, 키보드를 사용합니다. 안구 움직임으로 제어되는 장치입니다. 스크린 리더, 소형 화면, 텍스트 확대 소프트웨어를 사용하는 업체도 있습니다. 모든 사용자가 내 양식을 사용하고 싶어 합니다. 모든 사용자가 양식을 이용할 수 있고 유용하게 사용할 수 있도록 하는 방법에 대해 알아보세요.
사용자가 양식 입력란의 목적을 이해할 수 있도록 하기
다양한 양식 컨트롤 중에서 선택할 수 있습니다.
이들의 공통점은 무엇일까요?
모든 양식 컨트롤에는 연결된 <label> 요소가 있어야 합니다.
<label> 요소는 양식 컨트롤의 목적을 설명합니다.
<label> 텍스트는 양식 컨트롤과 시각적으로 연결되며 스크린 리더가 읽습니다.
또한 <label>를 탭하거나 클릭하면 연결된 양식 컨트롤에 포커스가 놓입니다.
더 큰 표적이 될 수 있습니다.
의미 있는 HTML을 사용하여 브라우저의 내장 기능에 액세스
이론적으로는 <div> 요소만 사용하여 양식을 만들 수 있습니다.
네이티브 <form>처럼 보이게 할 수도 있습니다.
사용 시 발생하는 문제
비의미론적 요소는 무엇인가요?
기본 제공 양식 요소는 다양한 내장 기능을 제공합니다. 예를 살펴보겠습니다.
시각적으로 <input> (예시의 첫 번째 항목)과 <div>는 동일하게 보입니다.
<div>에
contenteditable 속성으로 이동합니다.
하지만 적절한 <input> 요소를 사용하는 것과 <div>를 사용하는 것 사이에는 많은 차이점이 있습니다.
<input> 모양입니다.
스크린 리더 사용자가 <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 속성이 있는 경우 잘못된 데이터를 입력하면 브라우저에
양식을 제출하면 양식 컨트롤 옆에 오류 메시지가 표시됩니다. 스크린 리더도 오류 메시지를 알려줍니다.
자체 오류 메시지를 정의할 수도 있습니다.
이 예에서는 오류 메시지를 양식 컨트롤에 연결하려면 추가 변경이 필요합니다.
간단한 접근 방식은 aria-describedby
오류 메시지 요소의 id와 일치하는 양식 컨트롤의 속성입니다.
그런 다음 오류 메시지에 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 내에서 사용하는 스타일이 무엇이든
항상 기본 상태와 포커스 상태의 시각적 차이를 인식할 수 있어야 합니다.
다음에 대해 자세히 알아보기 포커스 표시기 디자인을 참조하세요.
양식을 사용할 수 있는지 확인하기
다양한 기기로 양식을 작성하면 여러 일반적인 문제를 식별할 수 있습니다. 키보드만 사용하고 스크린 리더 (예: NVDA(Windows의 경우) 또는 Mac의 경우 VoiceOver), 200%로 확대할 수 있습니다 항상 다양한 플랫폼에서 양식을 테스트하세요. 특히 매일 사용하지 않는 기기나 설정을 사용하는 것이 좋습니다. 스크린 리더를 사용하는 사람을 알고 계시나요? 텍스트 확대 소프트웨어를 사용하고 계신가요? 시청자에게 양식을 작성해 달라고 요청하세요. 접근성 검토도 훌륭합니다. 실제 사용자를 대상으로 테스트하는 것이 훨씬 더 좋습니다.
작업을 수행하는 방법에 대해 접근성 검토 실제 사용자를 대상으로 테스트하는 방법을 알아야 합니다.