--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/advanced/accessibility' title: '페이지 접근성 높이기 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:39:23+00:00' updated: '2026-10-24T06:24:37+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 모든 이미지에 설명을 달고, 제목 순서를 지키고, 색상 위의 텍스트를 읽기 쉽게 만들어 스크린 리더와 키보드 사용자가 페이지를 사용할 수 있게 하세요. 이 페이지에서는 DXPR Builder가 대신 처리하는 항목, 직접 추가해야 하는 항목, 게시 전에 결과를 확인하는 방법을 설명합니다. tags: - 'Pagina’s toegankelijk en vindbaar maken' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:24:37+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: '페이지 접근성 높이기' description: |- 모든 이미지에 설명을 달고, 제목 순서를 지키고, 색상 위의 텍스트를 읽기 쉽게 만들어 스크린 리더와 키보드 사용자가 페이지를 사용할 수 있게 하세요. 이 페이지에서는 DXPR Builder가 대신 처리하는 항목, 직접 추가해야 하는 항목, 게시 전에 결과를 확인하는 방법을 설명합니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T01:39:23+0000' dateModified: '2026-10-24T06:24:37+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/advanced/accessibility' articleSection: 'Pagina’s toegankelijk en vindbaar maken' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/advanced/accessibility' description: |- 모든 이미지에 설명을 달고, 제목 순서를 지키고, 색상 위의 텍스트를 읽기 쉽게 만들어 스크린 리더와 키보드 사용자가 페이지를 사용할 수 있게 하세요. 이 페이지에서는 DXPR Builder가 대신 처리하는 항목, 직접 추가해야 하는 항목, 게시 전에 결과를 확인하는 방법을 설명합니다. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 홈 item: 'https://dxpr.com/ko' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ko --- [Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Pagina’s toegankelijk en vindbaar maken](/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # 페이지 접근성 높이기. Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken ## In this guide Related guides - [Keyboard shortcuts](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) - [Firewall and data residency](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) 모든 이미지에 설명을 달고, 제목 순서를 지키고, 색상 위의 텍스트를 읽기 쉽게 만들어 스크린 리더와 키보드 사용자가 페이지를 사용할 수 있게 하세요. 이 페이지에서는 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](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) 문서를 참고하세요. 레이아웃 요소(섹션, 행, 열)는 일반 `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](/ko/hc/documentation/learn-dxpr-builder/ai/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입니다. ## 색상 대비 확인 색상 선택기에는 테마의 팔레트가 표시되지만 대비를 측정하지는 않으므로, 직접 확인하세요: | 텍스트 | 최소 대비율(WCAG AA) | |---|---| | 본문 텍스트 | 4.5:1 | | 큰 텍스트(24px, 또는 굵은 19px 정도) | 3:1 | 사진 위의 텍스트에는 사진 전체에서 대비율이 유지되도록 사진을 어둡게 하세요. 섹션의 **Background effects** 패널에서 **Background effect**(을)를 반투명한 어두운 **Start color**와 **End color**를 사용한 **Gradient**(으)로 설정하세요. 자세한 단계는 [Backgrounds](/hc/documentation/learn-dxpr-builder/element-settings/background) 문서에 나와 있습니다. ## 설명이 있는 링크와 버튼 사용 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](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) 문서에서 전체 에디터 단축키 목록을 확인하세요. - [Firewall and data residency](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) 문서에서 다른 규정 준수 주제를 확인하세요.