Anthology Adopt 가이드의 접근성 기능에 대한 이 페이지에서 가이드가 모든 사용자에게 제공할 수 있는 방법에 대해 자세히 알아보십시오.
개요
이러한 제안은 현재 기능 집합을 기반으로 하는 Pendo의 접근성 권장 사항입니다. 이 문서는 WCAG 2.1 AA 접근성 표준 또는 기타 유사한 표준의 준수를 입증하거나 표시하기 위한 것이 아닙니다. Pendo의 가이드 접근성 기능은 접근할 수 있는 가이드를 만들도록 고안되었지만 Pendo가 콘텐츠가 접근성 표준을 충족한다고 보장하는 것은 아닙니다.
웹 콘텐츠 접근성은 인터넷에 대한 공평한 접근을 보장합니다. Pendo 가이드는 사용자를 위해 애플리케이션에 대한 중요한 정보와 통신을 제공합니다. 가이드 접근성 기능은 모든 사용자가 Pendo 가이드를 찾고 상호 작용하는 데 도움이 됩니다.
모든 가이드는 뱃지 및 키보드 탐색에 대한 초점 및 입력 속성과 같은 일부 접근성 기능을 자동으로 적용합니다. 다른 기능에는 가이드를 만드는 동안 활성화 구성이 필요합니다. 가이드를 만들 때 Visual Design Studio에서 자동 초점, ARIA 레이블, 대체 텍스트, 제목 및 ARIA 역할과 같은 기능을 설정할 수 있습니다. 색상 대비, 포함된 비디오 또는 오디오에 대한 자막, 클릭할 수 있는 요소 크기와 같은 접근성 지침의 일부 요구 사항은 가이드 설계자가 구현해야 합니다.
권장 사항
가이드 활성화
- 뱃지가 활성화된 가이드는 더 쉽게 접근할 수 있습니다. 이러한 가이드는 사용자에게 가이드를 트리거할 수 있는 옵션을 제공하기 때문에 자동 또는 대상 요소 가이드보다 더 쉽게 접근할 수 있습니다.
- 항상 뱃지 위치를 '오른쪽 인라인' 또는 '왼쪽 인라인'으로 설정해야 합니다. 이렇게 하면 사용자 인터페이스에서 뱃지를 배치할 수 있는 위치가 제한되지만 키보드 탐색을 통해 논리적 순서로 뱃지를 탐색할 수 있습니다.
가이드 생성
- 가능한 경우 설명이 포함된 대체 텍스트 또는 ARIA 레이블을 추가합니다. 이는 보조 기술을 통해 읽을 수 있으며 사용자에게 필요한 맥락을 제공합니다.
- ARIA 역할 대화 상자, 배너 및 보조 항목은 Anthology Adopt 가이드에서 가장 자주 사용되는 유용한 내용입니다.
- 최상의 가이드 경험을 위해 자동 초점을 항상 선택해야 합니다.
- 가이드 테마에서 가이드 요소의 색상 명암비가 WCAG AA 표준을 충족하는지 확인합니다.
- 최소 대상 크기에 대한 WCAG 2.2 AA 요구 사항인 24픽셀로 뱃지 크기를 조정합니다.
가이드 접근성 구성
컨테이너에서 접근성 기능을 구성하고 Visual Design Studio에서 가이드의 빌딩 블록 설정을 구성합니다. 요소에 사용 가능한 접근성 설정이 있는 경우 해당 설정은 수정 모달의 접근성 탭에 있습니다.
색상 대비 검사기는 Visual Design Studio의 테마 설정에서 테마를 만들거나 수정할 때 사용할 수 있습니다.
구성 가능한 속성
다음은 컨테이너 및 빌딩 블록 설정에서 수정하여 가이드의 접근성을 높일 수 있는 속성입니다. 나열된 각 속성에는 수정할 수 있는 위치가 포함되어 있습니다.
- 색상 대비. 텍스트를 포함하는 요소의 배경색과 글꼴색입니다.
- 대체(이미지 대체 텍스트). 이미지 빌딩 블록입니다.
- aria-label. 컨테이너, 닫기 버튼, 버튼, 뱃지, 텍스트 빌딩 블록입니다.
- aria-modal. 배경이 활성화된 경우의 컨테이너입니다.
- 역할. 각 가이드 단계에 대한 컨테이너입니다.
- 제목. 비디오의 빌딩 블록입니다.
- 이 단계에서 자동 초점. 각 가이드 단계에 대한 컨테이너입니다.
구성할 수 없는 속성(자동으로 적용됨)
- h2, h3, p(의미론적 머리글). 제목, 부제목 및 단락 텍스트 블록이 적절한 머리글 또는 단락 요소에 자동으로 할당됩니다.
- aria-labelledby. 주관식 텍스트, 예/아니요, 객관식, 숫자 척도 및 NPS 설문 조사에 사용되는 두 요소 간의 관계를 만듭니다.
- aria-describedby. 숫자 척도 설문 조사와 NPS 설문 조사에서 척도의 첫 번째 숫자와 마지막 숫자를 텍스트 설명과 연결하는 데 사용되는 두 요소 간의 관계를 만듭니다.
- aria-expanded. 가이드 및 리소스 센터의 뱃지에 자동으로 적용됩니다.
- role - role="group". 설문 조사 빌딩 블록의 예/아니요 버튼과 객관식 라디오 버튼에 자동으로 적용됩니다.
테마 설정에 접근하기
1. 사이드 패널에서 가이드를 선택한 다음 테마 관리를 선택합니다.
2. 타이포그래피 또는 버튼 영역에서 연필 아이콘을 선택하여 수정합니다.
3. 수정할 때 색상 대비 검사기가 표시됩니다. 이렇게 하면 가이드에 적용된 색상 선택이 WCAG AA 4.5:1 또는 WCAG AAA 7:1 명암비 요구 사항을 준수하는지 확인할 수 있습니다. 배경과 글꼴의 색상을 변경하면 실시간으로 업데이트됩니다. 명암비 요구 사항이 충족되지 않으면 WCAG 태그가 빨간색으로 플래그를 지정합니다. 요구 사항이 충족되면 WCAG 태그가 녹색으로 플래그를 지정합니다.
컨테이너 접근성 설정 수정
가이드 내에서 개별 단계의 가장자리를 선택하여 Visual Design Studio에서 컨테이너 설정을 엽니다.
각 가이드 단계에는 해당 단계의 외형과 동작을 제어하는 고유한 설정이 있습니다. 여러 단계로 구성되어 접근할 수 있는 가이드를 만드는 경우 각 가이드 단계에 대해 접근성 탭을 구성해야 합니다.
컨테이너 접근성 설정
- ARIA 레이블 - 접근할 수 있는 이름. 전체 가이드 컨테이너에 대한 ARIA 레이블을 설정합니다.
- 역할. 사용할 수 있는 역할의 드롭다운 메뉴에서 ARIA 역할을 선택합니다(역할 없음, 논문, 배너, 보조 항목, 콘텐츠 정보, 대화 상자, 양식, 기본 항목, 탐색, 프레젠테이션 및 지역).
- 이 단계에서 자동 초점. 보조 기술의 초점을 가이드 단계에 고정합니다.
- ARIA 레이블 - 닫기 버튼. 컨테이너 설정에서도 토글할 수 있는 기본 닫기 버튼에 대한 ARIA 레이블을 설정합니다.
텍스트 또는 버튼 설정 수정
Visual Design Studio에서 수정할 요소에 있는 더하기 버튼을 선택합니다. 그러면 빌딩 블록 설정 패널이 열립니다.
ARIA 레이블은 텍스트 및 버튼 빌딩 블록에 대해 구성할 수 있습니다.
텍스트 빌딩 블록에 대한 의미론적 HTML
텍스트 빌딩 블록은 텍스트 빌딩 블록 설정에서 선택한 테마 스타일에 따라 HTML에서 의미론적 머리글을 자동으로 할당합니다.
- 제목은 h2 요소입니다.
- 부제목은 h3 요소입니다.
- 단락은 p 요소입니다.
- 사용자 지정은 마지막으로 할당된 스타일에 대한 의미론적 머리글을 유지합니다(예: 단락 스타일이 사용자 지정 스타일로 변경된 텍스트 블록은 p 요소로 유지됨).
이미지 설정 수정
이미지 빌딩 블록을 선택하여 이미지 빌딩 블록 설정을 엽니다. 이미지 빌딩 블록에 대해 이미지 대체 텍스트를 구성할 수 있습니다. 대체 텍스트는 이미지에 접근할 수 있는 텍스트를 추가하는 데 선호되는 방법입니다. ARIA 레이블은 일반적으로 이미지에 사용되지 않습니다.
비디오 설정 수정
비디오 빌딩 블록을 선택하여 비디오 빌딩 블록 설정을 엽니다. 비디오 빌딩 블록의 제목을 구성할 수 있습니다. 제목은 비디오에 접근할 수 있는 텍스트를 추가하는 데 선호되는 방법입니다.
설문 조사 설정 수정
다양한 설문 조사 빌딩 블록은 접근할 수 있도록 구성 가능한 설정과 구성 불가능한 설정이 조합되어 있습니다.
설문 조사 응답 필드를 선택하여 설문 조사 설정을 엽니다. 설문 조사의 텍스트 및 버튼 요소에는 ARIA 레이블 필드가 있습니다.
ARIA-describedby, ARIA-labelledby 및 그룹 역할은 자동으로 적용되어 설문 조사 응답을 각 질문 텍스트와 연결합니다.
뱃지 크기 수정
뱃지는 사용자가 Blackboard 내에서 Adopt 가이드를 활성화할 수 있는 방법 중 하나입니다. Anthology Adopt 뱃지의 기본 크기는 14픽셀입니다. 최소 대상 크기에 대한 WCAG 2.2 AA의 요구 사항은 24픽셀입니다.
뱃지 크기를 변경하려면 활성화를 선택하여 활성화 설정을 엽니다. 뱃지에서 설정 수정을 선택합니다.
스타일 지정 탭의 크기 필드에서 뱃지 픽셀 크기를 8px에서 300px 범위 내에서 조정할 수 있습니다. 필드의 숫자를 변경하면 뱃지 크기가 실시간으로 변경됩니다.
이미지 크기 조정
WCAG 지침에 따르면 콘텐츠는 "정보나 기능의 손실 없으며 2차원으로 스크롤할 필요 없이 제공"되어야 합니다. 가이드 컨테이너는 이 요구 사항을 충족하기 위해 이미지 빌딩 블록의 크기를 자동으로 조정합니다. 사용자가 가이드를 확대하면 이미지의 크기가 컨테이너의 너비에 비례하여 자동으로 조정되며 이미지가 잘리거나 가로 스크롤 막대가 추가되지 않습니다.
전체 너비 이미지에 대한 모범 사례
Pendo 가이드 컨테이너에는 기본적으로 바깥쪽 가장자리 주위에 40픽셀의 안쪽 여백이 있어 가이드 콘텐츠의 간격을 확보하고 가이드를 더 쉽게 디자인할 수 있습니다. 채우기가 100%로 설정된 이미지는 기본적으로 안쪽 여백을 40픽셀로 유지합니다. 바깥 여백을 음수로 지정하여 이미지를 컨테이너의 전체 너비로 펼칠 수 있습니다. 이미지 크기 조정은 사용자가 확대 또는 축소하는 경우 컨테이너 너비와 일치하도록 이미지를 자동으로 조정합니다.
전체 너비 바깥 여백 설정
모든 값은 음수입니다.
- 왼쪽 바깥 여백 -40px
- 오른쪽 바깥 여백 -40px
- 가이드 컨테이너 안쪽 여백 설정을 변경한 경우 음수 바깥 여백을 컨테이너 안쪽 여백 값과 일치시킵니다.
사용자 지정 안쪽 여백 및 바깥 여백을 사용하여 이미지 빌딩 블록을 기본 빌딩 블록 배치에서 지원되지 않는 위치로 자유롭게 조정하는 경우 이미지 크기 조정으로 인해 이러한 이미지의 표시 및 배치가 왜곡될 수 있습니다. 다양한 확대/축소 수준에서 가이드를 확인하여 사용자 지정 설정이 자동 이미지 크기 조정과 맞지 않는지 확인합니다.
초점
초점 상태는 사용자가 마우스나 터치 패드 없이 앱을 활용하는 데 도움이 됩니다. 초점 상태는 CSS 스타일 지정에 따라 요소 주위의 원 형태로 나타날 수 있습니다. 버전 83 이상의 Chrome을 사용하면 앱에서의 초점 요소를 스타일 지정할 수 있습니다. 이러한 요소를 클릭하거나 페이지를 탭할 때 브라우저에서 요소 주위에 윤곽선과 같은 초점 상태가 추가되는 것을 볼 수도 있습니다.
HTML 태그 - 입력
뱃지는 HTML에서 input 태그를 사용합니다. 뱃지는 CSS 스타일 지정에서 input에 할당된 모든 속성을 상속할 가능성이 높습니다. 접근성 기능을 추가하기 전에는 뱃지에 img 태그가 사용되었습니다. 다음은 Chrome 브라우저의 Dev Tools로 검사한 리소스 센터 뱃지의 예입니다.
<input type=”image” id=”pendo-image-badge-ID" src=”image-URL” data-_pendo-image-1 class=“_pendo-image _pendo-badge-image _pendo-resource-center-badge-image" style=“display: block; height: 56px; width: auto; box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px; float: none; vertical-align: baseline;”>
자동 초점
이 단계에서 자동 초점은 해제될 때까지 보조 기술의 초점을 가이드 단계에 고정합니다. 이 설정은 각 가이드 단계에 대한 컨테이너 설정에서 구성합니다.
ARIA 레이블, 대체 텍스트 및 제목
ARIA 레이블, 대체 텍스트 및 제목은 UI에서 접근할 수 있는 방식으로 설명되지 않은 요소를 확인하는 데 사용됩니다. 접근성 도구에서는 이러한 속성을 다양한 방식으로 사용합니다. 예를 들어 화면 리더는 ARIA 레이블을 사용자에게 소리 내어 읽어 줄 수 있습니다. ARIA 레이블은 텍스트 및 버튼 빌딩 블록을 나타내고, 대체 텍스트는 이미지 빌딩 블록에 적용되며, 제목은 비디오 빌딩 블록에 사용됩니다. 다음은 Chrome 브라우저의 Dev Tools로 검사한 ARIA 레이블입니다.
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
ARIA 레이블, 대체 텍스트 및 제목은 각 개별 빌딩 블록에 추가됩니다.
자세한 내용은 ARIA 레이블 및 이미지의 대체 텍스트에 대한 W3C 정의를 참조하십시오.
가이드 ARIA 역할
ARIA 역할은 사용자에게 적절한 도움말을 제공하기 위해 보조 기술의 요소를 확인하는 데 사용됩니다. 역할은 ARIA 역할 모델에서 정의하며 특정한 목적을 가지고 있습니다. 예를 들어, 상호 작용 요소를 확인하고 페이지에서 콘텐츠를 구성하는 구조를 문서화하는 위젯에는 다양한 역할이 있으며, 이는 일반적으로 상호 작용하지 않습니다.
역할은 각 개별 가이드 단계에 대해 설정됩니다.
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
선택할 수 있는 역할
- 역할 없음
- 논문
- 배너
- 보조 항목
- 콘텐츠 정보
- 대화 상자
- 양식
- 기본 항목
- 탐색
- 프레젠테이션
- 지역
W3C에서는 사용자 동작에 의해 또는 콘텐츠가 사용자에게 게시된 후 시간이 지남에 따라 역할을 변경하지 않을 것을 권장합니다. 플랫폼 및 보조 장치에는 일반적으로 역할의 점진적 업데이트를 허용하는 API가 없습니다. 보조 기술에 표시되는 첫 번째 역할은 일반적으로 캐시되며 업데이트되지 않습니다. 게시된 가이드의 ARIA 역할을 변경해야 하는 경우 가이드를 복제하고, 역할을 변경하고, 업데이트된 가이드를 게시하고, 이전 버전을 비활성화합니다. 가이드를 복제하면 새 ID가 생성되고 새 가이드 콘텐츠가 보조 장치에 의해 캐시됩니다.
