페이지 접근성 높이기.

모든 이미지에 설명을 달고, 제목 순서를 지키고, 색상 위의 텍스트를 읽기 쉽게 만들어 스크린 리더와 키보드 사용자가 페이지를 사용할 수 있게 하세요. 이 페이지에서는 DXPR Builder가 대신 처리하는 항목, 직접 추가해야 하는 항목, 게시 전에 결과를 확인하는 방법을 설명합니다.

빌더가 대신 처리하는 항목

• 실제 텍스트 구조. Text 요소는 실제 제목(Heading 1부터 Heading 6까지), 문단, 목록을 지원하는 CKEditor 5를 사용합니다.
• 인터랙티브 요소의 ARIA. 탭에는 role="tablist"와 role="tab"이 들어갑니다. 진행률 바와 원형 카운터에는 최소값, 최대값, 현재값과 함께 role="progressbar"이 들어갑니다. 접기 패널의 제목은 패널이 열려 있는지 알려주는 버튼입니다.
• 접근성 있는 에디터 대화상자. 모든 설정 대화상자는 제목이 있는 role="dialog"이며 aria-modal을 사용합니다.
• 에디터에서의 키보드 접근. Enter(으)로 요소 설정을 열고, Escape(으)로 패널을 닫거나 요소 선택을 해제하며, Ctrl(Mac에서는 Cmd)(와)과 화살표 키로 요소를 이동합니다. 자세한 내용은 keyboard shortcuts reference 문서를 참고하세요.

레이아웃 요소(섹션, 행, 열)는 일반 div 요소입니다. 스크린 리더가 읽어주는 구조는 제목에서 나옵니다.

이미지에 alt 텍스트 추가

1. 이미지를 가리키고 More > Settings(을)를 클릭하세요.
2. 이제 SEO 패널을 여세요.
3. 이미지 설명을 Alt attribute에 입력하세요. 이미지에 표시된 내용과 페이지에 있는 이유를 한두 문장으로 적고, “image of”라는 말은 빼세요.
4. 이제 대화상자에서 Save(을)를 클릭한 뒤 컨테이너 바에서 Save(을)를 클릭하세요.

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

AI 생성 이미지의 alt 텍스트는 프롬프트 그대로 시작합니다. 요청 내용이 아니라 결과가 설명되도록 고치세요. 자세한 내용은 image alt text 문서를 참고하세요.

제목 순서 지키기

1. 페이지에 Heading 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이며, 접기 패널의 각 Toggle title(은)는 Heading 2입니다.

색상 대비 확인

색상 선택기에는 테마의 팔레트가 표시되지만 대비를 측정하지는 않으므로, 직접 확인하세요:

사진 위의 텍스트에는 사진 전체에서 대비율이 유지되도록 사진을 어둡게 하세요. 섹션의 Background effects 패널에서 Background effect(을)를 반투명한 어두운 Start color와 End color를 사용한 Gradient(으)로 설정하세요. 자세한 단계는 Backgrounds 문서에 나와 있습니다.

설명이 있는 링크와 버튼 사용

Button 요소와 Link 요소는 입력한 텍스트를 링크 텍스트로 표시합니다. 링크의 동작을 적으세요(“Register for Open Day”). “click here” 같은 말은 피하세요. Link 요소에는 SEO 패널에 더 긴 설명을 위한 Title attribute도 있습니다.

표시되는 내용

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 문서에서 다른 규정 준수 주제를 확인하세요.