W3C Logo

ARIA 랜드마크 예제

다음 버튼을 사용하여 페이지의 랜드마크와/또는 헤딩에 대한 윤곽을 시각적으로 보세요.

Form 랜드마크

form 랜드마크는 다른 기명 랜드마크(예를 들어, main 또는 search)가 적절하지 않은 경우 양식을 만들도록 결합되는 항목과 객체들의 모음을 포함하는 영역 전체로 식별합니다.

ARIA 1.2 명세: form 랜드마크

디자인 패턴

  • 양식이 검색 기능으로 사용되는 경우 form 랜드마크 대신 search 랜드마크를 사용하세요.
  • form 랜드마크는 사용자들이 양식의 목적 이해를 돕기 위한 레이블을 가져야 합니다.
  • form 랜드마크에 대한 레이블은 보이는 aria-labelledby를 사용하여 제목 엘리먼트로 (예를 들어, h1-h6 엘리먼트) 식별되어야 합니다.
  • 페이지가 둘 이상의 form 랜드마크를 포함하는 경우, 각각은 고유한 레이블을 가져야 합니다.
  • 가능한 항상 HTML 문서의 form 랜드마크에 포함된 컨트롤들은 네이티브 호스트 의미론을 사용해야 합니다:
    • button
    • input
    • select
    • textarea

form 엘리먼트가 접근 가능한 이름을 가진다면 form 랜드마크로 간주됩니다.

HTML Form 랜드마크 예

다음 두 양식이 (예를 들어, 주소록 추가와 조직 추가) 동일한 웹 페이지에서 독립적으로 제출될 수 있다고 가정해보세요.

주소록 추가
조직 추가

Source Code

  <form aria-labelledby="contact">
    <fieldset>

      <legend id="contact">연락처 추가 </legend>

    ... 연락처 추가 폼 컨트롤 ...

    </fieldset>
  </form>

  ...............

  <form aria-labelledby="organization">
    <fieldset>

      <legend id="organization">조직 추가 </legend>

    ... 조직 추가 폼 컨트롤 ...

    </fieldset>
  </form>
  • role="form" 어트리뷰트가 form 랜드마크를 정의합니다.
  • 페이지의 영역을 식별하도록 role="form"을 사용하세요; 모든 양식 필드를 식별하는데 사용하지 마세요.

ARIA Form 랜드마크 예

다음 두 양식 (예를 들어, 주소록 추가와 조직 추가)이 동일한 웹 페이지에서 독립적으로 제출할 수 있다고 가정해보세요.

주소록 추가
조직 추가

Source Code

  <div role="form" aria-labelledby="contact">
    <fieldset>

      <legend id="contact">주소록 추가 </legend>

    ... 주소록 추가 폼 컨트롤 ...

    </fieldset>
  </div>

  ...............

  <div role="form" aria-labelledby="organization">
    <fieldset>

      <legend id="organization">조직 추가 </legend>

    ... 조직 추가 폼 컨트롤 ...

    </fieldset>
  </div>