여러 기기와 플랫폼에서 양식 테스트

양식은 다양한 방법으로 작성할 수 있습니다. 혼잡한 버스 안에서나 스크린 리더, 오래된 노트북에서 스마트폰으로 양식을 사용할 수도 있습니다. 양식이 다양한 기기와 컨텍스트에서 작동하도록 하는 방법을 살펴보겠습니다.

양식이 키보드 사용자에게 작동하는지 확인하기

양식에 액세스할 수 있는지 확인하기 위한 좋은 첫 번째 테스트는 키보드만 사용하여 양식을 작성하는 것입니다. 양식을 열고 tab 키를 사용하여 탐색해 보세요. 현재 어떤 양식 입력란이 사용 중인지 명확하게 알 수 있나요? 어떤 양식 필드가 활성화되어 있는지 사용자가 알 수 있도록 포커스 표시기를 사용할 수 있습니다.

직접 해보기 입력으로 이동하려면 tab 키를 사용하세요. 입력이 활성화되면 윤곽선이 보이나요? 바로 포커스 표시기입니다. :focus CSS 의사 클래스를 사용하여 포커스 표시기를 추가할 수 있습니다.

input:focus {
  outline: 4px solid #222;
}

접근성 높은 포커스 표시기 디자인에 관해 자세히 알아보세요.

사용자의 양식 탐색 지원

사용성과 접근성을 테스트하는 또 다른 좋은 방법은 논리적인 탭 순서가 시각적 탭 순서를 따르는지 확인하는 것입니다. 탭 순서를 테스트하려면 어떻게 해야 하나요? Tab 키를 눌러 양식 전체를 탐색하세요. 부자연스러운 탐색 점프가 발견되었나요? DOM 순서가 시각적 순서와 일치하는지 확인하세요.

페이지의 시각적 순서가 DOM 순서를 따르는지 확인하는 방법을 자세히 알아보세요.

사용자가 터치 기기에서 양식을 작성하도록 지원

좋습니다. 양식이 키보드에서 작동하는지 확인했습니다. 이제 휴대전화와 같은 터치 기기에서도 작동하도록 하는 방법을 살펴보겠습니다.

터치 기기에서 양식을 열고 모든 입력란을 채운 후 양식을 제출합니다. 양식 컨트롤을 선택하려면 여러 번 탭해야 했나요? 이 문제는 탭 영역이 너무 작기 때문일 수 있습니다. 버튼의 탭 대상 크기가 48픽셀 이상이고 각 <input> 및 <select>가 탭할 수 있을 만큼 커야 합니다. 양식 컨트롤 사이에 충분한 간격을 추가하여 사용자가 터치 기기에서 양식을 탐색하는 데 도움을 줄 수도 있습니다.

사용자에게 최적화된 키보드 제공

이전 모듈에서는 type 또는 inputmode 속성을 사용하여 다른 터치 키보드를 활성화하는 방법을 알아봤습니다.

휴대전화에서 데모를 열고 전화번호 필드를 탭합니다. 숫자는 기본적으로 전화번호에 필요할 수 있는 다른 문자와 함께 터치 키보드에 표시됩니다. type="tel"를 사용하여 전화번호 입력에 최적화된 터치 키보드를 표시합니다.

iOS 및 Android에서 type=&#39;tel&#39;이 포함된 입력 요소의 스크린샷으로, type 속성이 터치 키보드를 어떻게 변경하는지 보여줍니다.

스마트폰을 사용하여 직접 사용해 보고 전화번호 입력에 필요한 모든 문자를 쉽게 입력할 수 있는지 확인하세요. 다른 type에서 터치 키보드가 어떻게 작동하는지 알아보려면 데모의 type="email"를 사용해 보세요.

양식 버튼이 숨겨져 있지 않은지 확인

긴 양식을 작성했고 제출할 준비가 되었다고 가정해 보세요 하지만 제출 버튼은 어디에 있나요? 화면 하단에 있는 브라우저 툴바 뒤에 있을 수 있습니다. 버튼이 표시되도록 하는 한 가지 방법은 env() CSS 함수를 사용하는 것입니다. 기기 사용자 인터페이스가 버튼을 가리지 않도록 하는 방법을 알아보세요.

양식이 다양한 플랫폼에서 작동하는지 확인

가능한 한 많은 기기에서 양식을 테스트해 보세요. 오래된 노트북이 있으신가요? 기본 브라우저를 열고 양식을 테스트합니다. 친구가 태블릿을 가지고 있나요? 이 도구를 빌려서 양식을 테스트해 보세요.

브라우저마다 스타일이 다르게 표시되나요? 이후 모듈에서 스타일이 여러 플랫폼에서 작동하도록 하는 방법을 알아볼 수 있습니다.

BrowserStack은 오픈소스 프로젝트를 위한 무료 테스트 계정을 제공하고 Browserling은 다양한 브라우저, 기기, 운영체제에서 테스트할 수 있는 무료 체험판을 제공합니다.

사용자가 다양한 상황에서 양식을 작성할 수 있도록 지원

사람들은 다양한 브라우저, 기기, 운영체제를 사용하지 않습니다. 또한 사용자는 다양한 상황에서 내 양식을 사용합니다. 직접 사용해 보세요. 지금 밖에 햇빛이 비추고 있나요? 휴대전화를 들고 밖으로 나가세요. 밝은 조명에서 양식을 사용하는 것은 명암비를 사용할 수 있는지 테스트하는 좋은 방법입니다.

색상 및 대비 접근성에 관해 자세히 알아보세요.

연결 상태가 좋지 않아도 양식이 작동하는지 확인

기차를 타고 어딘가를 여행한다고 가정해 보겠습니다. 휴대전화에서 웹페이지를 엽니다. 웹사이트를 로드하는 데 어떻게 시간이 이렇게 오래 걸릴지 궁금하네요 😕.

WebPageTest 또는 DevTools를 사용하여 느린 연결과 다양한 네트워크 유형을 시뮬레이션할 수 있습니다.

낮은 대역폭 및 긴 지연 시간으로 테스트에 대해 자세히 알아보세요.

사용자가 이동 중에 양식을 사용하도록 지원

약속 장소에 걸어가고 있다고 상상해 보세요. 갑자기 전화가 울리고 전화를 받는 동시에 보험 회사로부터 알림을 받아 신청 양식을 작성하게 됩니다. 양식을 열어서 걸으면서 대화하면서 작성하려고 합니다.

사람들은 다양한 상황에서 양식을 사용할 수 있습니다. 이동 중이나 다른 일을 하는 동안 스트레스를 받는 상황에 놓입니다. 양식을 사용하기 쉽게 만들면 사용자를 도울 수 있습니다.

시간 제한을 설정하고 양식을 작성해 보세요. 불완전한 조건을 시뮬레이션하여 양식을 테스트해 보세요.

테스트 결과 공유하기

모든 테스트를 문서화하고 결과를 팀과 공유합니다. 이렇게 하면 작업 항목의 우선순위를 정하여 팀의 모든 사람이 가장 중요한 작업을 알 수 있습니다.

테스트 결과 공유에 관해 자세히 알아보세요.

이해도 테스트

크로스 플랫폼 테스트에 관한 지식 테스트

키보드 사용자에게만 포커스 표시기를 표시할 수 있나요?

아니요
다시 시도해 보세요.
예, :focus-visible을(를) 사용합니다.
🎉
예, :focus-detected을(를) 사용합니다.
다시 시도해 보세요.
예, :focus-shown을(를) 사용합니다.
다시 시도해 보세요.

자료