Anthology Adopt 가이드의 접근성 기능
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의 테마 설정에서 테마를 만들거나 편집할 때 사용할 수 있습니다.
구성 가능한 속성
다음은 컨테이너 및 빌딩 블록 설정에서 편집하여 가이드에 더 쉽게 접근할 수 있도록 할 수 있는 속성입니다. 나열된 각 속성에는 편집할 수 있는 위치가 포함되어 있습니다.
색상 대비. 텍스트가 포함된 요소의 배경 및 글꼴 색입니다.
alt (Image Alt Text). 이미지 빌딩 블록.
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에 의미 체계 헤더를 자동으로 할당합니다.
제목는 h2 요소입니다
부제 는 h3 요소입니다
단락는 p 요소입니다
사용자 정의는 마지막으로 할당된 스타일에 대한 의미 체계 헤더를 유지합니다(예: 단락 스타일이 사용자 정의 스타일로 변경된 텍스트 블록은 p 요소로 유지됨)
이미지 설정 편집
이미지 빌딩 블록을 선택하여 이미지 빌딩 블록 설정을 엽니다. 이미지 대체 텍스트는 이미지 빌딩 블록에 대해 구성할 수 있습니다. 대체 텍스트는 이미지에 액세스 가능한 텍스트를 추가하는 데 선호되는 방법입니다. ARIA 라벨은 일반적으로 이미지와 함께 사용되지 않습니다.
비디오 설정 편집
비디오 빌딩 블록을 선택하여 비디오 빌딩 블록 설정을 엽니다. 비디오 빌딩 블록에 대해 제목을 구성할 수 있습니다. 제목은 비디오에 접근 가능한 텍스트를 추가하는 데 선호되는 방법입니다.
설문조사 설정 편집
다양한 폴링 빌딩 블록에는 구성 가능한 설정과 구성할 수 없는 설정이 조합되어 액세스할 수 있습니다.
설문조사 응답 필드를 선택하여 설문조사 설정을 엽니다. 설문 조사의 텍스트 및 버튼 요소에는 ARIA 레이블 필드가 있습니다.
ARIA-describedby, ARIA-labelledby 및 그룹 역할이 자동으로 적용되어 설문조사 응답을 해당 질문 텍스트와 연결합니다.
배지 크기 편집
배지는 사용자가 Blackboard 내에서 가이드를 Adopt 활성화할 수 있는 방법 중 하나입니다. 앤솔로지 Adopt 배지의 기본 크기는 14픽셀입니다. 최소 대상 크기에 대한 WCAG 2.2 AA의 요구 사항은 24픽셀입니다.
배지 크기를 변경하려면 활성화를 선택하여 활성화 설정을 엽니다. 배지에서 설정 편집을 선택합니다.
스타일링 탭의 크기 필드에서 배지 픽셀 크기를 8px에서 300px 범위 내에서 조정할 수 있습니다. 필드의 번호를 변경하면 배지 크기가 실시간으로 변경됩니다.
이미지 크기 조정
WCAG 가이드라인은 콘텐츠가 "정보나 기능의 손실 없이, 2차원으로 스크롤할 필요 없이 표시되어야 한다"고 명시하고 있습니다. 가이드 컨테이너는 이 요구 사항을 충족하기 위해 이미지 빌딩 블록을 자동으로 척도합니다. 사용자가 가이드를 확대하면 이미지는 컨테이너의 너비에 비례하여 자동으로 크기가 조정되며 이미지가 잘리거나 가로 스크롤 막대가 추가되지 않습니다.
전체 너비 이미지에 대한 모범 사례
Pendo 가이드 컨테이너에는 기본적으로 바깥쪽 가장자리 주위에 40픽셀 패딩이 있어 가이드 콘텐츠의 간격을 두고 가이드 설계를 더 쉽게 만듭니다. 채우기가 100%로 설정된 이미지는 40픽셀 패딩 기본값 내에서 유지됩니다. 음수 여백을 사용하여 이미지를 컨테이너의 전체 너비로 퍼뜨릴 수 있습니다. 이미지 크기 조정은 사용자가 확대 또는 축소할 경우 컨테이너 너비와 일치하도록 이미지를 자동으로 조정합니다.
모든 값은 음수입니다
왼쪽 여백 -40px
오른쪽 여백 -40px
안내선 컨테이너 패딩 설정을 변경한 경우 음수 여백을 컨테이너 패딩 값과 일치시킵니다
중요
사용자 정의 여백 및 여백을 사용하여 기본 구성 요소 배치에서 지원되지 않는 위치로 이미지 구성 요소를 창의적으로 조정하는 경우 이미지 크기 조정으로 인해 이러한 이미지의 표시 및 배치가 왜곡될 수 있습니다. 다양한 확대/축소 수준에서 가이드를 확인하여 사용자 정의 설정이 자동 이미지 크기 조정을 방해하는지 확인합니다.
초점
포커스 상태는 사용자가 마우스나 터치패드 없이도 앱을 활용하는 데 도움이 됩니다. 포커스 상태는 CSS 스타일에 따라 요소 주위에 링으로 나타날 수 있습니다. Chrome 버전 83+에서는 앱에서 포커스 요소의 스타일을 지정할 수 있습니다. 브라우저가 요소를 클릭하거나 페이지를 탭할 때 요소 주위의 윤곽선과 같은 포커스 상태를 추가하는 것을 볼 수 있습니다.
HTML 태그 - 입력
배지는 HTML에서 input 태그를 사용합니다. CSS 스타일에서 input에 할당된 모든 속성을 상속할 가능성이 높습니다. 접근성 기능을 추가하기 전에 배지는 img 태그를 사용했습니다. 다음은 Chrome 브라우저의 개발 도구로 검사한 리소스 센터 배지의 예입니다.
<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 브라우저의 개발 도구로 검사한 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 정의를 참조하십시오.
키보드 탐색
일부 사용자는 커서나 터치 스크린을 사용하여 페이지와 상호 작용하지 못할 수 있습니다. 키보드 탐색은 콘텐츠 접근성을 위한 중요한 입력입니다. 사용자는 키보드 입력을 사용하여 가이드 콘텐츠를 탐색할 수 있습니다.
Esc를 선택하여 현재 활성 가이드를 닫습니다
탭을 선택하여 가이드 단계의 요소를 진행합니다
가이드 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가 생성되고 새 가이드 콘텐츠는 보조 장치에 의해 캐시됩니다.
접근성 기능 제한 사항
URL 링크 작업이 있는 버튼은 사용자에게 링크임을 알리지 않지만 ARIA 레이블을 사용하여 설명 텍스트를 추가할 수 있습니다.