--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/tutorials/contact-page' title: '페이지를 접근성 있게 만들기 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:58:17+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 모든 이미지에 설명을 달고, 제목을 순서대로 유지하며, 색상 위 텍스트를 읽기 쉽게 하여 스크린 리더와 키보드 사용자가 페이지를 쓸 수 있게 합니다. 이 페이지에서는 DXPR Builder가 대신 해주는 일, 직접 추가하는 일, 게시 전 결과 확인법을 나열합니다. tags: - 'Volg een tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+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-24T08:58:17+0000' dateModified: '2026-10-24T09:09:48+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/tutorials/contact-page' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/tutorials/contact-page' 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) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 페이지를 접근성 있게 만들기. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [Video (embedded)](/hc/documentation/learn-dxpr-builder/elements/video) - [여러 사이트에 하나의 제품 키 쓰기](/ko/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) - [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) 모든 이미지에 설명을 달고, 제목을 순서대로 유지하며, 색상 위 텍스트를 읽기 쉽게 하여 스크린 리더와 키보드 사용자가 페이지를 쓸 수 있게 합니다. 이 페이지에서는 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](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)를 참조합니다. 레이아웃 요소(섹션, 로우, 컬럼)는 일반 `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](/ko/hc/documentation/learn-dxpr-builder/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입니다. ## 색상 대비 확인하기 색상 선택기는 테마 팔레트를 제공하지만 대비를 측정하지 않으므로 직접 확인합니다. | Text | Minimum ratio (WCAG AA) | |---|---| | 본문 텍스트 | 4.5:1 | | 큰 텍스트(24px 또는 굵게 약 19px) | 3:1 | 사진 위 텍스트에는 사진 전체에서 비율이 유지되도록 사진을 어둡게 합니다. 섹션의 **Background effects** 패널에서 **Background effect**를 **Gradient**로 설정하고 반투명한 어두운 **Start color**와 **End color**를 씁니다. 단계는 [Backgrounds](/hc/documentation/learn-dxpr-builder/element-settings/background)를 참조합니다. ## 설명이 잘 된 링크와 버튼 쓰기 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](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)에서 전체 에디터 단축키 목록을 확인합니다. - [Firewall and data residency](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall)에서 다른 컴플라이언스 주제를 확인합니다.