1.3 적응성

정보나 구조를 잃지 않고 다양한 방식(예 : 간단한 레이아웃)으로 표현할 수있는 컨텐츠를 만듭니다.

1.3.1 정보 및 관계 (A)

표현을 통해 전달되는 정보, 구조 및 관계는 프로그래밍 방식으로 결정되거나 텍스트로 제공됩니다.

1.3.2 의미적인 순서 (A)

콘텐츠가 제시되는 순서가 의미에 영향을 줄 때, 올바른 판독 순서가 프로그래밍 방식으로 결정될 수 있습니다.

1.3.3 감각적 특성 (A)

콘텐츠를 이해하고 조작하기 위해 제공된 가이드라인은 모양, 색, 크기, 시각적 위치, 방향 또는 소리와 같은 컴포넌트의 감각적인 특성에 만 의존하지 않습니다.

색상과 관련된 요구 사항은 가이드라인 1.4를 참고하세요.

1.3.4 기기 회전 (AA)

특정 디스플레이 방향이 필수적 이지 않은 한, 콘텐츠는 보기 및 작동을 세로 또는 가로. 한 방향으로 제한 하지 않습니다.

해설

이 지침을 준수하면 태블릿, 스마트폰 등을 휠체어에 장착하거나, 운동 능력이 제한되어 있거나, 현재 손이 바쁘기 때문에 휠체어를 돌리는데 어려움이 있는 사용자의 접근성이 개선 될 것입니다.

휠체어에 장치를 장착하고 헤드 마우스를 사용하여 인터랙션 하는 사람을 고려해, 가능한 경우 애플리케이션의 방향을 회전할 수 있도록 해야 합니다.

특정 방향으로 장치를 장착 한 사람들은 애플리케이션이 항상 고정된 방향으로 사용해야 합니다. 기기를 회전시킬 수 있는 사용자는 하나의 방향을 선호 할 수 있으며 선택할 수 있습니다. 예를 들어 시력이 약하거나 인지 장애가 있는 사람은 가로 방향을 선호 할 수 있습니다. 더 큰 텍스트 크기와 긴 행을 허용하여 가독성을 향상 시킬 수 있기 때문입니다. 모든 방향에서 애플리케이션을 사용할 수 있도록 만들면 누구나 혜택을 얻을 수 있습니다.

스웨덴의 국영 게임 회사 Svenska Spel 웹 사이트(svenskaspel.se)는 이 지침 성공기준에 어긋납니다.

특정 디스플레이 방향이 필수적인 경우는 은행 체크, 피아노 애플리케이션, 프로젝터 또는 TV 용 슬라이드, 바이너리 디스플레이 방향이 적용되지 않는 가상 현실(VR) 컨텐츠 입니다.

애플리케이션의 방향이 고정되어야 하는 몇 가지 예외 사항이 있습니다. 예를 들어 피아노 연주를 시뮬레이션 하는 애플리케이션이 그러합니다. 이러한 애플리케이션은 가로 방향으로 고정되어야 합니다.

수표 입금을 허용하는 은행 업무 애플리케이션은 수표 인식 및 입력을 위해 가로 방향으로 고정되어야 합니다.

세로 이미지의 캐러셀은 세로 방향으로 더 크게 표시되지만 가로 모드에서도 계속 사용할 수 있습니다. 따라서 개발자는 특정 방향으로 고정해야 할 경우, 납득이 되는 고정 이유를 제시해야 합니다.

1.3.5 입력 목적 식별 (AA)

사용자에 관한 정보를 수집하는 각 입력 필드의 목적은 다음과 같은 경우에 프로그래밍 방식으로 결정될 수 있습니다. 이 지침을 준수하면 인지 장애가 있는 사용자가 텍스트를 읽고 입력하는 것이 쉬워져 접근성을 향상 시킵니다. 또한 웹 사이트의 언어를 잘 모르는 사용자 또한 접근성이 향상됩니다.

입력 필드는 사용자 인터페이스(UI) 컴포넌트의 입력 용도 섹션에서 식별된 용도로 사용 되어야 합니다.
콘텐츠는 폼 입력 데이터에 대해 예상되는 의미를 식별 할 수있는 기술을 사용하여 구현 되어야 합니다.

해설

이 지침은 메타 데이터를 첨부 함으로써 사용자가 입력을 더 잘 할 수 있도록 돕는데 있습니다. 이름 및 이메일 주소와 같은 입력을 자동 완성할 수 있도록 구성할 수 있습니다. 자동 완성은 브라우저가 이전 입력에서 저장 한 정보와 양식 필드에서 자동 완성을 허용하는 브라우저 기능의 조합으로 작동합니다.

HTML5 자동완성 마크업은 아래 코드와 같이 구성됩니다.

demo-autocomplete.html

<form action="/sign-in" method="POST">
  <p class="form-control">
    <label for="input-email">이메일</label>
    <input
      type="email" 
      id="input-email" 
      autocomplete="email">
  </p>
  <p class="form-control">
    <label for="input-password">비밀번호</label>
    <input 
      type="password" 
      id="input-password" 
      autocomplete="current-password">
  </p>
  <button type="submit">로그인</button>
</form>

autocomplete 속성에 설정된 값들은 사용자가 임의로 설정한 것이 아닙니다.

필드 이름

의미

정규 포멧

예시

컨트롤 그룹

email

이메일 주소

유효한 이메일

yamoo9@naver.com

E-mail

current-password

사용자 이름 필드에 의해 식별된 계정의 현재 암호(예: 로그인 시)

개행하지 않는 텍스트

qwerty

Password

자동완성 autocomplete 속성에 사용가능한 값은 W3C HTML 5.2 Autofill 속성 표를 참고하세요.

자동 완성 콤보박스 패턴

앞서 다룬 HTML5 자동완성 대신, WAI-ARIA를 사용해 직접 구현한 자동완성 콤보박스 컴포넌트를 활용할 수 있습니다.

1.3.6 목적 식별 (AAA)

HTML 마크업 언어를 사용하여 구현된 콘텐츠에서 사용자 인터페이스(UI) 컴포넌트, 아이콘 및 영역(regions)의 목적을 프로그래밍 방식으로 결정할 수 있습니다.

해설

이 지침을 준수하면 스크린리더와 같은 보조기술 사용자의 접근성이 향상됩니다. 스크린리더와 같은 보조기술로 다음과 같은 작업을 수행할 수 있도록 HTML을 올바르게 작성해야 합니다.

의미를 가진 아이콘 콘텐츠의 경우, 사용자에게 이상하게 읽히지 않도록 적절한 대체 텍스트를 제공해야 합니다.
사용자가 쉽게 탐색할 수 있도록 헤더, 내비게이션, 메인 콘텐츠 영역을 명확히 구분할 수 있도록 해야 합니다.
사용자가 원하는 콘텐츠를 빨리 찾을 수 있도록 h2, h3, h4와 같은 소제목을 활용합니다.

예를 들어 버튼을 "버튼"이 아닌, "버튼의 용도"가 무엇인지를 사용자가 이해할 수 있도록 만들어야 합니다.

aria-label 속성을 사용해 'X 버튼'이 아닌, '닫기 버튼'으로 읽히도록 만들어 버튼의 용도를 보다 쉽게 인식할 수 있도록 구조화 할 수 있습니다.

<button type="button" class="button close-modal" aria-label="닫기">X</button>

다음은 Lainey Feingold 법률 사무소의 웹 페이지 입니다 . 점선 된 자주색 테두리는 페이지 머리글, 탐색 영역, 메인 영역 및 보조 영역을 표시합니다. 머리글이 맨 위에 있습니다. 네비게이션은 헤더 아래에 있으며 페이지를 가로 질러 흐릅니다. 메인 영역은 페이지의 왼쪽에 있습니다. 레이니의 책에 대한 보조 영역은 오른쪽에 배치해 있습니다.

개발자는 코드 내에서 WAI-ARIA를 사용하여 페이지의 각 섹션(영역)을 식별할 수 있도록 구성 했습니다. 이렇게 구성하면 사용자의 혼란을 줄이고 사용자가 콘텐츠에 집중할 수 있게 됩니다.

영역

랜드마크 역할

헤더

role="banner"

내비게이션

role="navigation"

메인

role="main"

보조

role="complementary"

푸터