액세스 가능한 콘텐츠 제작 (WCAG 2.1 적합성) creating-accessible-content-wcag-conformance

웹 콘텐츠 접근성 지침(WCAG) 2.1World Wide Web Consortium의 작업 그룹에서 작성한 지침입니다. 장애가 있는 사용자가 웹 콘텐츠에 액세스하여 사용할 수 있도록 하는 데 도움이 되는 기술 독립적 지침 및 성능 기준으로 구성되어 있습니다.

컨소시엄은 다음과 같은 일련의 섹션과 지원 문서를 제공합니다.

또한 다음을 참조하십시오.

이러한 적합성 수준에 따라 레벨 A(가장 낮음), 레벨 AA 및 레벨 AAA(가장 높음)로 지침의 등급이 지정됩니다. 이러한 등급을 간단히 정의하면 다음과 같습니다.

  • 레벨 A: 사이트가 기본적인 최소 접근성 수준에 도달합니다. 이 수준에 도달하려면 모든 레벨 A 성공 기준이 충족되어야 합니다.
  • 레벨 AA:  추구할만한 이상적인 접근성 수준으로서, 사이트는 대부분의 기술을 사용하여 대부분의 상황에서 대부분의 사람에게 액세스할 수 있도록 기본 접근성 수준에 도달합니다. 이 수준에 도달하려면 모든 레벨 A 및 레벨 AA 성공 기준을 충족해야 합니다.
  • 레벨 AAA: 귀하의 사이트는 높은 수준의 접근성을 제공합니다. 이 수준에 도달하려면 모든 레벨 A, 레벨 AA 및 레벨 AAA 성공 기준을 충족해야 합니다.

사이트를 만들 때에는 사이트가 따라야 할 전반적인 수준을 결정해야 합니다.

다음 섹션에서는 레벨 A 및 레벨 AA 적합성 수준에 대한 관련 성공 기준이 있는 WCAG 2.1 지침의 레이어에 대해 설명합니다.

NOTE
이 문서에서는 다음이 사용됩니다.

원칙 1: 인지 가능 principle-perceivable

원칙 1: 인지 가능 - 정보 및 사용자 인터페이스 구성 요소는 사용자가 인지할 수 있는 방식으로 사용자에게 표시될 수 있어야 합니다.

텍스트 대체 요소 (1.1) text-alternatives

지침 1.1 텍스트 대체 요소: 대형 인쇄물, 점자, 음성, 기호 또는 더 간결한 언어와 같이, 사람들이 필요로 하는 다른 형식으로 변경시킬 수 있도록 텍스트가 아닌 콘텐츠에 대해 텍스트 대체 요소를 제공하십시오.

텍스트가 아닌 콘텐츠 (1.1.1) non-text-content

  • 성공 기준 1.1.1
  • 레벨 A
  • 텍스트가 아닌 콘텐츠: 아래 나열된 상황을 제외하고, 사용자에게 제시되는 모든 텍스트가 아닌 콘텐츠에는 동등한 목적을 제공하는 텍스트 대체 요소가 있습니다.

목적 - 텍스트가 아닌 콘텐츠 (1.1.1) purpose-non-text-content

웹 페이지의 정보는 사진, 비디오, 애니메이션, 차트 및 그래프와 같이 텍스트가 아닌 다양한 형식으로 제공될 수 있습니다. 앞이 안 보이거나 심각한 시각 장애가 있는 사람은 텍스트가 아닌 콘텐츠를 볼 수 없습니다. 그러나 이러한 사용자에게는 콘텐츠를 화면 판독기로 읽어주거나 점자 표시 디바이스를 통해 촉각 형식으로 제시함으로써 텍스트 콘텐츠에 액세스할 수 있도록 할 수 있습니다. 따라서 그래픽 형식의 콘텐츠에 텍스트 대체 요소를 제공하면 그러한 콘텐츠를 볼 수 없는 사람도 콘텐츠가 제공하는 정보에 해당하는 버전에 액세스할 수 있습니다.

유용한 추가 이점은 텍스트 대체 요소를 통해 텍스트가 아닌 콘텐츠를 검색 엔진 기술로 색인화할 수 있다는 것입니다.

충족 방법 - 텍스트가 아닌 콘텐츠 (1.1.1) how-to-meet-non-text-content

정적 그래픽의 경우, 기본 요건은 그래픽에 대해 동등한 텍스트 대체 요소를 제공하는 것입니다. 이 방법은 대체 텍스트 필드에서 수행할 수 있습니다. 그 예로 핵심 구성 요소 이미지 ​를 보십시오.

NOTE
전체 구성 요소에 대해 레이블 필드(접근성 탭)가 있더라도 슬라이드 등의 바로 사용 가능한 일부 핵심 구성 요소는 개별 이미지에 대체 텍스트 설명을 추가하기 위한 대체 텍스트 필드를 제공하지 않습니다.
AEM 인스턴스에 대해 이러한 구성 요소의 버전을 구현할 때 개발 팀은 alt 속성을 지원하도록 해당 구성 요소를 구성해야 합니다. 이렇게 하면 작성자가 콘텐츠에 해당 설명을 추가할 수 있습니다(추가 HTML 요소 및 속성에 대한 지원 추가 참조).

AEM을 사용하려면 기본적으로 대체 텍스트 필드를 채워야 합니다. 이미지가 단순한 장식용이고 대체 텍스트가 필요 없는 경우 이미지가 장식용임 옵션을 선택할 수 있습니다.

좋은 텍스트 대체 요소 만들기 creating-good-text-alternatives

텍스트가 아닌 콘텐츠의 양식은 다양하므로, 텍스트 대체 요소의 값은 웹 페이지에서 그래픽이 수행하는 역할에 따라 달라집니다. 유용한 일반적인 경험상의 규칙 몇 가지는 다음과 같습니다.

  • 텍스트 대체 요소는 간결해야 하지만 동시에 텍스트가 아닌 콘텐츠에서 제공하는 본질적인 정보를 명료하게 담고 있어야 합니다.

  • 너무 길게(100자 이상) 설명하지 않아야 합니다. 텍스트 대체 요소에 세부 정보가 더 필요한 경우,

    • 대체 텍스트로 짧은 설명을 제공합니다.
    • 동일한 페이지의 다른 위치나 별도의 웹 페이지에서 텍스트로 더 길게 설명해 놓은 후 이미지를 링크로 만들거나 이미지 옆에 텍스트 링크를 배치하여 이 별도의 설명에 연결합니다.
  • 대체 텍스트는 동일한 페이지의 근처에서 텍스트 양식으로 제공되는 콘텐츠를 그대로 복사한 것이 아닙니다. 이미 많은 이미지가 페이지의 텍스트에서 다루는 핵심 사항의 삽화로 제공되고 있으므로, 이미지에 해당하는 상세한 텍스트 대체 요소가 이미 존재할 수 있습니다.

  • 텍스트가 아닌 콘텐츠가 다른 페이지나 문서의 링크이고 동일한 링크의 일부를 형성하는 다른 텍스트가 없다면 이미지에 대한 대체 텍스트는 링크 대상을 가리켜야 합니다. 단순히 이미지를 설명하면 안 됩니다.

  • 텍스트가 아닌 콘텐츠가 버튼 요소에 포함되어 있고 동일한 버튼의 일부를 형성하는 텍스트가 없다면 이미지의 대체 텍스트는 버튼의 기능을 가리켜야 합니다. 단순히 이미지를 설명하면 안 됩니다.

  • 이미지에 빈(null) 대체 텍스트를 제공할 수 있지만 이는 이미지에 대체 텍스트가 필요하지 않은 경우에만 가능합니다. 순전히 장식용 그래픽이거나 페이지 텍스트에 동등한 텍스트가 이미 있는 경우를 그 예로 들 수 있습니다.

텍스트 대체 요소를 필요로 하는 특정 유형의 텍스트가 아닌 콘텐츠에는 다음 내용이 포함될 수 있습니다.

  • 실례가 되는 사진: 사람, 사물 또는 장소의 이미지입니다. 요소 유형(예: graphic 또는 image)에 대한 설명은 보조 기술이 제공하므로 페이지에서 사진의 역할과 이미지 콘텐츠에 대한 권장 설명을 생각하는 것이 중요합니다. 대체 텍스트 설명에 screenshot 또는 illustration을 사용하면 명확성을 높일 수 있지만 이는 문맥에 따라 다릅니다. 일관성은 중요한 요소이므로 전체 제작 팀을 고려하여 결정을 내려야 하며 이는 사용자 경험 전반에 걸쳐 적용되어야 합니다.

  • 아이콘: 특정 정보를 전달하는 작은 그림 문자(그래픽)로서, 페이지와 사이트 전체에서 일관되게 사용되어야 합니다. 인접한 텍스트를 불필요하게 복제하는 경우가 아니라면 이 아이콘의 인스턴스는 페이지나 사이트에서 표시될 때마다 동일한 짧고 간결한 대체 텍스트를 포함해야 합니다.

  • 차트 및 그래프: 일반적으로 숫자 데이터를 나타냅니다. 따라서 텍스트 대체 요소를 제공하기 위한 한 가지 옵션은 차트나 그래픽에 표시된 주요 경향에 대한 간단한 요약을 포함하는 것일 수 있습니다. 필요할 경우 고급  이미지 속성 탭의​ 설명 ​필드를 사용하여 보다 자세한 설명을 텍스트로 제공할 수도 있습니다. 소스 데이터를 페이지나 사이트의 다른 위치에서 표 형식으로 제공할 수도 있습니다.

  • 맵, 다이어그램, 순서도: 공간 데이터를 제공하는 그래픽의 경우(예: 오브젝트나 프로세스 간 관계 설명) 주요 메시지는 텍스트 형식으로 제공되어야 하며 이 텍스트 정보는 관련된 각 데이터 포인트 근처에 위치해야 합니다. 맵의 경우, 상응하는 전체 텍스트를 제공하는 것은 비현실적일 수 있지만, 맵이 특정 위치까지 가는 방법을 찾는 사람들을 돕는 방법으로 제공되는 경우, 맵 이미지의 대체 텍스트는 간단히 X 지도 ​를 가리킨 다음, 페이지의 다른 곳이나 이미지  구성 요소의 고급 탭에 있는 설명 필드를 통해 해당 위치로 가는 방향을 텍스트로 제공할 수 있습니다.

  • CAPTCHA: CAPTCHA는 컴퓨터와 인간을 구분하기 위해 완전히 자동화된 공공 튜링 테스트 ​입니다. 이 테스트는 인간을 악성 소프트웨어로부터 구별하기 위해 웹 페이지에서 사용되는 보안 검사지만, 접근성 장벽을 생성할 수 있습니다. 보안 테스트를 통과하기 위해 사용자에게 보이는 내용을 설명할 것을 요구하는 이미지가 여기에 해당합니다. 이 이미지에 대한 대체 텍스트를 제공하는 것은 불가능하므로 대신 그래픽이 아닌 대체 솔루션을 고려해 보아야 합니다. W3C는 몇 가지 제안 사항을 제공합니다. 이러한 각각의 접근 방식에는 고유한 장점과 단점이 있습니다.

    • 논리 퍼즐
    • 이미지 대신 사운드 출력 사용
    • 계정 및 스팸 필터의 제한된 사용
  • 배경 이미지: 배경 이미지는 HTML보다는 CSS(Cascading Style Sheets)를 사용하여 만들어집니다. 이는 대체 텍스트 값을 지정할 수 없음을 의미합니다. 따라서 배경 이미지는 중요한 텍스트 정보를 제공해서는 안 됩니다. 그럴 경우, 이 정보가 페이지의 텍스트로도 제공되어야 합니다. 하지만 이미지를 표시할 수 없을 때에는 대체 배경을 표시하는 것이 중요합니다.

NOTE
배경과 전경 텍스트 간에는 적절한 수준의 대비가 있어야 합니다. 이에 대해서는 대비(최소)(1.4.3)에서 더 자세히 설명합니다.

추가 정보 - 텍스트가 아닌 콘텐츠 (1.1.1) more-information-non-text-content

시간 기반 미디어 (1.2) time-based-media

지침 1.2 시간 기반 미디어: 시간 기반 미디어에 대한 대체 요소를 제공합니다.

여기서는 시간 기반 ​의 웹 콘텐츠를 다룹니다.사용자가 재생할 수 있고(예: 비디오, 오디오 및 애니메이션 콘텐츠) 사전 녹화된 스트림이나 라이브 스트림일 수 있는 콘텐츠가 여기에 포함됩니다.

오디오 전용 및 비디오 전용 (사전 녹화) (1.2.1) audio-only-and-video-only-prerecorded

  • 성공 기준 1.2.1

  • 레벨 A

  • 오디오 전용 및 비디오 전용(사전 녹화): 사전 녹음된 오디오 전용 및 사전 녹화된 비디오 전용 미디어의 경우 오디오나 비디오가 텍스트에 대한 대체 미디어이고 다음과 같이 레이블로 명시된 경우를 제외하면 다음 사항이 적용됩니다.

    • 사전 녹음된 오디오 전용: 사전 녹음된 오디오 전용 콘텐츠에 대해 이에 상당하는 정보를 나타내는 시간 기반 미디어의 대체 요소입니다.
    • 사전 녹화된 비디오: 사전 녹화된 비디오 전용 콘텐츠에 대해 이에 상당하는 정보를 나타내는 시간 기반 미디어 또는 오디오 트랙의 대체 요소입니다.

목적 - 오디오 전용 및 비디오 전용 (사전 녹화) (1.2.1) purpose-audio-only-and-video-only-prerecorded

다음 사용자의 경우 비디오 및 오디오에 대한 접근성 문제를 경험할 수 있습니다.

  • 사운드트랙이 없거나 사운드트랙이 비디오나 애니메이션에서 일어나고 있는 일을 알려 주기에 충분하지 않은데 시각 장애가 있는 사람
  • 청각 장애가 있거나 소리를 아예 들을 수 없거나 사운드트랙을 들을 수 없는 사람
  • 사운드트랙을 들을 수 있지만, 말하는 내용을 이해하지 못하는 사람(예를 들어 이해할 수 없는 언어로 된 경우).

Adobe Flash와 같은 특정 미디어 형식의 콘텐츠 재생을 지원하지 않는 브라우저나 디바이스를 사용하는 사람도 비디오나 오디오를 사용하지 못할 수 있습니다.

텍스트(또는 오디오가 없는 비디오를 위한 오디오) 등의 다른 형식으로 이러한 정보를 제공하면 원래 콘텐츠에 액세스할 수 없는 사람이 액세스할 수 있게 됩니다.

충족하는 방법 - 오디오 전용 및 비디오 전용 (사전 녹화) (1.2.1) how-to-meet-audio-only-and-video-only-prerecorded

  • 콘텐츠가 비디오가 없는 사전 녹음된 오디오인 경우(예: 팟캐스트)

    • 콘텐츠의 바로 앞 또는 뒤의 링크를 오디오 콘텐츠의 텍스트 스크립트에 연결합니다. 텍스트 스크립트는 모든 음성 콘텐츠 및 중요한 비음성 콘텐츠에 상당하는 텍스트를 포함하고 발언 중인 사람, 설정 설명, 음성 표현 및 다른 중요한 오디오의 설명이 명시되어 있는 HTML 페이지여야 합니다.
  • 콘텐츠가 오디오가 없는 애니메이션 또는 사전 녹화된 비디오인 경우

    • 콘텐츠의 바로 앞 또는 뒤의 링크를 비디오가 제공하는 정보에 상응하는 텍스트 설명에 연결합니다.
    • 또는 MP3와 같이 일반적으로 사용되는 오디오 형식의 상응하는 오디오 설명에 연결합니다.
NOTE
오디오 또는 비디오 콘텐츠가 동일한 웹 페이지에서 다른 형식으로 존재하는 콘텐츠에 대한 대체 요소로 제공되는 경우 추가 대체 요소가 필요하지 않을 수 있습니다.
WCAG 1.2.1 이해 지침은 자세한 정보를 제공합니다.

멀티미디어를 AEM 웹 페이지에 삽입하는 방법은 이미지를 삽입하는 방법과 유사합니다. 하지만 멀티미디어 콘텐츠는 정지 이미지보다 훨씬 크므로 멀티미디어가 재생되는 방식을 제어하기 위한 다양한 설정 및 옵션이 있습니다.

NOTE
정보성 콘텐츠가 있는 멀티미디어를 사용하는 경우 대체 요소에 대한 링크도 만들어야 합니다. 예를 들어 텍스트 스크립트를 포함하려면 HTML 페이지를 만들어 텍스트 스크립트를 표시한 다음 오디오 콘텐츠의 옆이나 아래에 링크를 추가합니다.

추가 정보 - 오디오 전용 및 비디오 전용 (사전 녹화) (1.2.1) more-information-audio-only-and-video-only-prerecorded

캡션 (사전 기록됨) (1.2.2) captions-prerecorded

  • 성공 기준 1.2.2
  • 레벨 A
  • 캡션(사전 기록된): 미디어가 텍스트의 미디어 대체 요소이고 이것이 레이블로 명시된 경우를 제외하면 동기화된 미디어에 있는 사전 녹음된 모든 오디오 콘텐츠에 대해 캡션이 제공됩니다.

목적 - 캡션 (사전 기록됨) (1.2.2) purpose-captions-prerecorded

청각 장애가 있거나 난청인 사람은 오디오 콘텐츠에 액세스할 수 없거나 액세스하는 데 어려움이 큽니다. 캡션은 음성 오디오 및 비음성 오디오에 상응하는 텍스트로서, 비디오가 재생되는 동안 적절한 시점에 화면에 표시됩니다. 캡션을 사용하면 오디오를 들을 수 없는 사람이 비디오의 내용을 이해할 수 있습니다.

충족하는 방법 - 캡션 (사전 기록됨) (1.2.2) how-to-meet-captions-prerecorded

다음 중 한 방법으로 캡션을 사용할 수 있습니다.

  • 열림: 비디오가 재생될 때 항상 표시
  • 닫힘: 사용자가 캡션을 켜거나 끌 수 있음

캡션을 볼지 여부를 사용자가 선택할 수 있도록, 가능할 때마다 닫힘 캡션 기능을 사용하십시오.

닫힘 캡션의 경우, 비디오 파일과 함께 동기화된 캡션 파일을 적절한 형식(예: SMIL)으로 만들어 제공해야 합니다. 이 안내서에서는 이러한 방법에 대해 자세히 설명하지 않지만, 추가 정보 - 캡션(사전 기록됨)(1.2.2)의 몇 가지 튜토리얼 링크를 통해 알아볼 수 있습니다. 사용자에게 비디오에 캡션을 사용할 수 있다는 것을 알리기 위해 메모를 제공하거나 비디오 플레이어에서 캡션 기능을 활성화해야 합니다.

열림 캡션을 사용해야 하는 경우 텍스트를 비디오 트랙에 임베드하십시오. 비디오에 제목을 오버레이할 수 있도록 해 주는 비디오 편집 애플리케이션을 사용하면 됩니다.

추가 정보 - 캡션 (사전 기록됨) (1.2.2) more-information-captions-prerecorded

c

오디오 설명 또는 미디어 대체 요소 (사전 기록됨) (1.2.3) audio-description-or-media-alternative-prerecorded

  • 성공 기준 1.2.3
  • 레벨 A
  • 오디오 설명 또는 미디어 대체 요소(사전 녹음된): 미디어가 텍스트의 미디어 대체 요소이고 이것이 레이블로 명시된 경우를 제외하면 동기화된 미디어에 대해 사전 녹화된 비디오 콘텐츠의 시간 기반 미디어나 오디오 설명에 대한 대체 요소가 제공됩니다.

목적 - 오디오 설명 또는 미디어 대체 요소 (사전 기록됨) (1.2.3) purpose-audio-description-or-media-alternative-prerecorded

비디오나 애니메이션에 있는 정보가 시각적으로만 제공되거나 사운드트랙의 정보로는 상황을 시각적으로 이해할 수 없는 경우, 앞이 안 보이거나 시각 장애가 있는 사용자는 접근성 장벽을 경험할 수 있습니다.

충족하는 방법 - 오디오 설명 또는 미디어 대체 요소 (사전 기록됨) (1.2.3) how-to-meet-audio-description-or-media-alternative-prerecorded

이러한 성공 기준을 충족하기 위해 채택할 수 있는 접근 방법은 두 가지가 있습니다. 다음 중 한 방법을 사용하면 됩니다.

  1. 비디오 콘텐츠에 대한 추가 오디오 설명을 포함합니다. 이 방법은 다음 세 가지 방법 중 하나를 사용하여 수행할 수 있습니다.

    • 기존 대화에서 잠시 중단한 동안, 기존 오디오 트랙의 일부로서 표현되지 않은 장면의 변화에 대한 정보를 제공합니다.

    • 원래의 사운드트랙뿐만 아니라 장면 변화에 대한 추가 오디오 정보도 포함하는 새로운 선택적 추가 오디오 트랙을 제공합니다.

      • 이렇게 하면 사용자가 기존의 오디오 트랙(오디오 설명이 들어 있지 않음)과 새 오디오 트랙(오디오 설명이 들어 있음) 간을 전환할 수 있습니다.
      • 이 방법은 추가 설명이 필요하지 않는 사용자에게 불편을 주지 않습니다.
    • 확장된 오디오 설명을 허용하는 비디오 콘텐츠의 두 번째 버전을 만듭니다. 이렇게 하면 적절한 지점에서 오디오와 비디오를 일시적으로 중단하여, 기존 대화 간 공백 내에 상세한 오디오 설명을 제공하는 것과 관련된 어려움이 줄어듭니다. 따라서 작업이 다시 시작되기 전에 훨씬 더 긴 오디오 설명이 가능합니다. 앞의 예에서처럼 이 방법은 추가 설명이 필요하지 않은 사용자에게 지장을 주지 않도록 선택 가능한 추가 오디오 트랙으로 제공되면 가장 좋습니다.

  2. 비디오나 애니메이션의 오디오 요소와 시각적 요소에 상응하는 적절한 텍스트인 텍스트 스크립트를 제공합니다. 여기에는 가능한 경우 발언 중인 사람, 설정 설명, 시각적으로 표시된 이벤트 또는 정보, 음성 표현 등이 포함됩니다. 길이에 따라 텍스트 스크립트를 비디오 또는 애니메이션과 동일한 페이지에 배치하거나 별도의 페이지에 배치할 수 있습니다. 후자를 선택하는 경우 비디오 또는 애니메이션 옆에 있는 텍스트 스크립트에 링크를 제공하십시오.

이 안내서에서는 오디오 설명이 있는 비디오를 만드는 방법에 대해 자세히 다루지 않습니다. 비디오와 오디오 설명을 만드는 것은 시간이 많이 소요될 수 있지만, 다른 Adobe 제품을 사용하면 이런 작업을 수행하는 데 도움이 될 수 있습니다.

추가 정보 - 오디오 설명 또는 미디어 대체 요소 (사전 기록됨) (1.2.3) more-information-audio-description-or-media-alternative-prerecorded

캡션(라이브) (1.2.4) captions-live

  • 성공 기준 1.2.4
  • 레벨 AA
  • 캡션(라이브): 동기화된 미디어에 있는 모든 라이브 오디오 콘텐츠에 대해 캡션이 제공됩니다.

목적 - 캡션 (라이브) (1.2.4) purpose-captions-live

이 성공 기준이 웹 캐스트와 같은 라이브 프레젠테이션을 다루는 경우를 제외하면 이 성공 기준은 소리를 아예 들을 수 없거나 청각 장애가 있는 사람이 경험하는 접근성 장벽을 해결한다는 점에서 캡션(사전 녹음된)과 동일합니다.

충족하는 방법 - 캡션 (라이브) (1.2.4) how-to-meet-captions-live

위의 캡션(사전 기록됨)에 대해 제공된 지침을 따르십시오. 하지만 미디어에는 라이브 특성이 있으므로 캡션은 가능한 한 빨리, 현재 상황을 반영하도록 제공해야 합니다. 따라서 실시간 캡션 기능이나 음성을 텍스트로 변환하는 도구의 사용을 고려해 보아야 합니다.

이 문서에서는 지침을 자세히 다루지 않지만 다음 리소스에서 유용한 정보를 확인할 수 있습니다.

추가 정보 - 캡션 (라이브) (1.2.4) more-information-captions-live

오디오 설명 (사전 기록됨) (1.2.5) audio-description-prerecorded

  • 성공 기준 1.2.5
  • 레벨 AA
  • 오디오 설명(사전 녹음된): 동기화된 미디어에 있는 모든 사전 녹화된 비디오 콘텐츠에 대해 오디오 설명이 제공됩니다.

목적 - 오디오 설명 (사전 기록됨) (1.2.5) purpose-audio-description-prerecorded

이 성공 기준은 작성자가 레벨 AA에 부합하는 훨씬 더 상세한 오디오 설명을 제공해야 한다는 점을 제외하면 오디오 설명 또는 미디어 대체 요소(사전 녹음된)와 동일합니다.

충족하는 방법 - 오디오 설명 (사전 기록됨) (1.2.5) how-to-meet-audio-description-prerecorded

오디오 설명 또는 미디어 대체 요소(사전 녹음된)에 제공된 지침을 따르십시오.

추가 정보 - 오디오 설명 (사전 기록됨) (1.2.5) more-information-audio-description-prerecorded

적응성 (1.3) adaptable

지침 1.3 적응성: 정보나 구조의 손상 없이 다양한 방식으로 보여 줄 수 있는 콘텐츠(예: 간단한 레이아웃)를 만드십시오.

이 지침에는 다음과 같은 사람을 지원하는 데 필요한 요구 사항이 포함됩니다.

  • 해당 콘텐츠의 기본 표시(예: 다중 열 레이아웃 또는 색상 및/또는 이미지가 많이 사용되는 페이지)에서 작성자가 제공한 정보에 액세스할 수 없습니다.

  • 오디오만 사용할 수 있거나, 큰 텍스트나 높은 대비와 같은 대체 시각적 표시만 사용할 수 있는 사람

정보 및 관계 (1.3.1) info-and-relationships

  • 성공 기준 1.3.1
  • 레벨 A
  • 정보 및 관계: 프레젠테이션을 통해 전달된 정보, 구조 및 관계는 프로그래밍 방식으로 결정되거나 텍스트에서 사용할 수 있습니다.

목적 - 정보 및 관계 (1.3.1) purpose-info-and-relationships

장애를 가진 사람이 사용하는 많은 보조 기술은 콘텐츠를 효과적으로 표시하거나 이해 ​하기 위해 구조적 정보에 의존합니다. 이러한 구조적 정보는 페이지 머리글, 표 행 및 열 머리글과 목록 유형의 형식을 취할 수 있습니다. 예를 들어 스크린 리더를 사용하는 사용자는 머리글에서 머리글까지 페이지를 탐색할 수 있습니다. 하지만 페이지 콘텐츠가 기본 HTML이 아니라 시각적 스타일링을 통해서만 구조를 갖는 것으로 나타나면 보조 기술에 사용할 수 있는 구조적 정보가 없어서 더 쉬운 탐색을 지원하는 것으로 기능이 제한됩니다.

이 성공 기준은 그와 같은 구조적 정보가 HTML을 통해 프로그래밍 방식으로 제공됨으로써 브라우저와 보조 기술이 정보에 액세스하여 이용할 수 있도록 하기 위한 것입니다.

충족하는 방법 - 정보 및 관계 (1.3.1) how-to-meet-info-and-relationships

AEM을 사용하면 적절한 HTML 요소를 사용하여 의미상 웹 콘텐츠를 만들기가 쉬워집니다. RTE(텍스트 구성 요소)로 페이지 콘텐츠를 열고 Paraformat 메뉴(단락 기호)를 사용하여 적절한 구조적 요소(예: 단락, 머리글 등)를 지정합니다.

해당되는 경우 다음 요소를 사용하여 웹 페이지에 적절한 구조가 지정되어 있는지 확인할 수 있습니다.

  • 머리글: RTE의 접근성 기능이 활성화되어 있는 한 AEM에서는 3가지 수준의 페이지 머리글을 제공합니다. 이를 사용하여 콘텐츠의 섹션과 하위 섹션을 확인할 수 있습니다. 제목 1은 가장 높은 수준의 제목이고, 제목 3은 가장 낮은 수준의 제목입니다. 시스템 관리자는 더 많은 머리말 수준을 사용할 수 있도록 시스템을 구성할 수 있습니다.

  • 목록: HTML을 사용하여 세 가지 서로 다른 유형의 목록을 지정할 수 있습니다.

    • <ul> 요소는 무순차(글머리 기호) 목록에 사용됩니다. 개별 목록 항목이 <li> 요소를 사용하여 식별됩니다. RTE에서 글머리 기호 목록 아이콘을 사용하십시오.
    • <ol> 요소는 번호 목록에 사용됩니다. 개별 목록 항목이 <li> 요소를 사용하여 식별됩니다. RTE에서는 번호 목록 아이콘을 사용하십시오.

    기존 콘텐츠를 특정 목록 유형으로 변경하려면 적절한 텍스트를 강조 표시하고 적절한 목록 유형을 선택하십시오. 단락 텍스트가 어떻게 입력되는지를 보여 주는 앞의 예에서처럼, 적절한 목록 요소가 HTML에 자동으로 추가됩니다.

    전체 화면 모드에서는 개별 글머리 기호 목록번호 목록 아이콘이 표시됩니다. 전체 화면 모드가 아닌 경우, 단일 목록 아이콘 뒤에 두 가지 옵션을 사용할 수 있습니다.

  • : 데이터 표는 HTML 표 요소를 사용하여 식별해야 합니다.

    • 하나의 <table> 요소
    • 표의 각 행에 대한 <tr> 요소
    • 각 행 및 열 머리글에 대한 <th> 요소
    • 모든 데이터 셀에 대한 <td> 요소

    또한 액세스 가능한 표에서는 다음 요소와 속성을 사용합니다.

    • <caption> 요소를 사용하여 표에 보이는 캡션을 제공할 수 있습니다. 캡션은 기본적으로 표의 위쪽 중앙에 나타나지만 CSS를 사용하여 위치를 적절하게 지정할 수 있습니다. 캡션은 표와 프로그래밍 방식으로 연결되어 있으므로 콘텐츠에 소개를 제공하는 데 유용한 방법입니다.
    • <summary> 요소는 시력이 정상인 사용자가 볼 수 있는 내용에 대한 개요를 제공함으로써, 안 보이는 사용자가 표 내에 제시된 정보를 더 쉽게 이해할 수 있도록 도와줍니다. 이 워크플로는 복잡하거나 색다른 표 레이아웃을 사용할 때 유용하며, 이 속성은 브라우저에 표시되지 않고 보조 기술에만 인식됩니다.
    • <th> 요소의 scope 속성은 셀이 특정 행 또는 특정 열에 대한 헤더를 표현하는지 여부를 나타내기 위해 사용됩니다. 유사한 접근 방법은 복잡한 표에서 헤더와 id 속성을 사용하는 것입니다. 이 경우 데이터 셀이 하나 이상의 헤더와 연결되어 있을 수 있습니다.
    note note
    NOTE
    시스템 관리자가 표 속성 대화 상자에서 이러한 값에 대한 지원을 추가할 수 있지만, 기본적으로 이러한 요소와 속성을 직접 사용할 수는 없습니다(추가 HTML 요소 및 속성에 대한 지원 추가 참조).

    표 속성 탭을 선택할 수 있는 대화 상자를 열려면:

    • 적합한 캡션 ​을 정의합니다.
    • 가장 좋은 방법은 , 높이, 테두리, 셀 패딩, 셀 간격 ​에 대한 기본 값을 제거하는 것입니다. 이 속성은 글로벌 스타일 시트에서 설정할 수 있습니다.

    그런 다음 셀 속성 ​을 사용하여 셀이 데이터인지 또는 머리글 셀인지 여부를 선택할 수 있습니다.

  • 강조: 강조를 나타내려면 <strong> 또는 <em> 요소를 사용합니다. 머리글을 사용하여 단락 내 텍스트를 강조 표시하지 마십시오.

    • 강조할 텍스트를 강조 표시합니다.

    • 다음을 클릭합니다. B 아이콘(대상) <strong>) 또는 I 아이콘(대상) <em>에 표시) 속성 패널(HTML이 선택되어 있는지 확인).

      note note
      NOTE
      표준 AEM 설치의 RTE는 다음을 사용하도록 설정되어 있습니다.
      • <b> 대상 <strong>
      • <i> 대상 <em>
      이러한 요소는 효과가 동일하지만 <strong><em>이 의미상 올바른 html이므로 더 많이 사용합니다. 개발팀은 프로젝트 인스턴스를 개발할 때 <strong><em>(<b><i> 대신)을 사용하도록 RTE를 구성할 수 있습니다.
  • 복잡한 데이터 표: 때에 따라 두 개 이상의 헤더 수준이 있는 복잡한 표가 있을 때 기본 표 속성이 모든 필요한 구조적 정보를 제공하기에 충분하지 않을 수 있습니다. 이러한 종류의 복잡한 표의 경우, headerid 속성을 사용하여 헤더와 헤더 관련 셀 간에 직접적인 관계를 만들어야 합니다.

    note note
    NOTE
    기본적으로 제공되는 설치에서는 id 속성을 사용할 수 없습니다. RTE에서 HTML 규칙과 직렬 변환기를 구성하여 사용하도록 만들 수 있습니다.

    예를 들어 아래 표에서 headers와 id는 보조 기술 사용자를 위해 프로그램 방식으로 연계되도록 일치됩니다.

    code language-xml
      <table>
        <tr>
          <th rowspan="2" id="h">Homework</th>
          <th colspan="3" id="e">Exams</th>
          <th colspan="3" id="p">Projects</th>
        </tr>
        <tr>
          <th id="e1" headers="e">1</th>
          <th id="e2" headers="e">2</th>
          <th id="ef" headers="e">Final</th>
          <th id="p1" headers="p">1</th>
          <th id="p2" headers="p">2</th>
          <th id="pf" headers="p">Final</th>
        </tr>
        <tr>
          <td headers="h">15%</td>
          <td headers="e e1">15%</td>
          <td headers="e e2">15%</td>
          <td headers="e ef">20%</td>
          <td headers="p p1">10%</td>
          <td headers="p p2">10%</td>
          <td headers="p pf">15%</td>
        </tr>
      </table>
    

    AEM에서 이를 수행하려면 소스 편집 모드를 사용하여 마크업을 직접 추가해야 합니다.

    note note
    NOTE
    표준 설치에서는 이 기능을 즉시 사용할 수 없습니다. RTE, HTML 규칙 및 직렬 변환기를 구성해야 합니다.

추가 정보 - 정보 및 관계 (1.3.1) more-information-info-and-relationships

의미 있는 시퀀스 (1.3.2) meaningful-sequence

  • 성공 기준 1.3.2
  • 레벨 A
  • 의미 있는 시퀀스: 내용이 표시되는 시퀀스가 해당 의미에 영향을 줄 경우 올바른 읽기 시퀀스를 프로그래밍 방식으로 결정할 수 있습니다.

목적 - 의미 있는 시퀀스 (1.3.2) purpose-meaningful-sequence

이 성공 기준의 목적은 사용자 에이전트가 의미를 이해하는 데 필요한 읽기 순서를 유지하면서 대체 콘텐츠 프레젠테이션을 제공할 수 있도록 하는 것입니다. 의미가 있는 콘텐츠의 시퀀스를 프로그래밍 방식으로 결정할 수 있습니다. 이 성공 기준을 충족하지 않는 콘텐츠는 보조 기술이 콘텐츠를 잘못된 순서로 읽거나 대체 스타일 시트 또는 다른 서식 변경 사항을 적용할 때 사용자를 혼동시키거나 방향을 바꿀 수 있습니다.

충족하는 방법 - 의미 있는 시퀀스 (1.3.2) how-to-meet-meaningful-sequence

성공 기준 1.3.2를 충족하는 방법의 지침을 따르십시오.

추가 정보 - 의미 있는 시퀀스 (1.3.2) more-information-meaningful-sequence

감각 특성 (1.3.3) sensory-characteristics

  • 성공 기준 1.3.3
  • 레벨 A
  • 감각 특성: 콘텐츠를 이해하고 작동시키기 위해 제공된 지침은 모양, 크기, 시각적 위치, 방향 또는 소리와 같은 구성 요소의 감각 특성에만 전적으로 의지하지는 않습니다.

목적 - 감각 특성 (1.3.3) purpose-sensory-characteristics

디자이너는 정보를 표현할 때 색상, 모양, 텍스트 스타일 또는 콘텐츠의 절대적 또는 상대적 위치와 같은 시각적 디자인 기능에 초점을 맞추는 경우가 많습니다. 이러한 기능은 정보를 전달하는 데 강력한 디자인 기술로써 인지적 접근성 요구 사항이 있는 시력이 정상인 사용자의 전반적인 접근성을 향상시킬 수 있지만, 시각 장애가 있는 사람은 위치, 색상 또는 모양과 같은 속성을 시각적으로 식별해야 하는 정보에 액세스하지 못할 수 있습니다.

마찬가지로, 서로 다른 소리를 구별해야 하는 정보(예: 여성 또는 남성의 음성 콘텐츠)가 오디오 콘텐츠의 텍스트 대체 요소에 반영되지 않으면 청각 장애가 있는 사용자가 접근성 장벽을 경험하게 됩니다.

NOTE
색상에 대한 대체 요소와 관련된 요구 사항은 색상 사용을 참조하십시오.

충족하는 방법 - 감각 특성 (1.3.3) how-to-meet-sensory-characteristics

페이지 콘텐츠의 시각적 특성에 의존하는 모든 정보가 대체 형식으로도 제공되도록 하십시오.

  • 시각적 위치에 의존하여 정보를 제공하지 마십시오. 예를 들어 추가 정보에 액세스하기 위해 페이지의 오른쪽에 있는 메뉴를 사용자가 참조하도록 하려면 을 참조하지 마십시오 오른쪽에 있는 메뉴 ​대신 메뉴에 이름을 지정하고(예: 머리글을 통해) 텍스트에 있는 해당 이름을 참조합니다.
  • 정보를 전달하는 유일한 방법으로 볼드체 또는 이탤릭체 텍스트와 같은 텍스트 스타일에만 의존하지 마십시오.
NOTE
수사적 용어의 사용이 비시각적 컨텍스트에서 의미를 갖는다는 것을 알고 있다면 이러한 기술적 용어를 사용할 수 있습니다. 예를 들어 ​와 아래 ​는 각각 특정 콘텐츠 항목의 앞 콘텐츠와 뒤 콘텐츠를 의미하므로 일반적으로 사용할 수 있으며, 이는 콘텐츠를 큰 소리로 말할 때에도 여전히 적용됩니다.

추가 정보 - 감각 특성 (1.3.3) more-information-sensory-characteristics

구별 가능성 (1.4) distinguishable

지침 1.4 구별 가능성: 배경에서 전경을 구별하는 것을 포함하여 사용자가 콘텐츠를 더 쉽게 보고 들을 수 있도록 하십시오.

색상 사용 (1.4.1) use-of-color

  • 성공 기준 1.4.1
  • 레벨 A
  • 색상 사용: 색상은 정보를 전달하거나, 작업을 나타내거나, 응답을 요구하거나, 시각적 요소를 구별하기 위한 유일한 시각적 수단으로 사용되지는 않습니다.
NOTE
이 성공 기준에서는 색상 지각에 대해 자세히 설명합니다. 색상 및 다른 시각 표현 코딩에 대한 프로그래밍 방식 액세스를 포함하여 지각의 다른 형식은 적응성 (1.3)에서 다룹니다.

목적 - 색상 사용 (1.4.1) purpose-use-of-color

색상은 웹 페이지의 미적 호소력을 향상하는 효과적인 방법이며 정보를 전달하는 데에도 유용합니다. 하지만 실명에서 색약에 이르기까지 시각 장애의 종류는 다양하며, 이는 일부 사용자는 특정 색상을 구별하지 못함을 의미합니다. 따라서 색상 코딩은 믿을 수 있는 정보 제공 방법이 아닙니다.

예를 들어 적녹 색맹인 사람은 녹색 색조와 빨간색 색조를 구별하지 못합니다. 이들은 두 색상을 모두 제3의 색상(예: 갈색)으로 인식하므로 빨간색, 녹색 및 갈색을 구분할 수 없을 것입니다.

또한 텍스트 전용 브라우저 또는 단색 표시 디바이스를 사용하거나 페이지의 흑백 인쇄물을 보는 사용자는 색상을 인식할 수 없습니다.

추가 고려 사항은 다음과 같습니다. 선택됨 인터페이스 요소(예: 탭, 토글 단추 등)의 상태입니다. 이 상태는 단순히 색상을 포함하거나 시각적 프레젠테이션을 넘어 다른 방식으로 전달되어야 합니다. 이러한 요소의 경우, 특정 상식에 의존하지 않는 완전히 포괄적인 사용자 경험을 만들 때 패턴, 모양 및 프로그래밍 방식 정보를 추가로 사용하는 것이 유용합니다.

충족하는 방법 - 색상 사용 (1.4.1) how-to-meet-use-of-color

색상을 사용하여 정보를 전달할 때마다, 색상을 보지 않고도 정보를 사용할 수 있도록 하십시오.

예를 들어 색상으로 제공된 정보가 텍스트에서도 명시적으로 제공되도록 하십시오.

색상이 정보를 제공하는 단서로 사용되는 경우 스타일(예: 볼드체, 이탤릭체)이나 글꼴을 변경하는 등 추가적인 시각적 단서를 제공해야 합니다. 이렇게 하면 시력이 약하거나 색약인 사람이 정보를 식별하는 데 도움이 됩니다. 하지만, 이 방법은 페이지를 전혀 볼 수 없는 사람에게는 도움을 줄 수 없으므로 여기에 전적으로 의존할 수는 없습니다. 따라서 숨겨진 텍스트를 제공하거나 웹 표준의 ARIA(Accessible Rich Internet Applications) 세트와 같은 프로그래밍 방식 솔루션을 사용하여 시력이 좋지 않은 사용자에게 이러한 정보를 전달하는 것이 유용합니다.

추가 정보 - 색상 사용 (1.4.1) more-information-use-of-color

오디오 제어 (1.4.2) audio-control

  • 성공 기준 1.4.2
  • 레벨 A
  • 오디오 제어: 웹 페이지의 오디오가 3초 이상 자동으로 재생되는 경우, 오디오를 일시 중단하거나 중지하기 위한 메커니즘을 사용하거나 전체 시스템 볼륨 레벨과 독립적으로 오디오 볼륨을 제어하는 메커니즘을 사용할 수 있습니다.

목적 - 오디오 제어 (1.4.2) purpose-audio-control

화면 읽기 소프트웨어를 사용하는 사용자는 다른 오디오가 동시에 재생되는 경우 음성 출력을 듣기 어려울 수 있습니다. 화면 판독기의 음성 출력이 현재 대부분의 소프트웨어와 마찬가지로 소프트웨어 기반이고 사운드와 동일한 볼륨 제어를 통해 제어되는 상황에서 이러한 문제는 더욱 심각해집니다. 게다가, 인지 장애를 가진 몇몇 사용자와 신경 발달 장애가 있는 사용자는 소리에 민감할 수 있습니다. 이러한 개인 사용자는 오디오 콘텐츠의 볼륨 레벨을 변경할 때 어려움을 겪을 수 있습니다.

따라서 사용자가 배경 사운드를 끌 수 있어야 합니다.

NOTE
볼륨을 제어하면 볼륨을 0으로 줄일 수도 있습니다.

충족하는 방법 - 오디오 제어 (1.4.2) how-to-meet-audio-control

성공 기준 1.4.2를 충족하는 방법의 지침을 따르십시오.

추가 정보 - 오디오 제어 (1.4.2) more-information-audio-control

대비 (최소) (1.4.3) contrast-minimum

  • 성공 기준 1.4.3

  • 레벨 AA

  • 대비(최소): 텍스트 및 텍스트 이미지의 시각적 표현에는 다음을 제외하고 최소 4.5:1의 대비율이 있습니다.

    • 큰 텍스트: 대규모 텍스트와 대규모 텍스트 이미지에는 최소 3:1의 대비율이 있습니다.
    • 부수적: 비활성 사용자 인터페이스 구성 요소에 속하거나, 순수 장식이거나, 아무도 볼 수 없거나, 상당한 다른 시각적 콘텐츠를 포함하는 사진에 속하는 텍스트나 텍스트 이미지에는 대비 요구 사항이 없습니다.
    • 로고: 로고나 브랜드 이름에 속하는 텍스트에는 최소 대비 요구 사항이 없습니다.
    note note
    NOTE
    자세한 내용은 텍스트가 아닌 대비 이해를 참조하십시오. 콘텐츠 작성자가 텍스트가 아닌 요소(아이콘, 인터페이스 요소 등)에 대한 추가 요구 사항을 이해할 수 있도록 합니다.

목적 - 대비 (최소) (1.4.3) purpose-contrast-minimum

특정 시각 장애가 있는 사람은 특정의 낮은 대비 색상 쌍 간을 구별하지 못할 수 있습니다. 다음 중 하나의 경우 이러한 사람에 대해 접근성 문제가 발생할 수 있습니다.

  • 텍스트와 배경색의 대비가 제대로 이루어지지 않는 경우
  • 텍스트의 색상 코딩(링크 텍스트와 비링크 텍스트 등)은 정보를 구별하는 데 중요합니다.
NOTE
순전히 장식 목적으로 사용된 텍스트는 이 성공 기준에서 제외되었습니다.

충족하는 방법 - 대비 (최소) (1.4.3) how-to-meet-contrast-minimum

텍스트가 배경과 충분히 대비되는지 확인하십시오. 대비율은 해당 텍스트의 크기와 스타일에 따라 달라집니다.

  • 크기가 18포인트(또는 14포인트 굵은 글꼴) 미만인 포인트의 경우, 텍스트/텍스트 이미지와 배경 간의 대비율은 최소 4.5:1이어야 합니다.
  • 크기가 18포인트(또는 14포인트 굵은 글꼴) 이상인 텍스트의 경우 대비율은 최소 3:1이어야 합니다.
  • 배경에 패턴이 있다면 모든 텍스트 주변의 배경은 4.5:1이나 3:1 비율이 유지되도록 음영을 처리해야 합니다.
NOTE
글꼴은 동일한 PT/PX/EM 크기를 렌더링하는 방식이 다를 수 있습니다.
적절한 글꼴을 선택하고 웹 콘텐츠에 맞게 크기를 조정할 때 가독성과 유용성의 측면에서 판단력과 오류를 적절히 활용하십시오.
NOTE
다음 문구에 대해 웹 검색을 수행하여 다른 단위로 변환하는 데 도움이 되는 도구를 찾으십시오.
  • Px에서 Em으로 계산기
  • 글꼴 크기 변환: pixel-point-em-rem-percent
  • 픽셀에서 EM으로 변환기

대비율을 확인하려면 Paciello Group Color Contrast AnalyzerWebAIM 색상 대비 검사기와 같은 색상 대비 도구를 사용하십시오. 이러한 도구를 사용하면 색상 쌍을 검사하고 대비 문제에 대해 보고할 수 있습니다.

또는 페이지의 모양을 지정하는 것에 대해 관심이 별로 없다면 배경과 전경 텍스트 색상을 지정하지 않도록 선택할 수 있습니다. 사용자의 브라우저가 텍스트와 배경의 색상을 결정하면 대비 검사가 필요하지 않습니다.

권장 대비 수준을 충족시킬 수 없는 경우 해당 페이지에 상응하는 대체 버전(색상 대비 문제가 없는 페이지)에 대한 링크를 제공하거나, 사용자가 자신의 요구 사항에 맞춰 페이지 색상 구성표의 대비를 조정할 수 있도록 해야 합니다.

추가 정보 - 대비 (최소) (1.4.3) more-information-contrast-minimum

텍스트 크기 조정(1.4.4) resize-text

  • 성공 기준 1.4.4
  • 레벨 A
  • 텍스트 크기 조정: 텍스트 캡션 및 이미지를 제외하고 콘텐츠나 기능을 손실하지 않고도 최대 200%의 보조 기술 없이도 텍스트 크기를 조정할 수 있습니다.

목적 - 텍스트 크기 조정(1.4.4) purpose-resize-text

이 성공 기준의 목적은 텍스트 기반 컨트롤([ASCII 같은 데이터 형식의 텍스트 문자를 볼 수 있도록 표시])을 비롯하여 시각적으로 렌더링된 텍스트의 크기를 정상적으로 조절하여 화면 돋보기와 같은 보조 기술을 사용하지 않고도 시각 장애가 있는 사람이 직접 읽을 수 있도록 하는 것입니다. 사용자는 웹 페이지의 모든 콘텐츠 크기 조정을 통해 많은 이점을 얻을 수 있지만 텍스트는 가장 중요합니다.

충족하는 방법 - 텍스트 크기 조정(1.4.4) how-to-meet-resize-text

성공 기준을 충족하는 방법 1.4.4 아래의 지침을 따라 콘텐츠 작성자는 페이지 디자인과 글꼴 크기(예: 반응형 웹 디자인)에서 유동성 있고 유연한 폭과 높이를 사용하여 독자가 텍스트 크기를 조정하도록 할 수 있습니다.

추가 정보 - 텍스트 크기 조정(1.4.4) more-information-resize-text

텍스트 이미지 (1.4.5) images-of-text

  • 성공 기준 1.4.5

  • 레벨 AA

  • 텍스트 이미지: 사용되는 기술에서 시각적 프레젠테이션을 구현할 수 있는 경우 다음의 경우를 제외하고 정보를 전달하는 데 텍스트 이미지보다는 텍스트가 사용됩니다.

    • 사용자 정의 가능: 텍스트 이미지를 사용자의 요구 사항에 맞게 시각적으로 사용자 정의할 수 있습니다.
    • 필수: 전달되고 있는 정보에 텍스트의 특별한 프레젠테이션이 필요합니다.
NOTE
로고(로고나 브랜드 이름에 속하는 텍스트)는 필수로 간주됩니다.

목적 - 텍스트 이미지 (1.4.5) purpose-images-of-text

텍스트 이미지는 특별한 스타일의 텍스트를 선호하는 경우 많이 사용됩니다. 예를 들어 로고나 다른 소스(예: 종이 문서의 스캔)에서 생성된 텍스트가 여기에 해당합니다. 하지만 HTML로 표시되거나 CSS를 사용하여 스타일링된 텍스트와 비교하면 텍스트 이미지는 시각 장애나 읽기에 어려움이 있는 사람에게 필요할 수 있는 크기나 모양 변경 면에서 유연성이 부족합니다.

충족하는 방법 - 텍스트 이미지 (1.4.5) how-to-meet-images-of-text

텍스트 이미지를 사용해야 하는 경우 텍스트를 사용자 정의가 가능한 방식으로 사용할 수 있도록 CSS를 사용하여 텍스트 이미지를 HTML에서 상응하는 텍스트로 바꾸십시오. 이러한 방법에 대한 예를 보려면 C30: CSS를 사용하여 텍스트를 텍스트 이미지로 바꾸기 및 전환할 사용자 인터페이스 컨트롤 제공을 참조하십시오.

추가 정보 - 텍스트 이미지 (1.4.5) more-information-images-of-text

원칙 2: 작동 가능 principle-operable

원칙 2: 작동 가능 - 사용자 인터페이스 구성 요소와 탐색 기능은 작동 가능해야 합니다.

키보드 액세스 가능 (2.1) keyboard-accessible

지침 2.1 키보드 액세스 가능: 키보드에서 모든 기능을 사용할 수 있도록 합니다.

이는 사용자가 키보드를 사용하여 모든 기능에 액세스할 수 있도록 하는 것입니다.

키보드(2.1.1) keyboard

  • 성공 기준 2.1.1
  • 레벨 A
  • 키보드: 기본 함수에는 엔드포인트뿐만 아니라 사용자의 이동 경로를 사용하는 입력이 필요한 경우를 제외하고, 개별 키 입력에 대한 특정 시간 설정이 필요 없이 키보드 인터페이스를 통해 콘텐츠의 모든 기능을 사용할 수 있습니다.

목적 - 키보드(2.1.1) purpose-keyboard

이 성공 기준의 목적은 가능한 경우 키보드나 키보드 인터페이스를 통해 콘텐츠를 작동할 수 있도록 하기 위한 것입니다(대체 키보드를 사용할 수 있음). 키보드 또는 대체 키보드를 통해 콘텐츠를 작동할 수 있는 경우 앞을 볼 수 없는 사용자(시력 조정이 필요한 마우스와 같은 디바이스를 사용할 수 없는 사용자)뿐만 아니라 키보드 에뮬레이터로 작동하는 대체 키보드나 입력 장치를 사용해야 하는 사용자도 이 콘텐츠를 사용할 수 있습니다. 키보드 에뮬레이터에는 음성 입력 소프트웨어, sip-and-puff 소프트웨어, 화면 키보드, 스캔 소프트웨어, 다양한 보조 기술 및 대체 키보드가 포함되어 있습니다. 또한 시력이 낮은 사용자는 포인터를 추적하기가 어렵고 키보드에서 제어할 수 있는 경우에만 소프트웨어 사용이 훨씬 간편할 수 있습니다.

충족하는 방법 - 키보드(2.1.1) how-to-meet-keyboard

성공 기준 2.1.1을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 키보드(2.1.1) more-information-keyboard

키보드 트랩 없음(2.1.2) no-keyboard-trap

  • 성공 기준 2.1.2
  • 레벨 A
  • 키보드 트랩 없음: 키보드 인터페이스를 사용하여 페이지의 구성 요소로 키보드 포커스를 이동할 수 있는 경우 키보드 인터페이스만 사용하여 해당 구성 요소에서 포커스를 이동할 수 있으며, 수정되지 않은 화살표 또는 탭 키 또는 기타 표준 종료 방법이 더 필요한 경우 포커스를 이동하는 방법을 권장합니다.

목적 - 키보드 트랩 없음(2.1.2) purpose-no-keyboard-trap

이 성공 기준의 목적은 콘텐츠가 웹 페이지의 콘텐츠의 하위 섹션 내에 키보드 포커스를 트래핑 ​하지 않도록 하기 위한 것입니다. 여러 포맷이 한 페이지 내에서 결합되어 플러그인 또는 임베디드 애플리케이션을 사용하여 렌더링되는 경우 발생하는 일반적인 문제입니다.

웹 페이지의 기능이 포커스를 콘텐츠의 하위 섹션(예: 모달 대화 상자)으로 제한하는 경우가 있을 수 있습니다. 이 경우 사용자가 해당 하위 섹션의 콘텐츠를 종료할 수 있는 방법을 제공해야 합니다(예: ESC 키는 모달 대화 상자를 닫거나 닫기 버튼을 누르면 모달 대화 상자가 닫힘).

충족하는 방법 - 키보드 트랩 없음(2.1.2) how-to-meet-no-keyboard-trap

성공 기준 2.1.2를 충족하는 방법의 지침을 따르십시오.

추가 정보 - 키보드 트랩 없음(2.1.2) more-information-no-keyboard-trap

충분한 시간(2.2) enough-time

지침 2.2 충분한 시간: 사용자에게 콘텐츠를 읽고 사용할 충분한 시간을 제공합니다.

이는 사용자가 읽고 행동할 시간이 충분하도록 보장하는 것입니다.

시간 조정 가능 (2.2.1) timing-adjustable

  • 성공 기준 2.2.1
  • 레벨 A
  • 키보드: 사용자에게 콘텐츠를 읽고 사용할 충분한 시간을 제공합니다.

목적 - 시간 조정 가능 (2.2.1) purpose-timing-adjustable

이 성공 기준의 목적은 장애가 있는 사용자가 가능한 한 웹 콘텐츠와 상호 작용할 수 있는 적절한 시간을 갖도록 하기 위함입니다. 시각 장애, 저시력, 지체 장애, 인지 장애 등과 같은 장애가 있는 사람은 내용을 읽거나 온라인 양식을 작성하는 등의 기능을 수행하는 데 더 많은 시간이 필요할 수 있습니다. 웹 기능이 시간에 따라 달라지는 경우 시간 제한이 발생하기 전에 일부 사용자가 필요한 작업을 수행하기가 어렵습니다. 이로 인해 서비스에 액세스할 수 없게 될 수 있습니다. 시간에 의존적이지 않은 기능을 디자인하면 장애가 있는 사람들이 이러한 기능을 정상적으로 수행하는 데 도움이 됩니다. 시간 제한을 비활성화하거나, 시간 제한 길이를 사용자 정의하거나, 시간 제한이 발생하기 전에 더 많은 시간을 요청할 수 있는 옵션을 제공하면 예상보다 많은 시간이 필요한 사용자가 작업을 정상적으로 완료하는 데 도움이 됩니다. 이러한 옵션은 사용자에게 가장 유용한 순서대로 나열됩니다. 시간 제한을 비활성화하는 것은 시간 제한 길이를 사용자 정의하는 것보다 낫습니다. 이는 시간 제한이 발생하기 전에 시간을 더 요청하는 것보다 낫습니다.

충족하는 방법 - 시간 조정 가능 (2.2.1) how-to-meet-timing-adjustable

성공 기준 2.2.1을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 시간 조정 가능 (2.2.1) more-information-timing-adjustable

일시 중단, 중지, 숨기기 (2.2.2) pause-stop-hide

  • 성공 기준 2.2.2

  • 레벨 A

  • 일시 중단, 중지, 숨기기: 이동, 깜박임, 스크롤 또는 자동 업데이트 정보에 대해서는 다음 내용이 적용됩니다.

    • 이동, 깜박임, 스크롤: (a) 자동으로 시작되고, (b) 5초 이상 지속되고, © 다른 콘텐츠와 병렬로 표시되는 이동, 깜박임 또는 스크롤 정보의 경우, 이동, 깜박임 또는 스크롤이 중요한 활동의 일부가 아니면 사용자가 일시 중지하거나, 중단하거나, 숨길 수 있는 메커니즘이 있습니다.
    • 자동 업데이트: (a) 자동으로 시작되고, (b) 다른 콘텐츠와 병렬로 표시되는 자동 업데이트 정보의 경우, 자동 업데이트가 중요한 활동의 일부가 아니면 사용자가 일시 중지하거나, 중단하거나, 숨길 수 있는 메커니즘이 있습니다.

주목할 점은 다음과 같습니다.

  1. 깜박이거나 발광하는 콘텐츠와 관련한 요구 사항에 대해서는 “발작을 초래하는 것으로 알려진 방법으로 콘텐츠를 디자인하지 말 것(2.3)”을 참조하십시오.
  2. 이 성공 기준을 충족하지 않는 콘텐츠는 전체 페이지를 사용하는 사용자의 능력을 방해할 수 있으므로 웹 페이지의 모든 콘텐츠(다른 성공 기준을 충족하는 데 사용되는지 여부에 상관없이)는 이 성공 기준을 충족해야 합니다. 적합성 요구 사항 5: 비간섭을 참조하십시오.
  3. 주기적으로 소프트웨어에 의해 업데이트되거나, 사용자 에이전트에게 스트리밍되는 콘텐츠는 일시 중단의 시작과 프레젠테이션 재개 간에 생성되었거나 받은 정보를 보존하거나 제공할 필요가 없습니다. 왜냐하면 기술적으로 가능하지 않을 수도 있고 많은 경우 그래야 한다고 오해할 수도 있습니다.
  4. 미리 로드된 단계나 유사한 상황의 일부로서 발생하는 애니메이션은 모든 사용자에 대해 해당 단계 중에 상호 작용이 발생할 수 없는 경우와 진행 상태를 나타내지 않음으로써 사용자를 혼동시키거나 콘텐츠가 동결되었거나 손상되었다고 생각하게 하는 경우 극히 중요하다고 간주할 수 있습니다.

목적 - 일시 중단, 중지, 숨기기 (2.2.2) purpose-pause-stop-hide

특정 사용자에게는 움직이는 콘텐츠가 주의를 분산시키거나 물리적으로 고통스러워 페이지의 다른 부분에 집중하기 어렵게 할 수 있습니다. 움직이는 텍스트를 따라잡는 데 힘든 사람들에게는 읽기 어려울 수도 있습니다.

충족하는 방법 - 일시 중단, 중지, 숨기기 (2.2.2) how-to-meet-pause-stop-hide

콘텐츠의 특성에 따라 이동하거나, 발광하거나, 깜박이는 콘텐츠가 포함된 웹 페이지를 만들 때 다음의 제안 사항 중 하나 이상을 적용할 수 있습니다.

  • 사용자에게 읽을 시간을 충분히 제공하기 위해 콘텐츠 스크롤을 일시 중단하는 수단을 제공하십시오. 예를 들어 새로운 티커, 자동 업데이트된 텍스트 및 자동으로 제공되는 이미지 회전 슬라이드가 있습니다.
  • 깜박이는 콘텐츠가 5초 후 깜박임을 중지하는지 확인하십시오.
  • 적절한 기술을 사용하여 브라우저로 비활성화할 수 있는 움직이거나 깜박이는 콘텐츠를 표시하십시오. 예를 들어 GIF(Graphics Interchange Format) 또는 APNG(Animated Portable Network Graphics) 파일이 여기에 해당합니다.
  • 웹 페이지에서 양식 컨트롤을 제공하여 페이지에서 움직이거나 깜박이는 모든 콘텐츠를 사용자가 비활성화할 수 있도록 하십시오.
  • 위의 방법 모두가 불가능할 경우 움직이거나 깜박이는 기능을 제외한 모든 콘텐츠가 들어 있는 페이지에 대한 링크를 제공하십시오.

추가 정보 - 일시 중단, 중지, 숨기기 (2.2.2) more-information-pause-stop-hide

발작 및 물리적 반응(2.3) seizures-and-physcial-reactions

지침 2.3 발작: 발작 또는 물리적 반응을 초래하는 것으로 알려진 방법으로 콘텐츠를 디자인하지 않기

세 번 발광 또는 임계값 미만 (2.3.1) three-flashes-or-below-threshold

  • 성공 기준 2.3.1
  • 레벨 A
  • 세 번 발광 또는 임계값 미만: 웹 페이지는 1초 범위 내에 세 번 넘게 발광하는 콘텐츠를 포함하지 않아야 합니다. 또는 발광이 일반적인 발광 및 빨간색 발광 임계값 미만이어야 합니다.
NOTE
이 성공 기준을 충족하지 않는 콘텐츠는 전체 페이지를 사용하는 사용자의 능력을 방해할 수 있으므로 웹 페이지의 모든 콘텐츠(다른 성공 기준을 충족하는 데 사용되는지 여부에 상관없이)는 이 성공 기준을 충족해야 합니다. 적합성 요구 사항 5: 비간섭을 참조하십시오.

목적 - 세 번 발광 또는 임계값 미만 (2.3.1) purpose-three-flashes-or-below-threshold

때에 따라 발광하는 콘텐츠가 감광성 발작을 초래할 수 있습니다. 이 성공 기준은 이와 같은 사용자가 발광하는 콘텐츠에 대한 걱정 없이 모든 콘텐츠에 액세스하여 경험할 수 있도록 해 줍니다.

충족하는 방법 - 세 번 발광 또는 임계값 미만 (2.3.1) how-to-meet-three-flashes-or-below-threshold

다음 기술이 적용되었는지 확인하는 단계가 필요합니다.

  • 구성 요소가 1초 동안 세 번 넘게 발광하지 않도록 하십시오.
  • 위의 조건을 충족할 수 없으면 발광하는 콘텐츠를 화면에서 픽셀 단위의 작은 안전 영역 내에 표시하십시오. 이 영역은 G176: 발광하는 영역을 충분히 작게 유지하기에 설명된 복잡한 공식을 사용하여 계산되며, 따라서 이 기술은 발광 콘텐츠가 필요한 경우에만 수행해야 합니다.

추가 정보 - 세 번 발광 또는 임계값 미만 (2.3.1) more-information-three-flashes-or-below-threshold

탐색 가능 (2.4) navigable

지침 2.4 탐색 가능: 사용자가 콘텐츠를 탐색하고 찾고 위치를 확인할 수 있는 방법을 제공합니다.

이는 사용자가 콘텐츠를 쉽고 간단하게 탐색하도록 하기 위함입니다.

블록 우회 (2.4.1) bypass-blocks

  • 성공 기준 2.4.1
  • 레벨 A
  • 블록 우회: 여러 웹 페이지에서 반복되는 콘텐츠 블록을 우회하는 메커니즘을 사용할 수 있습니다.

목적 - 블록 우회 (2.4.1) purpose-bypass-blocks

이 성공 기준의 목적은 콘텐츠를 통해 순차적으로 탐색하는 사람이 웹 페이지의 기본 콘텐츠에 보다 직접 액세스할 수 있도록 하는 것입니다. 웹 페이지 및 애플리케이션은 종종 다른 페이지 또는 화면에 표시되는 콘텐츠가 있습니다. 반복되는 콘텐츠 블록의 예로는 탐색 링크, 헤더 그래픽 및 광고 프레임이 있습니다. 개별 단어, 구문 또는 단일 링크와 같이 반복되는 작은 섹션은 이 조항의 목적에 따라 블록으로 간주되지 않습니다.

충족하는 방법 - 블록 우회 (2.4.1) how-to-meet-bypass-blocks

성공 기준 2.4.1을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 블록 우회 (2.4.1) more-information-bypass-blocks

제목이 있는 페이지 (2.4.2) page-titled

  • 성공 기준 2.4.2
  • 레벨 A
  • 제목이 있는 페이지: 웹 페이지에는 주제나 목적을 설명하는 제목이 있습니다.

목적 - 제목이 있는 페이지 (2.4.2) purpose-page-titled

이 성공 기준은 특정 장애에 상관없이, 페이지를 완전히 읽지 않아도 모든 사람이 웹 페이지의 콘텐츠를 빨리 파악하는 데 도움이 됩니다. 페이지 제목은 탭에 표시되어 빨리 찾을 수 있으므로 여러 개의 웹 페이지가 브라우저 탭으로 열려 있을 때 유용합니다.

충족하는 방법 - 제목이 있는 페이지 (2.4.2) how-to-meet-page-titled

새 HTML 페이지를 AEM에서 만들 때 페이지 제목을 지정할 수 있습니다. 콘텐츠가 방문자의 요구 사항과 관련이 있는지 여부를 방문자가 신속히 파악할 수 있도록 특히 고유한 측면에서 제목이 페이지의 콘텐츠와 목적을 적절히 설명하도록 해야 합니다.

또한 페이지를 편집할 때 페이지 정보 - 속성 ​으로 이동하여 페이지 제목을 편집할 수도 있습니다.

추가 정보 - 제목이 있는 페이지 (2.4.2) more-information-page-titled

포커스 순서 (2.4.3) focus-order

  • 성공 기준 2.4.3
  • 레벨 A
  • 포커스 순서: 웹 페이지를 순차적으로 탐색할 수 있고 탐색 시퀀스가 의미나 작업에 영향을 주는 경우, 포커스가 있는 구성 요소는 의미와 작동을 유지하는 순서로 초점을 받습니다.

목적 - 포커스 순서 (2.4.3) purpose-focus-order

이 성공 기준의 목적은 사용자가 콘텐츠를 순차적으로 탐색할 때 콘텐츠의 의미와 일치하는 순서로 정보가 나타나게 하고 키보드에서 작업할 수 있도록 하는 것입니다. 이렇게 하면 사용자가 콘텐츠의 일관된 정신 모델을 구축할 수 있으므로 혼동을 줄일 수 있습니다. 콘텐츠에 논리적 관계를 반영하는 다양한 순서가 있을 수 있습니다. 예를 들어 여러 필드 및/또는 단계로 구성된 온라인 형식의 구성 요소에서 이동하는 것은 콘텐츠의 논리적 관계를 반영합니다.

충족하는 방법 - 포커스 순서 (2.4.3) how-to-meet-focus-order

성공 기준 2.4.3을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 포커스 순서 (2.4.3) more-information-focus-order

  • 성공 기준 2.4.4
  • 레벨 A
  • 링크 목적(컨텍스트 내): 링크의 목적이 일반적으로 사용자에게 모호한 경우를 제외하고, 각 링크의 목적은 링크 텍스트 자체에서 또는 프로그래밍 방식으로 결정된 링크 컨텍스트와 함께 링크 텍스트에서 결정할 수 있습니다.

장애에 상관없이 모든 사용자에 대해, 적절한 링크 텍스트를 통해 링크의 방향을 명확히 나타내는 것이 매우 중요합니다. 이는 사용자가 실제로 링크를 따라갈 것인지 여부를 결정하는 데 도움이 됩니다. 의미 있는 링크 텍스트는 대상 페이지의 기능을 더 명확하게 표시하므로, 시력이 정상인 사용자에게는 한 페이지에 여러 개의 링크가 있는 경우 의미 있는 링크 텍스트가 유용합니다(특히 페이지에 텍스트가 많을 경우). 단일 페이지에 있는 모든 링크의 목록을 생성할 수 있는 일부 보조 기술 사용자는 컨텍스트에서 벗어난 링크 텍스트가 고유하고 유용한 정보일 경우 해당 링크 텍스트를 더 쉽게 이해할 수 있습니다. 하지만, 인지 장애가 있는 시력이 정상인 개인 사용자는 링크가 어디로 이동할지 정확히 설명할 만큼 충분한 정보를 제공하지 않는다면 혼란스러울 수 있습니다.

특히 링크의 목적이 링크의 텍스트 내에 명확하게 설명되도록 하십시오.

  • 나쁜 예:

    • 텍스트: 2010년 가을 학기 저녁 강의에 대한 자세한 내용은 여기를 클릭하십시오.
    • 이유: 대상을 명료하고 분명하게 나타내지 않습니다.
  • 좋은 예:

    • 텍스트: 2010년 가을 학기 저녁 강의 – 세부 정보.
    • 이유: 링크 요소의 텍스트와 위치를 약간 조정하여 링크 텍스트를 개선할 수 있습니다.

페이지 간에 링크를 일관되게 표현해야 합니다(특히 탐색 막대의 경우). 예를 들어 특정 페이지에 대한 링크의 이름이 인 경우 발행물 한 페이지에서 다른 페이지의 해당 텍스트를 사용하여 일관성을 보장하십시오.

작성 시에는 페이지에 표시된 유사한 링크가 대상에 대한 고유한 정보를 제공하도록 제목 속성을 사용하는 것과 관련된 몇 가지 문제가 있습니다(예: “자세히 읽기”가 종종 다른 대상 범위를 가리킴).

  • 제목 속성 내에 포함된 텍스트는 마우스 사용자만 도구 설명 팝업으로 사용할 수 있으며 키보드 사용자 또는 모바일 사용자는 일관되게 액세스할 수 없습니다.
  • 스크린 리더는 제목 속성을 소리내어 읽을 수 있지만 이 기능은 기본적으로 활성화되어 있지 않을 수 있으므로 사용자가 제목 속성이 존재하는지 알지 못할 수 있습니다.
  • 제목 텍스트의 모양을 변경하기가 어렵습니다. 이는 어떤 사람들은 읽기 어렵거나 읽을 수 없을 수 있음을 의미합니다.

따라서 title 속성을 사용하여 링크에 추가 컨텍스트를 제공할 때에는 그 한계를 알고 적절한 링크 텍스트에 대한 대체 요소로 사용하지 마십시오.

링크가 이미지로 이루어져 있을 경우 이미지에 대한 대체 텍스트가 링크 대상에 대해 설명하도록 하십시오. 예를 들어 책장 이미지가 어떤 사람의 발행물에 대한 링크로 설정된 경우 대체 텍스트는 다음과 같아야 합니다 존 스미스의 출판물 및 아님 책장.

또는 링크 앵커에 이미지 요소 이외에 링크의 목적을 설명하는 텍스트가 들어 있으면(그래서 해당 텍스트가 이미지와 함께 표시된다면), 이미지에 빈 alt 속성을 사용하십시오.

<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith's publications
</a>
NOTE
위의 스니펫은 일러스트레이션이며, 이미지 구성 요소를 사용하는 것이 좋습니다.

추가 컨텍스트를 필요로 하지 않고 링크의 목적을 알려 주는 링크 텍스트를 제공하는 것이 좋지만, 이것이 항상 가능하지는 않습니다. 컨텍스트가 없는 링크는 다음 경우에 사용할 수 있습니다. 해당하는 HTML 예는 성공 기준 충족 방법 2.4.4에서 찾을 수 있습니다.

  • 링크 텍스트가 밀접히 관련된 링크의 일부이고 이 링크를 둘러싼 목록 항목에서 컨텍스트를 충분히 제공하는 경우
  • 링크의 목적을  이전(이후가 아닌) 단락 텍스트에서 명확히 식별할 수 있는 경우
  • 링크가 데이터 표 내에 들어 있어서 연결된 머리글에서 해당 목적을 명확히 식별할 수 있는 경우
  • 링크 목록이 일련의 머리글 내에 있고 머리글 자체에서 적절한 컨텍스트를 제공하는 경우
  • 링크 목록이 중첩된 링크 내에 있고 중첩된 목록의 위에 있는 상위 목록 항목이 적절한 컨텍스트를 제공하는 경우

경우에 따라 한 페이지에 링크가 여러 개 있고 각 링크는 복잡하지만 필요한 세부 정보로 링크의 방향을 제공하는 경우, 정확히 동일한 콘텐츠를 표시하지만 링크 텍스트가 세부적이지 않은 웹 페이지의 대체 버전을 제공하는 것이 적절한 방법일 수 있습니다.

또는 스크립트를 사용하여 링크 자체 내에 최소의 텍스트를 표시하도록 할 수 있지만, 페이지 상단 방향으로 배치된 적절한 컨트롤을 활성화하면 링크 텍스트가 확장됨 자세히 살펴보십시오. CSS를 사용하여 다음과 같은 작업을 수행하는 것이 좋습니다. 숨기기 시력이 정상인 사용자의 전체 링크이지만 화면 판독기 사용자에게 완전히 출력됩니다. 이 작업은 이 문서의 범위를 벗어나지만 이 작업을 수행하는 방법에 대한 자세한 내용은 추가 정보 - 링크 목적(컨텍스트 내)(2.4.4) 섹션.

다양한 방법 (2.4.5) multiple-ways

  • 성공 기준 2.4.5
  • 레벨 AA
  • 다양한 방법: 웹 페이지가 프로세스의 결과이거나 단계인 경우를 제외하고 웹 페이지 세트 내에서 웹 페이지를 찾는 두 가지 이상의 방법이 있습니다.

목적 - 다양한 방법 (2.4.5) purpose-multiple-ways

이 성공 기준의 목적은 사용자가 자신의 요구 사항에 가장 적합한 방식으로 콘텐츠를 찾을 수 있도록 하는 것입니다. 사용자는 한 기술을 다른 기술보다 사용하기 더 쉽거나 더 쉽게 이해할 수 있습니다.

작은 사이트라도 사용자에게 몇 가지 방향 수단을 제공해야 합니다. 홈 페이지에서 모든 페이지가 연결되어 있는 3~4개 페이지 사이트의 경우 홈 페이지의 링크가 사이트맵으로 사용될 수 있는 홈 페이지로 간의 링크를 제공하면 충분할 수 있습니다.

충족하는 방법 - 다양한 방법 (2.4.5) how-to-meet-multiple-ways

성공 기준 2.4.5를 충족하는 방법의 지침을 따르십시오.

추가 정보 - 다양한 방법 (2.4.5) more-information-multiple-ways

제목 및 레이블 (2.4.6) headings-and-labels

  • 성공 기준 2.4.6
  • 레벨 AA
  • 제목 및 레이블: 제목 및 레이블은 주제 또는 목적을 설명합니다.

목적 - 제목 및 레이블 (2.4.6) purpose-headings-and-labels

이 성공 기준의 목적은 사용자가 웹 페이지에 포함된 정보와 정보가 구성되는 방식을 이해하도록 돕는 것입니다. 제목이 명확하고 설명적인 경우 사용자가 원하는 정보를 보다 쉽게 찾을 수 있으며 콘텐츠의 여러 부분 간의 관계를 보다 쉽게 이해할 수 있습니다. 설명 레이블은 콘텐츠 내의 특정 구성 요소를 식별하는 데 도움이 됩니다.

충족하는 방법 - 제목 및 레이블 (2.4.6) how-to-meet-headings-and-labels

성공 기준 2.4.6을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 제목 및 레이블 (2.4.6) more-information-headings-and-labels

포커스 표시 (2.4.7) focus-visible

  • 성공 기준 2.4.7
  • 레벨 AA
  • 포커스 표시: 키보드 작동 가능한 사용자 인터페이스는 키보드 포커스 표시기가 표시되는 작동 모드가 있습니다.

목적 - 포커스 표시 (2.4.7) purpose-focus-visible

이 성공 기준의 목적은 어떤 요소에 키보드 포커스가 있는지를 사람이 알 수 있도록 돕는 것입니다.

여러 요소 중 키보드 포커스가 있는 요소를 파악할 수 있어야 합니다. 화면에 키보드 작업 가능 제어가 하나만 있으면 시각적 디자인에는 키보드 작업 가능 항목이 하나만 표시되므로 성공 기준이 충족됩니다.

성공 기준이 “작동 모드”로 표시되어 있는 경우, 이는 경우에 따라 포커스 표시기를 표시하지 않을 수 있는 플랫폼을 설명하는 것입니다. 대개 작업 모드는 하나만 있으므로 이 성공 기준이 적용됩니다.

충족하는 방법 - 포커스 표시 (2.4.7) how-to-meet-focus-visible

성공 기준 2.4.7을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 포커스 표시 (2.4.7) more-information-focus-visible

원칙 3: 이해 가능 principle-understandable

원칙 3: 이해 가능 - 사용자 인터페이스의 정보 및 작업은 이해가 가능해야 합니다.

텍스트 콘텐츠를 읽기 가능하고 이해 가능하도록 만들기 (3.1) make-text-content-readable-and-understandable

지침 3.1 읽기 가능: 텍스트 콘텐츠를 읽기 가능하고 이해 가능하도록 만들기

페이지 언어 (3.1.1) language-of-page

  • 성공 기준 3.1.1
  • 레벨 A
  • 페이지 언어: 각 웹 페이지의 기본 인간 언어는 프로그래밍 방식으로 결정될 수 있습니다.

목적 - 페이지 언어 (3.1.1) purpose-language-of-page

이 성공 기준의 목적은 텍스트 및 기타 언어적 콘텐츠를 올바로 렌더링하도록 하는 것입니다. 스크린 리더 사용자의 경우, 이렇게 하면 콘텐츠를 올바로 발음하면서도 시각적 브라우저에는 특정 문자 집합이 올바로 표시될 가능성이 커집니다.

충족하는 방법 - 페이지 언어 (3.1.1) how-to-meet-language-of-page

이 성공 기준을 충족하기 위해 페이지의 상단에 있는 <html> 요소 내에서 lang 속성을 사용하여 웹 페이지의 기본 언어를 식별할 수 있습니다. 예:

  • 페이지가 영국 영어로 작성되면 <html> 요소는 다음과 같이 읽어야 합니다.
    <html lang = "en">

  • 반면에 스페인어로 렌더링할 페이지는 다음 표준을 채택해야 합니다.
    <html lang = "es">

AEM에서 페이지의 기본 언어는 페이지를 만들 때 설정되지만, 페이지 속성을 편집할 때 변경할 수도 있습니다.

NOTE
AEM에서는 루트 언어의 변형을 세밀하게 조정할 수 있습니다(예: 미국 영어 - en-us, 영국 영어 - en-gb 및 캐나다 영어 - en-ca). 이러한 세부 사항 수준은 보조 기술에 유용하지만 페이지 콘텐츠의 영역별 변형에 사용할 수 있습니다.

추가 정보 - 페이지 언어 (3.1.1) more-information-language-of-page

부분 언어 (3.1.2) language-of-parts

  • 성공 기준 3.1.2
  • 레벨 AA
  • 부분 언어: 콘텐츠에 있는 각 구절 또는 구의 인간 언어는 적절한 이름, 기술적 용어, 정확히 가늠할 수 없는 언어의 단어 및 바로 둘러싼 텍스트의 토착어 부분이 된 단어나 구를 제외하고, 프로그래밍 방식으로 결정될 수 있습니다.

목적 - 부분 언어 (3.1.2) purpose-language-of-parts

이 성공 기준의 목적은 한 페이지에 여러 언어로 된 콘텐츠가 들어 있는(예를 들어 인용구나 흔하지 않은 외래어로 인해) 웹 페이지에 적용된다는 점을 제외하면 페이지 언어성공 기준과 유사합니다.

이 성공 기준을 적용하는 페이지에서는 다음을 허용합니다.

  • 억양 있는 문자를 삽입하는 점자 전환 소프트웨어
  • 특수 문자가 있거나 페이지 수준에서 식별된 기본 언어가 아닌 단어를 발음하는 화면 판독기입니다.
  • 콘텐츠를 한 언어에서 다른 언어로 올바르게 번역할 수 있는 Google 번역과 같은 번역 도구

충족하는 방법 - 부분 언어 (3.1.2) how-to-meet-language-of-parts

lang 속성을 사용하여 콘텐츠 언어에 대한 변경 내용을 식별할 수 있습니다. 예를 들어 독일어(ISO 639-1 코드 “de”) 인용구를 다음과 같이 표시할 수 있습니다.

<blockquote cite = "John F. Kennedy" lang = "de">
     <p>Ich bin ein Berliner</p>
 </blockquote>
NOTE
기본 인스턴스에서는 긴 인용구(Blockquote)를 지원하지 않습니다. 사용자 정의 구성 요소를 개발하여 이 기능을 지원할 수는 있습니다.

마찬가지로 span 요소를 다음과 같이 사용하면 브라우저가 흔하지 않은 외래어나 구를 올바르게 렌더링할 수 있습니다.

<p>The only French phrase I know is <span lang = "fr">je ne sais quoi</code>.</p>
NOTE
이름이나 도시를 서로 다른 언어로 포함할 때 또는 기본 언어에서 흔하게 사용하게 된 외래나 구(예: 영어의 schadenfreude)를 사용할 때에는 이 성공 기준을 따를 필요가 없습니다.

적절한 언어를 사용하여 span 요소를 추가하려면 위와 같이 읽을 수 있도록 RTE의 소스 편집 모드에서 HTML 마크업을 수동으로 편집할 수 있습니다. 또는 시스템 관리자가 lang 속성을 RTE에 포함할 수 있습니다(추가 HTML 요소 및 속성에 대한 지원 추가 참조).

추가 정보 - 부분 언어 (3.1.2) more-information-language-of-parts

예측 가능 (3.2) predictable

지침 3.2 예측 가능: 웹 페이지를 예측 가능한 방식으로 표시 및 운영할 수 있습니다.

이는 웹 페이지가 표시되고 운영되는 방식을 일관되게 유지하는 것을 의미합니다.

포커스 맞춤 (3.2.1) on-focus

  • 성공 기준 3.2.1
  • 레벨 A
  • 포커스 맞춤: 사용자 인터페이스 구성 요소가 포커스를 받으면 컨텍스트 변경을 시작하지 않습니다.

목적 - 포커스 맞춤 (3.2.1) purpose-on-focus

이 성공 기준의 목적은 방문자가 문서를 탐색할 때 기능을 예측 가능하게 하는 것입니다. 포커스를 받을 때 이벤트를 트리거할 수 있는 모든 구성 요소는 컨텍스트를 변경하지 말아야 합니다. 구성 요소가 포커스를 받을 때 컨텍스트를 변경하는 예에는 다음이 포함되지만 이에 국한되지 않습니다.

  • 구성 요소가 포커스를 받으면 자동으로 양식이 제출됩니다.
  • 구성 요소가 포커스를 받을 때 새 창이 시작됩니다.
  • 해당 구성 요소가 포커스를 받을 때 포커스가 다른 구성 요소로 변경됩니다.

키보드(예: 컨트롤로 탭 이동) 또는 마우스(예: 텍스트 필드 선택)를 통해 포커스를 컨트롤로 이동할 수 있습니다. 스크립팅이 이러한 동작을 구현하지 않는 한 컨트롤 위로 마우스를 가져가도 포커스가 이동하지 않습니다. 일부 컨트롤 유형의 경우 컨트롤을 선택하면 컨트롤(예: 버튼)이 활성화될 수 있으며, 이 경우 컨텍스트 변경을 시작할 수 있습니다.

충족하는 방법 - 포커스 맞춤 (3.2.1) how-to-meet-on-focus

성공 기준 3.2.1을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 포커스 맞춤 (3.2.1) more-information-on-focus

입력 시 (3.2.2) on-input

  • 성공 기준 3.2.2
  • 레벨 A
  • 입력 시: 사용자 인터페이스 구성 요소의 설정을 변경해도 구성 요소를 사용하기 전에 사용자에게 동작을 알려 주지 않는 한 컨텍스트가 자동으로 변경되지 않습니다.

목적 - 입력 시 (3.2.2) purpose-on-input

이 성공 기준의 목적은 데이터를 입력하거나 양식 컨트롤을 선택하면 예측 가능한 효과가 있는지 확인하는 것입니다. 사용자 인터페이스 구성 요소의 설정을 변경하면 사용자가 더 이상 사용자 인터페이스 구성 요소와 상호 작용하지 않을 때 유지되는 컨트롤의 일부 종횡비가 변경됩니다. 따라서 확인란을 선택하거나 텍스트 필드에 텍스트를 입력하거나 목록 컨트롤에서 선택한 옵션을 변경하면 해당 설정이 변경되지만 링크나 버튼을 활성화하지는 않습니다. 컨텍스트의 변경은 변경 사항을 쉽게 인식하지 못하거나 변경 사항으로 인해 쉽게 주의가 산만해지는 사용자를 혼동시킬 수 있습니다. 사용자의 작업에 대한 응답으로 이러한 변경이 이루어지는 것이 분명한 경우에만 컨텍스트를 변경하는 것이 좋습니다.

충족하는 방법 - 입력 시 (3.2.2) how-to-meet-on-input

성공 기준 3.2.2를 충족하는 방법의 지침을 따르십시오.

추가 정보 - 입력 시 (3.2.2) more-information-on-input

일관된 탐색 (3.2.3) consistent-navigation

  • 성공 기준 3.2.3
  • 레벨 AA
  • 일관된 탐색: 웹 페이지 집합 내의 여러 웹 페이지에서 반복되는 탐색 메커니즘은 사용자가 변경을 시작하지 않는 한 반복될 때마다 동일한 상대적 순서로 발생합니다.

목적 - 일관된 탐색 (3.2.3) purpose-consistent-navigation

이 성공 기준의 목적은 여러 웹 페이지 내에서 반복되는 콘텐츠와 상호 작용하고 특정 정보나 기능을 두 번 이상 찾아야 하는 사용자에게 일관된 프레젠테이션 및 레이아웃을 사용하도록 권장하는 것입니다. 화면 확대율을 통해 화면의 작은 부분을 동시에 표시하는 저시력의 사람들은 종종 시각적 큐와 페이지 경계를 사용하여 반복되는 콘텐츠를 빠르게 찾습니다. 디자인 내에서 공간 메모리 또는 시각적 큐를 사용하여 반복되는 콘텐츠를 찾는 시각적 사용자에게도 동일한 순서로 반복되는 콘텐츠를 제공하는 것이 중요합니다.

이 섹션에서 “동일한 순서” 구문을 사용하는 것은 하위 탐색 메뉴를 사용할 수 없거나 보조 탐색 또는 페이지 구조의 블록을 사용할 수 없음을 의미하지는 않습니다. 대신, 이 성공 기준은 웹 페이지에서 반복되는 콘텐츠와 상호 작용하는 사용자가 찾고 있는 콘텐츠의 위치를 예측하고 콘텐츠가 다시 발생할 때 보다 신속하게 찾을 수 있도록 지원하기 위한 것입니다.

사용자는 적응형 사용자 에이전트를 사용하거나 환경 설정을 설정하여 정보가 자신에게 가장 유용한 방식으로 표시되도록 순서를 변경할 수 있습니다.

충족하는 방법 - 일관된 탐색 (3.2.3) how-to-meet-consistent-navigation

성공 기준 3.2.3을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 일관된 탐색 (3.2.3) more-information-consistent-navigation

일관된 식별 (3.2.4) consistent-identification

  • 성공 기준 3.2.4
  • 레벨 A
  • 일관된 식별: 웹 페이지 집합 내에서 동일한 기능이 있는 구성 요소는 일관되게 식별됩니다.

목적 - 일관된 식별 (3.2.4) purpose-consistent-identification

이 성공 기준의 목적은 웹 페이지 집합 내에 반복적으로 나타나는 기능 구성 요소를 일관되게 식별하기 위한 것입니다. 웹 사이트를 운영할 때 화면 판독기를 사용하는 사람이 사용하는 전략은 다른 웹 페이지에 표시될 수 있는 기능에 대해 잘 알고 있는 것입니다. 다양한 웹 페이지에서 동일한 기능에 대해 다양한 레이블(또는 일반적으로 다른 액세스 가능한 이름)이 있는 경우 사이트를 사용하는 것이 훨씬 어렵습니다. 이는 혼란스러울 수 있으며 인지적 한계가 있는 사용자에게는 인지 과부하가 발생할 수도 있습니다. 따라서 일관적으로 레이블을 지정하면 도움이 됩니다.

이러한 일관성은 텍스트 대체 요소까지 확장됩니다. 아이콘 또는 텍스트가 아닌 항목의 기능이 동일한 경우 텍스트 대체 요소도 일관되어야 합니다.

웹 페이지에 두 구성 요소가 모두 웹 페이지 집합의 다른 페이지에서 구성 요소와 동일한 기능이 있는 경우, 세 구성 요소는 모두 일관되어야 합니다. 따라서 동일한 페이지의 두 항목은 일관됩니다.

단일 웹 페이지 내에서 항상 일관성을 유지하는 것이 가장 바람직하지만, 3.2.4에서는 집합 내 여러 페이지에서 반복되는 웹 페이지 집합 내의 일관성만 다룹니다.

충족하는 방법 - 일관된 식별 (3.2.4) how-to-meet-consistent-identification

성공 기준 3.2.4를 충족하는 방법의 지침을 따르십시오.

추가 정보 - 일관된 식별 (3.2.4) more-information-consistent-identification

입력 지원 (3.3) input-assistance

지침 3.3 입력 지원: 사용자가 실수를 하지 않고 실수를 수정하도록 돕기

오류 식별 (3.3.1) error-identification

  • 성공 기준 3.3.1
  • 레벨 A
  • 오류 식별: 입력 오류가 자동으로 감지되면 오류가 있는 항목이 식별되고 오류가 사용자에게 텍스트로 표시됩니다.

목적 - 오류 식별 (3.3.1) purpose-error-identification

이 성공 기준의 목적은 오류가 발생했음을 사용자가 인식하고 무엇이 잘못되었는지 확인할 수 있도록 하는 것입니다. 오류 메시지는 가능한 한 구체적이어야 합니다. 양식 제출이 실패할 경우 양식을 다시 표시하고 오류가 있는 필드를 표시해도 오류가 발생했음을 일부 사용자가 인지할 수 없습니다. 예를 들어 화면 판독기 사용자는 하나의 표시기가 표시될 때까지 오류가 발생했음을 알 수 없습니다. 페이지가 단순히 작동하지 않는다고 생각하고 오류 표시기가 표시되기 전에 양식을 완전히 포기할 수 있습니다. WCAG의 정의에 따라 입력 오류는 허용되지 않는 사용자가 제공하는 정보입니다. 여기에는 다음이 포함됩니다.

웹 페이지에서 필요하지만 사용자가 생략한 정보나 사용자가 제공하지만 필수 데이터 형식 또는 허용된 값을 벗어나는 정보입니다.
예:

  • 사용자가 주, 도, 지역, 필드 등에 대한 적절한 약어를 입력할 수 없습니다.
  • 사용자가 유효한 상태가 아닌 상태 약어를 입력합니다.
  • 사용자가 존재하지 않는 우편번호를 입력합니다.
  • 사용자가 미래의 생년월일 2년을 입력합니다.
  • 사용자가 숫자만 입력할 수 있는 전화번호 필드에 알파벳 문자 또는 괄호를 입력합니다.
  • 사용자가 이전 입찰 또는 최소 입찰 증가보다 낮은 입찰가를 입력합니다.

충족하는 방법 - 오류 식별 (3.3.1) how-to-meet-error-identification

성공 기준 3.3.1을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 오류 식별 (3.3.1) more-information-error-identification

레이블 또는 지침(3.3.2) labels-or-instructions

  • 성공 기준 3.3.2
  • 레벨 A
  • 레이블 또는 지침: 콘텐츠에 사용자 입력이 필요할 때에는 레이블이나 지침이 제공됩니다.

목적 - 레이블 또는 지침(3.3.2) purpose-labels-or-instructions

양식을 완료하는 데 도움이 되도록 지침을 제공하는 것은 인터페이스 유용성 면에서 좋은 관행의 기본적인 부분입니다. 이렇게 하면 양식의 레이아웃과 특정 양식 필드에 제공할 데이터의 종류를 이해하는 데 어려움이 있을 수 있는 시각 또는 인지 장애가 있는 사용자에게 도움이 됩니다.

Forms

AEM WKND 데모 프로젝트에서는 텍스트 필드 ​와 같은 양식 구성 요소를 페이지에 추가할 때 기본 레이블이 추가됩니다. 이 기본 제목은 구성 요소 유형에 따라 다릅니다. 해당 필드에 대한 편집 대화 상자의 제목 및 텍스트 탭에서 원하는 제목을 추가할 수 있습니다. 레이블은 사용자가 각 양식 구성 요소와 연결된 데이터를 이해하는 데 도움이 되도록 해야 합니다.

제목 필드는 보조 기술에 사용할 수 있는 레이블을 제공할 때 필드 요소에 사용해야 합니다. 필드의 옆에 텍스트로 레이블을 쓰는 것만으로는 충분하지 않습니다.

일부 양식 구성 요소의 경우 제목 숨기기 확인란을 사용하여 레이블을 시각적으로 숨길 수도 있습니다. 이런 식으로 숨겨진 레이블은 보조 기술을 통해 계속 사용할 수 있지만 화면에는 표시되지 않습니다. 이러한 방법은 일부 상황에서는 좋은 접근 방식이지만, 일부 사용자는 화면의 작은 섹션을 볼 수 있으며(한 번에 하나의 필드) 이 경우 레이블이 필드를 올바르게 식별해야 하므로 가능한 경우 시각적 레이블을 포함하는 것이 가장 좋습니다.

이미지 버튼 image-buttons

이미지 버튼을 사용하면(예: WKND 프로젝트의 이미지 버튼 구성 요소) 편집 대화 상자의 제목 및 텍스트 탭에 있는 제목 필드에서 실제로 레이블이 아니라 이미지에 대한 대체 텍스트를 제공합니다. 따라서 아래 예에는 Submit이라는 텍스트가 있는 이미지에 편집 대화 상자의 제목 필드를 사용하여 추가된 Submit이라는 대체 텍스트가 있습니다.

양식 필드 그룹 groups-of-form-fields

WKND 프로젝트에서 라디오 그룹 ​과 같은 관련 컨트롤 그룹이 있으면 개별 컨트롤 및 그룹에도 제목이 필요할 수 있습니다. 라디오 버튼(항목)이 생성될 때 개별 제목이 지정되는 반면 AEM에서 라디오 버튼 집합을 추가하면 제목 필드가 이 그룹 제목을 제공합니다.

하지만 그룹 제목과 라디오 버튼 자체 간에 프로그래밍 방식의 연결은 없습니다. 템플릿 편집자는 필요한 fieldsetlegend 태그로 제목을 둘러싸서 이러한 연결을 만들어야 하며, 이 작업은 페이지 소스 콘솔을 편집해야만 수행할 수 있습니다. 또는 시스템 관리자가 이러한 요소가 필드 속성 대화 상자에 나타나도록 이에 대한 지원을 추가할 수 있습니다(추가 HTML 요소 및 속성에 대한 지원 추가 참조).

Forms에 대한 추가 고려 사항 additional-considerations-for-forms

데이터를 특정 형식으로 입력해야 하는 경우 레이블 텍스트에서 이를 분명히 하십시오. 예를 들어 날짜를 DD-MM-YYYY 형식으로 입력해야 하는 경우, 특히 레이블 일부로 이 형식을 표현하십시오. 이는 스크린 리더 사용자가 해당 필드를 만나면 형식에 대한 추가 정보와 함께 레이블을 자동으로 알림을 의미합니다.

양식 필드에 대한 입력이 필수인 경우, 레이블의 일부로 필요한 단어를 사용하여 이 항목을 명확히 합니다. AEM에서는 필드가 필수이면 별표를 추가하지만, 레이블 자체에 required 라는 단어를 포함하는 것이 좋을 것입니다(편집 대화 상자의 제목 필드).

레이블의 위치 지정은 적절한 필드를 찾는 데 도움이 되므로 역시 중요하며 복잡한 양식이 있을 때 특히 중요합니다. 다음 규칙을 따르십시오.

  • 확인란 또는 라디오 버튼:
    필드의 바로 오른쪽에 레이블이 배치됩니다.
  • 기타 모든 양식 구성 요소(예: 텍스트 상자, 콤보 상자):
    필드의 바로 위나 왼쪽에 레이블이 배치됩니다.

기능이 제한된 간단한 양식에서는 Submit 단추는 인접 필드에 대한 레이블로 작동할 수 있습니다(예: Search). 이는 레이블 텍스트를 배치할 공간을 찾는 것이 어려운 상황에서 유용합니다.

추가 정보 - 레이블 또는 지침(3.3.2) more-information-labels-or-instructions

오류 제안(3.3.3) error-suggestion

  • 성공 기준 3.3.3
  • 레벨 AA
  • 키보드: 입력 오류가 자동으로 감지되고 수정을 위한 제안이 알려지면 콘텐츠의 보안 또는 목적을 위험에 빠뜨리지 않는 한 사용자에게 제안이 제공됩니다.

목적 - 오류 제안(3.3.3) purpose-error-suggestion

이 성공 기준의 목적은 사용자가 입력 오류 수정에 대한 적절한 제안을 받을 수 있도록 하기 위한 것입니다. 입력 오류에 대한 WCAG 정의에서는 시스템에서 “허용되지 않는 사용자가 제공한 정보”라고 표시됩니다. 허용되지 않는 정보의 일부 예에는 필수 사항이지만 사용자가 생략한 정보와 필수 데이터 형식 또는 허용된 값을 벗어나는 정보가 포함됩니다.

성공 기준 3.3.1은 오류 알림을 제공합니다. 단, 인지 능력이 제한되어 있으면 오류를 수정하는 방법을 이해하는 것이 쉽지 않을 수 있습니다. 시각 장애가 있는 사람은 오류를 수정하는 방법을 정확히 이해하지 못할 수도 있습니다. 양식 제출이 실패할 경우 오류가 발생한 것을 알고 있더라도 사용자가 오류를 수정하는 방법을 잘 모르므로 양식을 포기할 수 있습니다.

콘텐츠 작성자는 오류에 대한 설명을 제공할 수 있고 사용자 에이전트는 프로그래밍 방식으로 결정된 기술 정보에 따라 오류의 설명을 제공할 수 있습니다.

충족하는 방법 - 오류 제안(3.3.3) how-to-meet-error-suggestion

성공 기준 3.3.3을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 오류 제안(3.3.3) more-information-error-suggestion

  • 성공 기준 3.3.4

  • 레벨 AA

  • 오류 방지(법률, 재무, 데이터): 사용자에게 법적 약정 또는 재무 거래가 발생하도록 하는 웹 페이지, 데이터 스토리지 시스템에서 사용자 제어 가능한 데이터를 수정 또는 삭제하거나 사용자 테스트 응답을 제출하는 웹 페이지의 경우, 다음 중 하나 이상이 적용됩니다.

    • 복원 가능
      제출을 복원할 수 있습니다.
    • 검사됨
      사용자가 입력한 데이터가 입력 오류에 대해 검사되며 사용자가 이를 수정할 수 있는 기회가 제공됩니다.
    • 확인됨
      제출을 완료하기 전에 정보 검토, 확인 및 수정에 사용할 수 있는 메커니즘입니다.

이 성공 기준의 목적은 복원할 수 없는 작업을 수행할 때 실수로 인한 심각한 결과를 장애가 있는 사용자가 피하도록 돕기 위한 것입니다. 예를 들어 환불이 불가능한 항공권을 구입하거나 중개 계좌에 주식을 구매하기 위해 주문을 제출하는 것은 심각한 결과를 가져오는 금융 거래입니다. 사용자가 비행기 여행 날짜를 잘못 선택한 경우 교환이 불가능한 잘못된 날에 티켓을 받게 될 수 있습니다. 사용자가 주식 매수 과정에서 착오가 있었다면 당초 목표보다 더 많은 주식을 살 가능성이 있습니다. 이러한 유형의 실수 모두 즉시 발생해서 나중에 변경할 수 없고 비용이 많이 들 수 있는 거래와 관련되어 있습니다. 마찬가지로, 사용자가 실수로 데이터베이스에 저장된 데이터를 수정 또는 삭제하고 여행 서비스 웹 사이트의 전체 여행 프로필과 같이 나중에 액세스해야 하는 경우에도 복구할 수 없는 오류가 발생할 수 있습니다. '사용자 제어 가능' 데이터의 수정 또는 삭제를 참조할 때 파일 또는 레코드 삭제 등의 데이터 대량 손실을 방지하기 위한 목적입니다. 각 저장 명령에 대한 확인이 필요하거나 문서, 레코드 또는 기타 데이터를 간단하게 만들거나 편집할 필요는 없습니다.

장애가 있는 사용자는 실수를 할 가능성이 높습니다. 읽기에 장애가 있는 사람들은 숫자와 글자를 뒤바꿀 수 있고, 운동 장애가 있는 사람들은 실수로 키를 누를 수 있습니다. 작업을 반대로 하면 심각한 결과를 초래할 수 있는 오류를 사용자가 수정할 수 있습니다. 정보를 검토하고 수정할 수 있는 기능을 제공하면 사용자는 심각한 결과를 초래하는 조치를 취하기 전에 오류를 감지할 수 있습니다.

사용자가 제어할 수 있는 데이터는 사용자가 의도한 작업을 통해 변경 및/또는 삭제할 수 있는 사용자가 볼 수 있는 데이터입니다. 이러한 데이터를 제어하는 사용자의 예로는 사용자의 계정에 대한 전화번호와 주소를 업데이트하거나 웹 사이트에서 과거 인보이스 레코드를 삭제하는 일이 있습니다. 사용자가 직접 보거나 상호 작용할 수 없는 인터넷 로그 및 검색 엔진 모니터링 데이터는 참조하지 않습니다.

성공 기준 3.3.4를 충족하는 방법의 지침을 따르십시오.

원칙 4: 강력함 principle-robust

원칙 4: 강력함 - 콘텐츠는 보조 기술을 비롯한 다양한 사용자 에이전트가 해석할 수 있을 만큼 강력해야 합니다.

호환 가능 (4.1) compatible

지침 4.1 호환 가능: 보조 기술 등 현재 및 향후 사용자 에이전트와의 호환성을 극대화합니다.

보조 기술 등 현재 및 향후 사용자 에이전트와의 호환성을 극대화합니다.

구문 분석 (4.1.1) parsing

  • 성공 기준 4.1.1
  • 레벨 A
  • 구문 분석: 마크업 언어를 사용하여 구현된 콘텐츠에서 요소에 전체 시작 및 종료 태그가 있고, 요소는 사양에 따라 중첩되며, 요소에 중복 속성이 포함되지 않으며, 사양이 이러한 기능을 허용하는 경우를 제외하고 모든 ID는 고유합니다.

목적 - 구문 분석 (4.1.1) purpose-parsing

이 성공 기준의 목적은 보조 기술을 포함한 사용자 에이전트가 콘텐츠를 정확하게 해석 및 구문 분석할 수 있도록 하기 위한 것입니다. 콘텐츠를 데이터 구조로 구문 분석할 수 없는 경우 다른 사용자 에이전트가 다르게 표시하거나 구문 분석할 수 없습니다. 일부 사용자 에이전트는 “복구 기법”을 사용하여 잘못 코딩된 콘텐츠를 렌더링하기도 합니다.

복구 기술은 사용자 에이전트마다 다르기 때문에, 해당 기술에 대한 공식 문법에 정의된 규칙에 따라 콘텐츠를 만들지 않는 한 작성자는 보조 기술과 같은 전문 사용자 에이전트가 콘텐츠를 데이터 구조로 정확하게 구문 분석했다거나 콘텐츠를 올바르게 렌더링했다고 간주할 수 없습니다. 마크업 언어에서 요소 및 속성 구문의 오류와 제대로 중첩된 시작/종료 태그를 제공하지 못하면 사용자 에이전트가 콘텐츠를 안전하게 구문 분석하지 못하게 되는 오류가 발생합니다. 따라서 성공 기준은 공식 문법의 규칙만 사용하여 콘텐츠를 구문 분석할 수 있어야 합니다.

충족하는 방법 - 구문 분석 (4.1.1) how-to-meet-parsing

성공 기준 4.1.1을 충족하는 방법의 지침을 따르십시오.

추가 정보 - 구문 분석 (4.1.1) more-information-parsing

이름, 역할, 값 (4.1.2) name-role-value

  • 성공 기준 4.1.2
  • 레벨 A
  • 이름, 역할, 값: 모든 사용자 인터페이스 구성 요소의 경우(양식 요소, 링크 및 스크립트로 생성된 구성 요소를 포함하지만 이에 국한되지 않음) 이름과 역할은 프로그래밍 방식으로 결정될 수 있습니다. 사용자가 설정할 수 있는 상태, 속성 및 값은 프로그래밍 방식으로 설정할 수 있습니다. 또한 이러한 항목에 대한 변경 내용에 대한 알림은 보조 기술을 비롯한 사용자 에이전트에게 제공됩니다.

목적 - 이름, 역할, 값 (4.1.2) purpose-ame-role-value

이 성공 기준의 목적은 AT(Assistive Technologies)가 콘텐츠에서 사용자 인터페이스 제어 상태에 대한 정보를 수집하고 활성화(또는 설정)하며 최신 정보를 유지할 수 있도록 하기 위한 것입니다.

액세스 가능한 기술의 표준 컨트롤을 사용하는 경우 이 프로세스는 간단합니다. 사용자 인터페이스 요소를 사양에 따라 사용하는 경우 이 조항의 조건이 충족됩니다. (아래 성공 기준 4.1.2의 예 참조)

단, 사용자 정의 컨트롤이 만들어지거나 인터페이스 요소가 일반적인 역할 및/또는 기능과 다른 역할을 하도록 프로그래밍(코드 또는 스크립트)되는 경우 컨트롤이 보조 기술에 중요한 정보를 제공하고 보조 기술에 의해 제어되도록 추가 조치를 취해야 합니다.

중요한 사용자 인터페이스 컨트롤의 상태는 포커스 보유 여부입니다. 컨트롤의 포커스 상태를 프로그래밍 방식으로 결정할 수 있으며 포커스 변경에 대한 알림은 사용자 에이전트 및 보조 기술에 전송됩니다. 사용자 인터페이스 제어 상태의 다른 예로는 확인란 또는 라디오 버튼을 선택했는지 여부 또는 축소 가능한 트리 또는 목록 노드가 확장 또는 축소되었는지 여부 등이 있습니다.

충족하는 방법 - 이름, 역할, 값 (4.1.2) how-to-meet-ame-role-value

성공 기준 4.1.2를 충족하는 방법의 지침을 따르십시오.

추가 정보 - 이름, 역할, 값 (4.1.2) more-information-ame-role-value

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab