4.1 호환성

보조 기술을 포함하여 현재, 미래의 도구와 호환성을 높여야 합니다.

4.1.1 해석 (A)

HTML 마크업 언어를 사용하여 구현된 콘텐츠에서 각 요소는 시작 및 종료 태그가 일치해야 하고, 표준 기술 사양에 따라 중첩 되며, 중복된 속성을 가져서는 안되며, 모든 id 속성 값은 문서에서 유일해야 합니다.

닫는 꺽쇠 괄호 또는 일치하지 않는 속성 값 인용 부호와 같이 중요한 문자가 누락된 시작 및 종료 태그는 문법 오류 입니다.

4.1.2 이름, 역할, 값 (A)

모든 UI 컴포넌트(폼 요소, 링크 및 사용자 정의 컴포넌트 등)는 이름(name)과 역할(role)을 프로그래밍 방식으로 설정할 수 있습니다. 상태(state), 속성(properties) 및 값(value) 또한 프로그래밍 방식으로 설정할 수 있습니다. 이러한 설정 사항은 보조 기술을 포함한 사용자 에이전트에서 활용됩니다.

이 가이드라인은 주로 사용자 정의 UI 컴포넌트를 개발하거나 스크립팅 하는 웹 개발자에게 요구되는 사항입니다. HTML 표준 컴포넌트의 경우 이미 가이드라인을 충족합니다.

4.1.3 상태 메시지 (AA)

HTML 마크업 언어를 사용하여 구현된 상태 메시지는 프로그래밍 방식으로 역할 또는 속성을 설정 함으로서, 포커스 상태가 아니어도 보조 기술에 의해 사용자에게 표시되거나 읽힐 수 있습니다.

해설

이 성공기준은 보조 기술을 사용하는 사람들에게 도움이 됩니다. 스크린리더 사용자는 상태 메시지를 듣습니다. 화면을 확대해서 보는 사람들은 화면에 보이지 않는 메시지에 대해 알 수 있습니다. 인지 장애가 있는 사용자는 깜빡 이거나, 말하는상태 메시지를 통해 주의를 기울일 수 있습니다.

상태 메시지는 사용자에게 중요하지만 초점을 변경할 정도로 중요하지 않은 새 콘텐츠의 예입니다. 이 성공 기준에서는 개발자가 상태 메시지가 표시되는 시기를 식별하는 코드를 추가해야 합니다. 보조 기술은 해당 코드를 식별하여 사용자에게 제시 할 수 있습니다. 이 성공 기준은 4.1.2 이름, 역할, 값(A)을 상태 메시지로 확장합니다. 인터페이스 컨트롤 및 상태 메시지를 보조 기술에 사용할 수 있도록 만들어야 합니다.

예시

오류 메시지 및 경고는 상태 메시지가 될 수 있지만 초점을 오류로 설정하여 컨텍스트를 변경 해서는 안됩니다. 아래 예는 제품 리뷰를 남기는 폼을 시뮬레이션한 것으로 NVDA 스크린리더가 제대로 구현된 상태 메시지를 어떻게 출력 하는지 보여줍니다.

사용자가 너무 오랜시간 아무 것도 안하고 대기 상태 였다가 다시 입력을 시도할 경우, 시스템에서 로그오프 할 것이라는 경고 메시지가 화면에 표시 되고, NVDA는 이를 감지해 새로운 경고 메시지를 음성 출력 합니다.

warning! you will be logged out in 5 minutes if there is no further activity. select add more time if needed.

경고! 더 이상 활동이 없을 경우 5 분 안에 로그 아웃 됩니다. 필요한 경우 추가 시간을 선택하십시오.

개발자는 스크린리더 사용자에게 상태 메시지를 알리기 위해 ARIA Live 영역을 사용해야 합니다. 작동 원리를 설명하는 3 가지 코드는 다음과 같습니다.

aria-live-demo.html

<p role="status" aria-live="off">
  이 텍스트가 업데이트 되어도 스크린리더 사용자에게 아무런 안내를 하지 않습니다.
</p>

<p role="status" aria-live="polite">
  이 텍스트가 업데이트 되면, 사용자가 어떤 일을 수행하지 않을 때 상태 메시지를 알려줍니다.
</p>

<p role="status" aria-live="assertive">
  이 텍스트가 업데이트 되면, 사용자가 어떤 일을 수행하든 즉시 상태 메시지를 알려줍니다.
</p>

성공기준 이해하기 4.1.3을 보면 보다 상세한 디자인 가이드를 볼 수 있습니다.

Previous4. 견고 Next레퍼런스

Last updated 7 years ago

hashtag4.1.1 해석 (A)

hashtag4.1.2 이름, 역할, 값 (A)

hashtag4.1.3 상태 메시지 (AA)

hashtag해설

4.1.1 해석 (A)

4.1.2 이름, 역할, 값 (A)

4.1.3 상태 메시지 (AA)

해설