페이지를 접근성 있게 만들기.

모든 이미지에 설명을 달고, 제목을 순서대로 유지하며, 색상 위 텍스트를 읽기 쉽게 하여 스크린 리더와 키보드 사용자가 페이지를 쓸 수 있게 합니다. 이 페이지에서는 DXPR Builder가 대신 해주는 일, 직접 추가하는 일, 게시 전 결과 확인법을 나열합니다.

빌더가 대신 해주는 일

• Real text structure입니다. Text 요소는 실제 제목(Heading 1부터 Heading 6까지), 문단, 목록이 있는 CKEditor 5를 사용합니다.
• ARIA on interactive elements입니다. 탭에는 role="tablist"와 role="tab"이 있습니다. 진행 표시줄과 원형 카운터에는 최소값, 최대값, 현재값과 함께 role="progressbar"가 있습니다. 접기 패널 제목은 패널이 열려 있는지 알리는 버튼입니다.
• Accessible editor dialogs입니다. 모든 설정 대화상자는 role="dialog"에 aria-modal과 제목이 있습니다.
• Keyboard access in the editor Enter는 요소 설정을 열고, Escape는 패널을 닫거나 요소 선택을 해제하며, Ctrl (Mac에서는 Cmd)과 화살표 키는 요소를 이동합니다. keyboard shortcuts reference를 참조합니다.

레이아웃 요소(섹션, 로우, 컬럼)는 일반 div 요소입니다. 스크린 리더가 알리는 구조는 제목에서 나옵니다.

이미지에 대체 텍스트 달기

1. 이미지를 가리키고 More > Settings를 클릭합니다.
2. 다음 패널을 엽니다. SEO 패널을 엽니다.
3. 다음에 설명을 입력합니다. Alt attribute에 설명을 입력합니다. 이미지가 보여주는 내용과 페이지에 있는 이유를 한두 문장으로, "image of" 없이 씁니다.
4. 대화상자에서 Save를 클릭한 뒤 컨테이너 표시줄에서 Save를 클릭합니다.

속성 Alt attribute가 비어 있으면 Image 요소는 alt를 전혀 쓰지 않으며, 스크린 리더가 파일 이름을 읽을 수 있습니다. 순전히 장식용 사진에는 대신 섹션 Background image를 Style 패널에서 사용합니다. 스크린 리더는 배경을 건너뜁니다. Image carousel은 모든 이미지에 Alt attribute 하나를 사용하므로 묶음 전체를 설명합니다.

AI 생성 이미지의 대체 텍스트는 처음에 프롬프트입니다. 요청이 아니라 결과를 설명하도록 편집합니다. image alt text를 참조합니다.

제목 순서 유지하기

1. 페이지에 Heading 1을 하나 둡니다. 대부분의 테마는 페이지 제목을 Heading 1로 표시하므로 빌더에 두 번째를 추가하지 않습니다. DXPR CMS에서는 대신 한 페이지에서 해당 제목을 숨길 수 있습니다. 편집 양식에서 DXPR Theme Settings를 열고 DXPR Hide Regions 아래에서 Page Title을 체크합니다.
2. Text 요소 도구 모음에서 제목 목록을 사용하여 섹션 제목은 Heading 2로, 하위 섹션은 Heading 3으로 표시합니다. 수준을 건너뛰지 않습니다.
3. 직접 입력한 대시 대신 도구 모음의 목록 버튼을 사용합니다.

세 요소는 제목 수준이 고정됩니다. Jumbotron Title은 항상 Heading 1, Card Title은 항상 Heading 5이며, Collapse panel의 각 Toggle title은 Heading 2입니다.

색상 대비 확인하기

색상 선택기는 테마 팔레트를 제공하지만 대비를 측정하지 않으므로 직접 확인합니다.

사진 위 텍스트에는 사진 전체에서 비율이 유지되도록 사진을 어둡게 합니다. 섹션의 Background effects 패널에서 Background effect를 Gradient로 설정하고 반투명한 어두운 Start color와 End color를 씁니다. 단계는 Backgrounds를 참조합니다.

설명이 잘 된 링크와 버튼 쓰기

Button 요소와 Link 요소에 입력한 텍스트가 링크 텍스트로 표시됩니다. 링크 동작을 씁니다("Register for Open Day"). "click here"는 쓰지 않습니다. Link 요소에는 더 긴 설명용으로 Title attribute가 SEO 패널에 있습니다.

표시 내용

1. 컨테이너 표시줄에서 View mode를 Preview로 설정하여 에디터 컨트롤이 가리지 않게 합니다.
2. Tab을 눌러 페이지를 이동합니다. 모든 버튼, 링크, 탭에 도달할 수 있으며 보이는 포커스 링이 표시됩니다.
3. 브라우저 접근성 감사나 axe 확장 같은 자동 검사에서 게시된 페이지의 빌더 콘텐츠에 오류가 나오지 않습니다.

보고서가 깨끗하지 않은 경우

• 검사기에서 alt 텍스트가 없는 이미지를 보고합니다. Image 요소의 Alt attribute가 비어 있습니다. 입력하거나 장식용 사진을 섹션 배경으로 옮깁니다.
• 검사기에서 Heading 1이 두 개임을 보고합니다. Jumbotron Title은 항상 Heading 1이며 테마 페이지 제목 옆에 있습니다. 대신 Heading 2의 Text 요소를 사용합니다.
• 검사기에서 제목 수준 건너뜀을 보고합니다. Card Title은 항상 Heading 5입니다. 비워 두고 카드 시작을 올바른 수준의 Text 요소 제목으로 씁니다.
• 검사기에서 사진 위 텍스트의 낮은 대비를 보고합니다. 위에 설명한 그러데이션을 추가하거나 더 어두운 텍스트 배경을 고릅니다.

다음 단계

• Keyboard shortcuts에서 전체 에디터 단축키 목록을 확인합니다.
• Firewall and data residency에서 다른 컴플라이언스 주제를 확인합니다.