양식은 사용자가 필드 또는 그룹에 데이터를 제공할 수 있는 요소입니다. 지정할 수 있습니다. 양식은 단일 입력란만큼 간단할 수도 있고 페이지당 여러 개의 입력란, 입력 확인 및 보안문자가 있습니다.
양식은 광고 형식에서 바로잡기 가장 어려운 요소 중 하나로 모든 요소에 대한 지식이 필요하기 때문에 양식에만 적용되는 추가 규칙을 확인할 수 있습니다. 일부 자신의 상황에 맞게 접근 가능한 양식을 만들어 있습니다.
Forms는 이 과정의 마지막 구성요소별 모듈입니다. 이 모듈에서는 양식별 가이드라인에 중점을 두고 있지만, 지금까지 배운 다른 모든 가이드라인은 이전 모듈에서 배운 내용을 콘텐츠 구조 키보드 포커스 색상 대비, 형태에도 적용 요소
필드
양식의 중추는 필드입니다. 필드는 다음과 같은 작은 상호작용 패턴입니다. 입력 또는 라디오 버튼 요소를 통해 사용자가 콘텐츠를 입력하거나 선택의 기로에 서게 됩니다. 다양한 양식 입력란을 사용하여 선택할 수 있습니다.
기본적으로 HTML 패턴 대신 기존 HTML 패턴을 사용하는 것이 ARIA로 사용자설정하는 것과 같은 특정 기능과 필드 상태, 속성, 값과 같은 기능은 본질적으로 맞춤 ARIA를 수동으로 추가해야 함
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
가장 접근하기 쉬운 양식 입력란 패턴을 선택하는 것 외에도 해당되는 경우 HTML 자동 완성 속성 입력합니다. 자동 완성 속성을 추가하면 더욱 세분화된 목적 정의 또는 식별 사용자 에이전트 및 보조 기술 (AT)입니다.
자동 완성 속성을 사용하면 사용자는 시각적 표현을 맞춤설정할 수 있고
예를 들어 생일 자동 완성을 사용하여 입력란에 생일 케이크 아이콘을 표시할 수 있습니다.
속성 (bday)을 할당합니다. 좀 더 일반적으로 말하면 자동 완성 속성을 사용하면
더 쉽고 빠르게 양식을 작성할 수 있습니다. 이 기능은 특히
인지 및 읽기 장애가 있거나 화면 시청과 같은 AT를 사용하는 사람
있습니다.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
마지막으로 양식 입력란은 이전에 사용자에게 해당 동작에 대해 경고를 받지 않은 경우 포커스나 사용자 입력을 확인할 수 있습니다 예를 들어 양식이 자동으로 제출되면 안 됩니다. 필드가 포커스를 받거나 사용자가 필드에 콘텐츠를 추가할 때
라벨
라벨은 사용자에게 필드의 목적을 알립니다. 필드가 필요한 경우 또한 입력 입력란 등의 입력란 요구사항에 대한 정보를 제공할 수 있습니다. 형식으로 입력합니다. 라벨은 항상 표시되어야 하며 양식을 정확하게 설명해야 합니다. 필드를 사용자에게 표시합니다.
접근 가능한 형태의 기본 원칙 중 하나는 명확하고 다양한 정보를 제공할 수 있는 연결 고리를 만들 수 있습니다. 이는 시각적으로 확인할 수 있습니다 이 컨텍스트가 없으면 사용자는 양식의 입력란을 작성하세요
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
또한 우편 주소와 같은 관련 양식 입력란은 시각적으로 그룹화됩니다. 한 가지 방법은 필드 집합/범례를 사용하는 것입니다. 유사한 요소를 그룹화하는 데 사용됩니다.
설명
필드 설명은 분야와 요구사항에 대한 추가 문맥을 제공합니다 필드 설명이 올바르지 않음 라벨 또는 양식 안내가 내용을 설명하는 데 도움이 되는 경우 충분히 이해가 되셨을 것입니다.
하지만 상황에 따라 정보를 추가하면 유용한 경우가 있습니다. 인터넷상의 최소 길이에 대한 정보를 전달하는 등 또는 사용자에게 사용할 캘린더 형식 (예: MM-DD-YYYY 형식).
다양한 방법으로
양식을 작성했습니다. 가장 좋은 방법 중 하나는
aria-describedby
속성을 양식 요소에 추가합니다.<label> 화면
판독기는 설명과 라벨을 모두 읽습니다.
이
aria-labelledby
속성을 추가하면 속성값이
<label>입니다. 항상 그렇듯이, 사용하는 모든 AT에서 최종 코드를 테스트해야 합니다.
지원할 계획입니다
오류
액세스 가능한 양식을 만들 때 사용자가 다른 사람의 접근을 막기 위해 양식 오류를 만들 수 있습니다. 이 모듈의 앞부분에서 식별 라벨을 만들고, 필요할 때마다 자세한 설명을 있습니다. 하지만 양식이 아무리 명확하다고 해도 결국에는 사용자가 실수를 하게 됩니다.
사용자에게 양식 오류가 발생했을 때 첫 번째 단계는 오류를 알립니다. 오류가 발생한 필드가 명확하게 식별되어야 하며 사용자에게 텍스트 형식으로 설명되어야 합니다.
여러 가지 방법으로 오류를 표시할 수 있습니다. 메시지가 다음과 같이 표시됩니다.
- 오류가 발생한 위치 근처의 인라인 모달 팝업
- 페이지 상단의 하나의 큰 메시지로 그룹화된 오류 모음
키보드 포커스에 주의합니다. 및 ARIA 라이브 지역 옵션 할 수 있습니다
가능한 경우 사용자에게 문제를 해결하는 방법에 대한 자세한 제안을 제공합니다. 오류가 발생했습니다. 사용자에게 오류를 알리는 데 사용할 수 있는 속성은 두 가지가 있습니다.
- HTML required 속성을 사용할 수 있습니다. 브라우저에서 제출된 유효성 검사 매개변수에 따라 일반 오류 메시지를 표시합니다.
- 또는 aria-required 속성을 사용하여 맞춤설정된 오류 메시지를 AT에 공유할 수 있습니다. 모든 사용자에게 메시지가 표시되도록 추가 코드를 추가하지 않는 한 AT만 메시지를 수신합니다.
사용자가 모든 오류가 해결되었다고 생각하면 다시 제출할 수 있게 합니다. 양식을 검토하고 제출 결과에 대한 의견을 제공하세요. 오류 성공 메시지가 나타남 모든 오류를 해결하고 양식을 제출했음을 확인합니다.
이해도 확인
액세스 가능한 양식에 대한 지식 테스트
다음 중 가장 접근하기 쉬운 양식 입력은 무엇인가요?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>