4.1.3 상태 메시지

(Level AA)

요약

목표

콘텐츠의 중요한 변화를 사용자에게 알린다.

할 일

초점을 받지 않는 상태 변화를 보조 기술이 사용자에게 알릴 수 있게 한다.

중요성

메시지를 볼 수 없는 사람에게 그 내용을 전달해야 한다.

성공 기준(SC)

마크업 언어로 구현된 콘텐츠에서 상태 메시지는 역할이나 속성을 통해 프로그래밍 방식으로 판별할 수 있어야 한다. 이를 통해 보조 기술이 초점을 이동시키지 않고도 사용자에게 상태 메시지를 제시할 수 있어야 한다.

의도

이 성공 기준의 목적은 초점을 받지 않는 중요한 콘텐츠 변화를 사용자에게 알리되, 사용자의 작업을 불필요하게 방해하지 않는 것이다.

대상자는 스크린 리더 기능이 있는 보조 기술을 사용하는 시각장애 및 저시력 사용자이다. 추가적인 이점으로, 인지 장애가 있는 사용자를 위한 보조 기술이 사용자의 선호에 따라 상태 메시지를 알리는(혹은 지연하거나 억제하는) 대체 수단을 구현할 수도 있다.

이 성공 기준의 범위는 상태 메시지와 관련된 콘텐츠 변화에 한정된다. 상태 메시지는 WCAG에서 정의한 용어이다. 어떤 것이 상태 메시지의 정의에 해당하는지를 결정하는 두 가지 주요 기준은 다음과 같다.

• 메시지가 어떤 동작의 성공이나 결과, 애플리케이션의 대기 상태, 프로세스의 진행 상황, 또는 오류의 존재에 관한 정보를 사용자에게 제공한다.
• 메시지가 맥락 변화를 통해 전달되지 않는다.

상태 메시지의 정의에 해당하지 않는 정보도 페이지에 추가될 수 있다. 예를 들어 검색으로 얻은 결과 목록은 상태 업데이트로 보지 않으므로 이 성공 기준의 적용 대상이 아니다. 그러나 “검색 중…”, “18개의 결과를 찾음” 또는 “결과 없음”처럼 검색의 완료나 상태를 알리는 짧은 텍스트 메시지는, 초점을 받지 않고 페이지 새로 고침을 일으키지 않는다면 상태 업데이트에 해당한다. 상태 메시지의 예는 아래 상태 메시지 예시 절에 나와 있다.

이 성공 기준은 사용자의 맥락을 바꾸지 않으면서 페이지에 새 콘텐츠가 추가되는 상황을 특별히 다룬다. 맥락 변화는 그 특성상 초점을 가져가면서 사용자를 방해한다. 이러한 변화는 이미 보조 기술에 의해 드러나므로, 새 콘텐츠를 사용자에게 알린다는 목표를 이미 충족한 것이다. 따라서 맥락 변화를 수반하는 메시지는 고려할 필요가 없으며, 이 성공 기준의 범위에 속하지 않는다. 맥락을 바꾸어 새 콘텐츠를 추가하는 상황의 예는 아래 상태 메시지가 아닌 변화의 예시 절에 나와 있다.

참고

이 기준은 역할이나 속성을 언급하지만, 실제로는 상태 메시지를 전달하는 데 쓰이는, 프로그래밍 방식으로 판별 가능한 방법 전반에 더 넓게 적용된다. 여기에는 보조 기술의 알림이나 안내를 발생시키는 접근성 API에 대한 직접 접근도 포함된다.

이점

• 상태 메시지에 적절한 역할이나 속성을 지정하면, 스크린 리더가 새 콘텐츠를 읽어주어 시각장애 및 저시력 사용자를 돕는다. 화면을 보는 사용자 대부분은 뷰포트에 부수적으로 추가된 텍스트를 주변 시야로 인지할 수 있다. 이러한 콘텐츠는 사용자가 현재 주시하는 지점에 영향을 주지 않으면서 추가 정보를 제공한다. 보조 기술이 이처럼 새롭고 중요한 텍스트 콘텐츠를 알릴 수 있으면, 더 많은 사용자가 동등한 방식으로 그 정보를 인지하는 이점을 누릴 수 있다.
• 상태 메시지에 적절한 역할이나 속성을 지정하면 앞으로의 활용과 개인화 기회가 열린다. 예를 들어 일부 인지 장애가 있는 사용자를 위해 만들어진 보조 기술이 이를 활용할 수 있다. 페이지 저작자가 사용자의 맥락을 바꾸지 않는(즉, 초점을 가져가지 않는) 화면 추가 요소를 설계하기로 했다면, 대체로 그 정보는 사용자가 반드시 확인해야 하는 모달 대화상자로 제시되는 것보다 덜 중요하다고 볼 수 있다. 따라서 보조 기술은 사용자의 선호에 따라 이러한 메시지를 지연하거나, 억제하거나, 변형하여 사용자가 불필요하게 방해받지 않게 할 수 있다. 반대로 사용자가 원한다면 보조 기술이 이러한 메시지를 강조할 수도 있다.

예제

상태 메시지 예시

• 사용자가 검색 버튼을 누른 후, 페이지 콘텐츠가 갱신되어 검색 결과를 포함하며, 이 결과는 검색 버튼 아래 영역에 표시된다. 콘텐츠 변화에는 이 새 콘텐츠의 상단 근처에 “5개의 결과를 찾음”이라는 메시지도 포함된다. 이 텍스트에는 상태 메시지에 적합한 역할이 지정되어 있다. 스크린 리더가 “5개의 결과를 찾음”이라고 안내한다.
• 사용자가 장바구니 담기 버튼을 누른 후, 장바구니 아이콘 근처 콘텐츠 영역에 “5개 항목”이라는 텍스트가 추가된다. 스크린 리더가 “5개 항목” 또는 “장바구니, 5개 항목”이라고 안내한다.
• 사용자가 우편번호라는 입력란에 잘못된 텍스트를 입력한 후, 입력란 위에 “잘못된 입력”이라는 메시지가 나타난다. 스크린 리더가 “잘못된 입력” 또는 “우편번호, 잘못된 입력”이라고 안내한다.
• 사용자가 어떤 처리를 실행한 후, ‘사용 중’을 상징하는 아이콘이 화면에 나타난다. 스크린 리더가 “애플리케이션 사용 중”이라고 안내한다.
• 애플리케이션이 업그레이드 상태를 나타내는 동적 진행 표시줄을 표시한다. 스크린 리더가 진행 상황을 간간이 안내한다.
• 사용자가 양식을 제출한 후, 기존 양식에 “양식이 성공적으로 제출되었습니다”라는 텍스트가 추가된다. 스크린 리더가 같은 메시지를 안내한다.
• 일부 데이터의 형식이 올바르지 않아 사용자가 양식 작성에 실패한 후, 기존 양식에 “페이지에 5개의 오류”라는 텍스트가 추가된다. 스크린 리더가 같은 메시지를 안내한다.
• 사용자가 온라인 사진 앱에서 사진을 앨범에 넣은 후, 앱이 “‘결혼식’ 앨범에 저장됨”이라는 팝업 메시지를 동적으로 표시하며, 스크린 리더도 이를 읽어준다.

화면에 새 텍스트를 추가하지 않는 상태 메시지의 예시

이 성공 기준은 주로 화면에 텍스트가 추가되거나 보이게 될 때 적용되도록 의도적으로 표현되었다. 그 이유는 새 텍스트가 표시될 때, 그것이 모든 사용자에게 보이도록 의도되기 때문이다. 이 텍스트가 보조 기술을 통해서도 드러나도록 프로그래밍 방식의 수단을 제공하면, 이 성공 기준은 그것을 보지 못하거나 보지 않을 수 있는 사용자에게도 동일한 정보를 제공한다. 그러나 모든 콘텐츠 변화가 화면에 텍스트를 추가하는 것은 아니다. 다음은 모두 이 성공 기준과 관련된 고려 사항이다.

• 보조 기술 사용자에게만 전달되는, 화면에 표시되지 않는 텍스트
• 상태 텍스트의 수정
• 상태 텍스트의 제거
• 이미지처럼 텍스트가 아닌 상태 콘텐츠

보조 기술 사용자에게만 전달되는, 화면에 표시되지 않는 텍스트

보이는 텍스트를 추가하는 것만으로는 보조 기술 사용자에게 충분한 정보를 전달하지 못하는 경우가 있을 수 있다. 예를 들어 새 콘텐츠가 화면의 다른 정보들과 가까이 놓여 시각적 맥락을 만드는데, 텍스트만으로는 그 맥락이 드러나지 않을 수 있다.

이러한 경우 저작자는 맥락을 더하기 위해 상태 메시지에 담을 추가 콘텐츠를 지정할 수 있다. 여기에는 화면에 표시되지 않고 보조 기술에만 제공되는 텍스트도 포함된다. 이러한 기법을 적절히 사용하는 데 관한 중요한 고려 사항은 충분 기법에서 더 자세히 다룬다.

상태 텍스트의 수정

상태 메시지가 페이지에 계속 남아 있는 경우, 이 텍스트를 수정하는 것은 대개 새로운 상태 메시지와 같다. 예를 들어 장바구니 텍스트가 “0개 항목”에서 “3개 항목”으로 갱신되는 경우이다. 이러한 변화를 페이지 콘텐츠에 작성하는 일반적인 방법에서는, 수정된 텍스트 문자열 전체가 새로운 변화로 간주되어 보조 기술이 읽는다. 그러나 이 문자열에서 숫자만 갱신된 콘텐츠 조각으로 코딩된 경우, 스크린 리더 사용자는 “3”만 듣게 될 수 있으며, 이는 사용자에게 맥락을 제공하기에 충분한 정보가 아닐 수 있다. 이러한 상황에서는 “3개 항목” 문자열 전체를 상태 텍스트로 표시하는 것이 대개 더 나은 해결책이다. aria-atomic 사용을 비롯한 자세한 논의는 충분 기법을 참조하라. 이 경우 “장바구니에”와 같은 화면 밖 텍스트를 메시지에 추가하는 것도 배려가 된다.

상태 텍스트의 제거

상태 텍스트가 완전히 제거되는 상황에서는, 그 부재 자체가 상태에 관한 정보를 전달할 수 있다. 가장 뚜렷한 예는 시스템이 “사용 중”이거나 “대기 중”이라는 메시지가 표시되는 경우이다. 화면을 보는 사용자에게 이 텍스트가 사라지는 것은 보통 이제 사용할 수 있는 상태가 되었다는 표시이다. 그러나 화면을 보지 못하는 사용자는, 대기 상태의 종료가 맥락 변화로 이어지지 않는 한, 이 변화를 알 수 없다. 보이는 메시지를 갱신하는 것(예: “시스템 사용 가능”)이 어려운 경우, “시스템 사용 가능” 같은 보이지 않는 상태 메시지를 사용하면 동등한 상태 정보를 제공할 수 있다. 자세한 논의는 충분 기법을 참조하라.

이미지처럼 텍스트가 아닌 상태 콘텐츠

콘텐츠 변화가 텍스트 변화에만 국한되지는 않는다. 아이콘이나 소리가 상태 메시지를 나타내는 경우, 이 정보는 두 가지의 조합을 통해 스크린 리더로 드러난다. 첫째는 대체 텍스트를 규정하는 기존 WCAG 요구 사항(성공 기준 1.1.1 텍스트 아닌 콘텐츠)이고, 둘째는 적절한 역할을 제공하도록 하는 현재 이 성공 기준의 요구 사항이다.

상태 메시지가 아닌 변화의 예시

다음 예는 저작자의 추가 조치가 필요하지 않은 상황을 보여준다. 모든 경우가 “상태 메시지”의 정의에 해당하지 않으므로 이 성공 기준에서 제외된다.

• 저작자가 대화상자에 오류 메시지를 표시한다.

  대화상자는 초점을 가져가므로 맥락 변화로 정의되며, 상태 메시지의 정의에 해당하지 않는다. 초점을 가져간 결과로 새로운 맥락 변화가 스크린 리더에 의해 이미 안내되므로, 이 성공 기준의 범위에 포함할 필요가 없다.

• 사용자가 사용자 인터페이스 구성 요소와 상호작용할 때 콘텐츠가 드러나거나 숨겨진다. 예를 들어 메뉴, 선택 상자, 아코디언, 트리 같은 구성 요소를 펼치거나, 탭 목록에서 다른 탭 항목을 선택하는 경우이다.

  이때 발생하는 콘텐츠 변화는 어느 것도 상태 메시지의 정의에 해당하지 않는다. 또한 사용자 인터페이스 구성 요소의 정의에 해당하는 모든 구성 요소는 이미 4.1.2 이름, 역할, 값에 요구 사항이 규정되어 있으며, 여기에는 값과 상태의 변화 알림을 사용자 에이전트(보조 기술 포함)에 제공하는 것도 포함된다. 그 결과 “펼쳐짐”이나 “접힘” 같은 상태 변화를 스크린 리더가 안내하므로, 사용자는 콘텐츠의 ‘추가’나 ‘제거’를 알게 된다. 따라서 이러한 콘텐츠는 이 성공 기준에서 다룰 필요가 없다.

• 사용자가 불만족을 나타내는 설문 문항에 답한 후, 고객 만족도에 관한 새로운 문항들이 페이지에 추가된다.

  새 입력란은 상태 메시지의 정의에 해당하지 않는다. 이것은 “어떤 동작의 성공이나 결과, 애플리케이션의 대기 상태, 프로세스의 진행 상황, 또는 오류의 존재에 관한 정보를 사용자에게 제공”하지 않으므로, 이 성공 기준을 충족할 필요가 없다.

  참고

  이러한 문항이 추가된다는 상태 메시지를 만들거나, 사용자의 응답에 따라 콘텐츠 변화가 일어날 수 있음을 미리 알리는 것은 모범 사례이지만, 이 상황에서 요구 사항은 아니다.

라이브 리전이나 알림의 다른 활용

라이브 리전과 알림은 이 성공 기준에서 정의하는 상태 메시지에 해당하지 않는 콘텐츠 변화가 일어나는 여러 상황에서도 유용하게 쓸 수 있다. 그러나 스크린 리더 사용자에게 애플리케이션이 지나치게 “수다스러워질” 위험이 있다. 적절한 수준의 피드백이 이루어지도록 사용자 테스트를 수행해야 한다. 알림이나 라이브 리전이 사용자 경험을 어떻게 향상할 수 있는지에 대한 예는 조언 기법에 나와 있다.

참고

이 성공 기준의 목적은 저작자가 새로운 상태 메시지를 만들도록 강제하는 것이 아니다. 그 의도는 상태 메시지가 표시될 때, 보조 기술이 이를 사용자에게 제시할 수 있도록 프로그래밍 방식으로 식별되게 하는 것이다.

기법

이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.

충분 기법

아래에서 귀하의 콘텐츠와 일치하는 상황을 선택하라. 각 상황에는 해당 상황에 충분하다고 알려져 있고 문서화된 기법 또는 기법의 조합이 포함된다.

상황 A: If a status message advises on the success or results of an action, or the state of an application:

• ARIA22: Using role=status to present status messages in combination with any of the following:
  • G199: Providing success feedback when data is submitted successfully

상황 B: If a status message conveys a suggestion, or a warning on the existence of an error:

• ARIA19: Using ARIA role=alert or Live Regions to Identify Errors in combination with any of the following:
  • G83: Providing text descriptions to identify required fields that were not completed
  • G84: Providing a text description when the user provides information that is not in the list of allowed values
  • G85: Providing a text description when user input falls outside the required format or values
  • G177: Providing suggested correction text
  • G194: Providing spell checking and suggestions for text input

참고

이전 일반 기술의 모든 예가 상태 메시지를 사용하여 사용자에게 경고나 오류를 전달하는 것은 아니다. “경고” 역할은 맥락 변화가 발생하지 않는 경우에만 필요하다.

상황 C: If a status message conveys information on the progress of a process:

• ARIA23: Using role=log to identify sequential information updates
• Using role="progressbar" (future link)
• ARIA22: Using role=status to present status messages in combination with G193: Providing help by an assistant in the Web page

조언 기법

준수를 위해 필수는 아니지만 콘텐츠에 더 쉽게 접근할 수 있도록 다음과 같은 추가 기법을 고려해야 한다. 모든 기법을 사용할 수 없거나 모든 상황에서 효과적인 것은 아니다.

• Using aria-live regions to support 1.4.13 Content on Hover or Focus (future link)
• Using role="timer" (future link)
• Where appropriate, moving focus to new content with ARIA18: Using aria-alertdialog to Identify Errors
• Supporting personalization with SCR14: Using scripts to make nonessential alerts optional

오류

다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.

• F103: Failure of Success Criterion 4.1.3 due to providing status messages that cannot be programmatically determined through role or properties
• Using role="alert" or aria-live="assertive" on content which is not important and time-sensitive (future link)