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

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

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

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

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

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

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

원칙 1: 인지 가능 principle-perceivable

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

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

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

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

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

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

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

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

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

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

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

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

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

추가 정보 - 텍스트가 아닌 콘텐츠 (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) purpose-audio-only-and-video-only-prerecorded

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

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

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

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

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

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

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

목적 - 캡션 (사전 기록됨) (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) purpose-audio-description-or-media-alternative-prerecorded

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

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

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

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

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

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

목적 - 캡션 (라이브) (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) 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) purpose-info-and-relationships

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

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

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

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

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

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

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

목적 - 의미 있는 시퀀스 (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) purpose-sensory-characteristics

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

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

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

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

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

구별 가능성 (1.4) distinguishable

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

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

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

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

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

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

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

충족하는 방법 - 색상 사용 (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) purpose-audio-control

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

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

충족하는 방법 - 오디오 제어 (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) purpose-contrast-minimum

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

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

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

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

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

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

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

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

목적 - 텍스트 크기 조정(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) 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) 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) 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) 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) purpose-pause-stop-hide

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

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

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

추가 정보 - 일시 중단, 중지, 숨기기 (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) purpose-three-flashes-or-below-threshold

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

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

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

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

탐색 가능 (2.4) navigable

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

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

블록 우회 (2.4.1) bypass-blocks

목적 - 블록 우회 (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) 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) purpose-focus-order

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

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

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

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

링크 목적 (컨텍스트 내) (2.4.4) link-purpose-in-context

목적 - 링크 목적 (컨텍스트 내) (2.4.4) purpose-link-purpose-in-context

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

충족하는 방법 - 링크 목적 (컨텍스트 내) (2.4.4) how-to-meet-link-purpose-in-context

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

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

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

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

링크가 이미지로 이루어져 있을 경우 이미지에 대한 대체 텍스트가 링크 대상에 대해 설명하도록 하십시오. 예를 들어, 책장 이미지가 어떤 사람의 발행물에 대한 링크로 설정된 경우 대체 텍스트는 책장 ​이 아니라 John Smith의 발행물 ​이라고 읽어야 합니다.

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

<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith's publications
</a>

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

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

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

추가 정보 - 링크 목적 (컨텍스트 내) (2.4.4) more-information-link-purpose-in-context

다양한 방법 (2.4.5) multiple-ways

목적 - 다양한 방법 (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) 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) 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) purpose-language-of-page

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

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

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

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

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

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

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

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

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

충족하는 방법 - 부분 언어 (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>

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

<p>The only French phrase I know is <span lang = "fr">je ne sais quoi</code>.</p>

적절한 언어를 사용하여 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) 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) 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) 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) 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) purpose-error-identification

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

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

충족하는 방법 - 오류 식별 (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) purpose-labels-or-instructions

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

Forms

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

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

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

이미지 버튼 image-buttons

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

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

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

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

목적 - 오류 방지 (법적, 재무, 데이터) (3.3.4) purpose-error-prevention-legal-financial-data

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

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

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

충족하는 방법 - 오류 방지 (법률, 재무, 데이터) (3.3.4) how-to-meet-error-prevention-legal-financial-data

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

추가 정보 - 오류 방지 (법적, 재무, 데이터) (3.3.4) more-information-error-prevention-legal-financial-data

원칙 4: 강력함 principle-robust

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

호환 가능 (4.1) compatible

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

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

구문 분석 (4.1.1) parsing

목적 - 구문 분석 (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) 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