액세스 가능한 컨텐츠 만들기(WCAG 2.0 적합성) creating-accessible-content-wcag-conformance

WCAG 2.0은 장애가 있는 사용자가 웹 컨텐츠를 액세스하여 사용할 수 있도록 하는 데 도움이 되는 기술 독립적 지침 및 성능 기준으로 구성되어 있습니다.

이러한 적합성 수준에 따라 등급이 지정됩니다. 레벨 A(가장 낮음), 레벨 AA 및 레벨 AAA(가장 높음). 간략하게 그 수준은 다음과 같이 정의됩니다.

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

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

원칙 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

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

다음 W3C 초안: HTML5 유용한 텍스트 대체 요소를 제공하기 위한 기술 에는 다양한 유형의 이미지에 적절한 대체 텍스트 제공의 세부 사항과 예가 있습니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

캡션(사전 기록된)(1.2.2) captions-pre-recorded

목적 - 캡션(사전 기록된)(1.2.2) purpose-captions-pre-recorded

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

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

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

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

닫힘 캡션의 경우, 동기화된 캡션 파일을 적절한 형식(예: )으로 만들어 제공해야 합니다 SMIL) 비디오 파일과 함께(이 작업을 수행하는 방법에 대한 자세한 내용은 이 안내서의 범위를 벗어나지만, 추가 정보 - 캡션(사전 기록된)(1.2.2)). 비디오에 캡션을 사용할 수 있다는 것을 사용자에게 알리는 메모를 제공해야 합니다.

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

추가 정보 - 캡션(사전 기록된)(1.2.2) more-information-captions-pre-recorded

오디오 설명 또는 미디어 대체 요소(사전 녹음된)(1.2.3) audio-description-or-media-alternative-pre-recorded

목적 - 오디오 설명 또는 미디어 대체 요소(사전 녹음된)(1.2.3) purpose-audio-description-or-media-alternative-pre-recorded

앞이 안 보이거나 시각 장애가 있는 사람은 비디오나 애니메이션에 있는 정보가 시각적으로만 제공되거나, 사운드트랙이 시각적으로 일어나고 있는 상황에 대해 이해할 수 있도록 충분한 정보를 제공하지 않는 경우 접근성 장벽을 경험하게 됩니다.

충족하는 방법 - 오디오 설명 또는 미디어 대체 요소(사전 녹음된)(1.2.3) how-to-meet-audio-description-or-media-alternative-pre-recorded

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

이 안내서에서는 오디오 설명이 있는 비디오를 만드는 방법에 대해 자세히 다루지 않습니다. 비디오와 오디오 설명을 만드는 것은 시간이 많이 소요될 수 있지만, 다른 Adobe 제품을 사용하면 이런 작업을 수행하는 데 도움이 될 수 있습니다. Adobe Flash Professional에서 컨텐츠를 만드는 경우 사용자에게 적절한 플러그인을 다운로드하라는 메시지를 표시하는 스크립트도 만들고 <noscript> 요소를 통해 텍스트 대체 요소도 제공해야 합니다.

추가 정보 - 오디오 설명 또는 미디어 대체 요소(사전 녹음된)(1.2.3) more-information-audio-description-or-media-alternative-pre-recorded

캡션(라이브) (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-pre-recorded

목적 - 오디오 설명(사전 녹음된)(1.2.5) purpose-audio-description-pre-recorded

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

충족하는 방법 - 오디오 설명(사전 녹음된)(1.2.5) how-to-meet-audio-description-pre-recorded

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

추가 정보 - 오디오 설명(사전 녹음된)(1.2.5) more-information-audio-description-pre-recorded

적응성 (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.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

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

예를 들어 적색-녹색 색맹인 사람은 녹색 색조와 빨간색 색조를 구별하지 못할 것입니다. 이 두 색상을 모두 세 번째 색상(예: 갈색)으로 볼 수 있으며, 이 경우 빨간색, 녹색 및 갈색을 구분할 수 없습니다.

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

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

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

예를 들어, 색상으로 제공된 정보가 텍스트에서도 명시적으로 제공되도록 하십시오. 아래 그림에서는 색상과 텍스트가 모두 공연 관람을 위한 빈 좌석이 있는지를 가리킵니다.

색상이 정보를 제공하는 단서로 사용되는 경우 스타일(예: 굵게, 기울임꼴)이나 글꼴을 변경하는 등, 추가적인 시각적 단서를 제공해야 합니다. 이렇게 하면 시력이 약하거나 색약인 사람이 정보를 식별하는 데 도움이 됩니다. 하지만 이 방법은 페이지를 전혀 볼 수 없는 사람은 도울 수 없으므로 여기에 전적으로 의존할 수는 없습니다.

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

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

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

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

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

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

대비율을 확인하려면 다음과 같은 색상 대비 도구를 사용합니다 Paciello Group 색상 대비 분석 또는 WebAIM 색상 대비 검사기. 이러한 도구를 사용하면 색상 쌍을 검사하고 대비 문제에 대해 보고할 수 있습니다.

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

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

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

텍스트 이미지 (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.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

지침 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.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.4) link-purpose-in-context

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

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

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

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

페이지 간에 링크를 일관되게 표현해야 합니다(특히 탐색 막대의 경우). 예를 들어, 특정 페이지에 연결된 링크를 한 페이지에서 게시물 ​이라고 이름을 지정했으면 다른 페이지에서도 이 텍스트를 사용하여 일관성을 보장해야 합니다.

그러나 작성 시 제목을 사용하는 것과 관련된 몇 가지 문제가 있습니다.

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

링크가 이미지로 이루어져 있을 경우 이미지에 대한 대체 텍스트가 링크 대상에 대해 설명하도록 하십시오. 예를 들어 책장 이미지가 어떤 사람의 간행물에 대한 링크로 설정된 경우 대체 텍스트는 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

원칙 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</span>.</p>

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

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

사용자가 실수를 하지 않고 실수를 수정하도록 돕기(3.3) help-users-avoid-and-correct-mistakes

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

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

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

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

AEM에서 다음과 같은 양식 구성 요소를 추가할 때 기본 레이블이 추가됩니다. 텍스트 필드 ​로 나열된 상태로 남아 있는 문제가 해결되었습니다. 이 기본 제목은 구성 요소 유형에 따라 다르며, 해당 필드에 대한 편집 대화 상자의 제목 및 텍스트 탭에서 원하는 제목을 추가할 수 있습니다. 레이블은 사용자가 각 양식 구성 요소와 연결된 데이터를 이해하는 데 도움이 되도록 해야 합니다.

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

일부 양식 구성 요소의 경우 제목 숨기기  확인란을 사용하여 레이블을 보이지 않게 숨길 수도 있습니다. 이런 식으로 숨겨진 레이블은 화면에는 표시되지 않지만 여전히 보조 기술에서 사용할 수 있습니다. 어떤 사용자는 화면의 매우 작은 부분(한 번에 한 필드)을 보고 있어서 필드를 올바르게 식별하기 위해 레이블을 필요로 할 수 있으므로 가능하다면 시각적 레이블을 포함하는 것이 최상인 경우 이 방법이 좋은 접근 방법일 수 있습니다.

이미지 버튼 image-buttons

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

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

Where there is a group of related controls, such as Radio Group, a title may be needed for the group, as well as individual controls. 라디오 단추(항목)가 생성될 때 개별 제목이 지정되는 반면, AEM에서 라디오 단추 집합을 추가하면 제목 필드가 이 그룹 제목을 제공합니다.

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

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

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

If input for a form field is mandatory, make this clear by using the word required as part of the label. AEM에서는 필드가 필수이면 별표를 추가하지만, 레이블 자체에 required 라는 단어를 포함하는 것이 좋을 것입니다(편집 대화 상자의 제목 필드).

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

기능이 매우 제한된 간단한 양식에서는 Submit 버튼에 적절히 레이블을 지정하면 이것이 인접 필드(예: Search)에 대한 레이블로 작동할 수 있습니다. 이 기능은 레이블 텍스트의 공간을 찾는 것이 어려운 상황에서 유용합니다.

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