다양한 방법으로 양식을 작성할 수 있습니다. 사람들이 붐비는 버스에 서서 스마트폰으로 양식을 사용할 수도 있습니다. 스크린 리더 또는 구형 노트북에서 읽을 수 있습니다. 다양한 기기와 상황에서 양식이 작동하도록 하는 방법을 알아보겠습니다.
키보드 사용자가 양식을 사용할 수 있는지 확인하기
양식에 액세스할 수 있는지 확인하는 첫 번째 좋은 방법은 키보드만 사용하여 양식을 작성하는 것입니다.
양식을 열고 tab 키를 사용하여 탐색해 보세요.
현재 활성화된 양식 필드가 명확한가요?
사용자가 어떤 양식 필드가 활성 상태인지 알 수 있도록
포커스 표시기를 사용할 수 있습니다.
사용해 보기
tab 키를 사용하여 입력으로 이동합니다.
입력이 활성화되면 윤곽선이 표시되나요?
포커스 표시기입니다.
포커스 표시기를 추가하려면
:focus CSS 의사 클래스
input:focus {
outline: 4px solid #222;
}
다음에 대해 자세히 알아보기 액세스 가능한 포커스 표시기 설계를 참조하세요.
사용자의 양식 탐색 지원
사용성과 접근성에 관한 또 다른 좋은 테스트는 논리적 탭 순서가 시각적 탭 순서를 따르는지 확인하는 것입니다. 탭 순서를 테스트하려면 어떻게 해야 하나요? Tab 키를 눌러 양식 전체를 탐색하세요. 비논리적인 탐색 점프가 있나요? DOM 순서가 시각적 순서와 일치하는지 확인하세요.
자세히 알아보기: 페이지의 시각적 순서가 DOM 순서를 따르도록 합니다.
사용자가 터치 기기에서 양식을 작성하도록 지원
좋습니다. 양식이 키보드에서 작동하는지 확인했습니다. 이제 휴대전화와 같은 터치 기기에서도 작동하도록 하는 방법을 알아보겠습니다.
터치 기기에서 양식을 엽니다.
모든 입력란을 작성하고 양식을 제출합니다.
양식 컨트롤을 선택하기 위해 여러 번 탭해야 했나요?
탭 영역이 너무 작아서 발생한 문제일 수 있습니다.
먼저
버튼의 탭 타겟 크기가 48픽셀 이상
그리고 각 <input>와 <select>가 활용할 수 있을 만큼 충분히 커야 합니다.
또한 터치 기기에서 양식 컨트롤 사이에 충분한 간격을 추가하여 사용자가 양식을 쉽게 탐색할 수 있도록 할 수 있습니다.
사용자에게 최적화된 키보드 제공
이전 모듈에서는 다른 터치 키보드를 활성화하는 방법을 알아봤습니다.
type 또는 inputmode 속성 사용
열기
데모
을 열고 전화번호 입력란을 탭합니다.
숫자가 기본적으로 터치 키보드에 표시되며
전화번호에 필요할 수 있는 다른 문자와 함께 입력하세요.
type="tel"를 사용하여 전화번호 입력에 최적화된 터치 키보드를 이용해 보세요.