Divi 5를 사용한 접근성 속성 테스트

접근성 속성은 이제 Divi 5와 완전히 호환되므로 ARIA 역할, 레이블 및 기타 스크린 리더 도우미를 빌더 내부에 추가 할 수있는 코드가없는 방법을 제공합니다. Divi 5와 함께 일하는 경우 워크 플로 나 디자인을 변경하지 않고 사이트에 접근성을 구축하는 가장 쉬운 방법입니다.

6 월 28 일에 유럽 접근성 법이 발효되고 Google은 접근성 모범 사례를 점점 더 선호하고 있습니다. 접근성 속성의 작동 방식과 사이트가 현대식 접근성 표준을 충족시키는 데 도움이되는 방법은 다음과 같습니다.

Divi 5의 접근성 속성

접근성 속성은 코드를 쓰지 않고 Divi Builder의 웹 페이지에 ARIA 역할, 레이블 및 기타 접근성 도우미를 추가 할 수있는 Divi 플러그인입니다. ARIA (접근 가능한 리치 인터넷 응용 프로그램) 속성은 특히 Divi 5에서 맞춤형 레이아웃을 구축 할 때 자체적으로 충분한 맥락을 제공하지 않는 요소에 의미를 추가하는 데 도움이됩니다.

예를 들어, 텍스트 모듈을 사용하여 시각적으로 제목 또는 버튼 모듈을 스타일로 만들기 위해 클릭 유도 문안을 작성하는 경우 스크린 리더는 자신의 역할을 자동으로 이해하지 못합니다. ARIA 역할 및 레이블을 사용하면 각 요소가 무엇인지, 시각적 설계를 변경하지 않고 보조 기술을 해석 해야하는 방법을 정의 할 수 있습니다. 이를 통해 Divi 5 사이트가 접근 가능하고 유연하게 보장합니다.

플러그인을 설치 한 후에는 섹션, 행, 모듈 및 기타 Divi 요소에 사용자 정의 입력 필드를 자동으로 추가합니다. (ARIA 필드에 액세스하려면 요소를 클릭하고 고급 탭으로 이동하십시오.)

이제 역할을 정의하고 ARIA 라벨을 추가하며 Divi Builder에서 직접 모든 요소에 대한 스크린 리더 지원을 향상시킬 수 있습니다. 접근성 속성은 Divi Workflow에 순조롭게 적합하며 연간 $ 19의 비용이 듭니다. 액세스 가능한 웹 사이트를 구축 할 수있는 간단하고 저렴한 방법을 제공합니다.

접근성 속성을 얻습니다

접근성이 더 이상 선택 사항이 아닌 이유

접근성은 당신이 내릴 수있는 것이었지만 더 이상은 아니 었습니다. 이제 법적 안전, 검색 성과 및 사용자의 신뢰에 영향을 미칩니다.

귀하의 사이트에 액세스 할 수 없다면, 당신은 뒤에있을뿐 아니라 위험에 처해 있습니다. 이유는 다음과 같습니다.

• 법적 조치가 증가하고 있습니다 : 2025 년 6 월 28 일부터 유럽 접근성 법이 시행 될 것입니다. 귀하의 웹 사이트에 액세스 할 수없고 EU의 사람들이 사용하는 경우 벌금이나 다른 처벌에 직면 할 수 있습니다. 이 법은 직원이 10 명 이상인 대부분의 사업체에 적용되며 연간 2 백만 유로 이상을 벌고 있지만 소규모는 또한이를 따르도록 권장됩니다.
• 접근성은 순위에 영향을 줄 수 있습니다. 접근성은 순위 요인이 아니지만 많은 액세스 가능한 기능이 SEO에 간접적으로 영향을 줄 수 있습니다. Alt Text, 적절한 제목 구조 및 설명 레이블과 같은 것들을 통해 사용자와 검색 엔진이 모두 이해하기가 더 쉬워집니다. 따라서 사이트를 탐색하기가 어려운 경우 검색 결과에서 조용히 뒤처 질 수 있습니다.
• 접근 할 수없는 사이트는 사용자를 멀리합니다. 사이트에 액세스 할 수 없으면 장애인이 사용할 수 없을 수 있습니다. 빠르게 떠날 때는 검색 엔진을 검색하고 순위를 상하게하는 사용자 경험이 좋지 않습니다. 명확한 구조, 읽기 쉬운 글꼴 및 쉬운 키보드 탐색과 같은 변경으로 모든 사람이 사이트를 사용할 수 있습니다.

접근성은 대기업에만 문제가 있다고 가정하기 쉽지만, 브랜드가 작은 경우에도 여전히 상처를 입을 수 있습니다.

Divi 5에서 접근성 속성 설정

이 섹션에서는 Divi 5 웹 사이트의 접근성 속성에 도구 설치 및 액세스를 안내합니다.

플러그인 설치

접근성 속성을 구매하면 플러그인의 zip 파일을 받게됩니다. WordPress의 플러그인> 플러그인 추가> 플러그인 업로드에 업로드하십시오.

이제 zip 파일을 추가하고 지금 설치를 클릭하십시오.

마지막으로 활성화하십시오 .

일단 활성화되면 모든 요소의 고급 탭에 추가 ARIA 필드가 추가됩니다.

이제 Divi Builder에서 직접 페이지의 각 요소에 이러한 접근성 속성을 쉽게 추가 할 수 있습니다. 우리는 단지 1 분 안에 그것을 다룰 것입니다. 그 전에는 접근성 속성 대시 보드 내에서 사용 가능한 모든 옵션을 빠르게 검토해 봅시다.

접근성은 연습을 속성합니다

플러그인이 Divi 사이트에서 활성화되면 액세스 가능성 탭이 WordPress 사이드 바에 추가됩니다. 관리자, 모듈, 요소 및 제품 의 네 가지 탭이있는 대시 보드에 액세스하려면 클릭하십시오 .

각 탭의 옵션을 검토합시다.

관리자 탭

이 탭에서는 구독 관리 (지원을 가능하게) , 플러그인 상태 확인, 제거에서 데이터를 삭제할지 여부를 선택하고 모든 설정을 기본값으로 재설정하는 것과 같은 계정 수준 컨트롤이 제공됩니다.

모듈 탭

이를 통해 Divi 모듈에서 활성화 할 ARIA 속성을 결정할 수 있습니다. 선택한 옵션 만 고급 탭에 필드로 나타납니다. 당신은 그들 모두를 켜고 싶을 수도 있습니다.

모든 모듈에 접근성 속성이 필요한 것은 아닙니다. 예를 들어, 화면 독자에게 의미있는 컨텐츠를 추가하지 않기 때문에 캡션이나 링크없이 분배기, 애니메이션 아이콘 또는 이미지 갤러리와 같은 장식 요소를 안전하게 건너 뛸 수 있습니다.

모듈을 제외하려면 호환성 섹션에 모듈 슬러그 (ET_PB_IMAGE)를 입력하십시오. 이를 통해 플러그인은 ARIA 필드를 추가 할 때 건너 뛸 수 있으며 실제로 접근성 지원이 필요한 모듈에만 초점을 맞 춥니 다.

요소 탭

귀하의 웹 사이트의 일부는 Divi 모듈로 구축되지 않았습니다. 테마, 기타 플러그인 또는 일반 HTML에서 나올 수 있습니다. 요소 탭을 사용하면 CSS 선택기를 사용하여 사이트의 해당 부분에 ARIA 속성을 추가 할 수 있습니다. 메뉴, 아이콘, 버튼 및 Divi Builder 내부에서 생성되지 않은 형태 필드와 같은 글로벌 요소를 포함 할 수 있습니다.

• ARIA MAIN : 메뉴 나 사이드 바를 건너 뛸 수 있도록 주요 콘텐츠가 시작되는 곳을 스크린 리더에게 알려줍니다.
• ARIA HIDDEN : 보조 기술이 크게 읽지 않도록 장식 요소를 숨기십시오.
• ARIA LINK : 링크로 실제 링크가 아닌 클릭 가능한 요소를 표시합니다. 이것은 스크린 리더가 올바르게 식별하는 데 도움이됩니다.
• ARIA 버튼 : 버튼 역할을 추가하여 아이콘을 토글하거나 버튼처럼 작동하는 스타일의 텍스트 링크를 토글합니다.
• ARIA 필수 : ​​HTML이 그렇게 말하지 않더라도 필요에 따라 사용자 정의 양식 필드를 표시합니다.
• 탭 색인 : 키보드 전용 탐색에 도움이되는 탭 키를 사용하여 중요한 요소를 도달 할 수 있습니다.

각 설정을 사용하면 CSS 선택기를 사용하여 이러한 역할을 추가하거나 제거 할 수 있습니다. 어디서부터 시작 해야하는지 잘 모르겠다면, Aria Main 및 Aria 버튼은 첫 번째 선택이며 종종 놓치고 설정하기 쉽습니다.

제품 탭에는 동일한 제작자의 다른 제품이 있습니다.

Divi 5 내부의 접근성 속성 사용

설정 후 실제 작업은 빌더 내부에서 발생합니다. 각 Aria 필드에는 목적이 있습니다. 그것이 무엇을하는지, 언제 사용하는지, 그것이 실제 레이아웃의 접근성에 어떻게 도움이되는지 살펴 보겠습니다.

1. ARIA 역할을 가진 요소에 역할을 할당하십시오

ARIA 역할 필드를 사용하면 코드에서 명백하지 않은 요소에 목적을 할당 할 수 있습니다. 예를 들어, Blurb 모듈을 사용하여 호출을 작성하는 경우 화면 리더는 자동으로 버튼으로 인식하지 않습니다. 음성 명령 또는 키보드 바로 가기로 탐색하는 사용자가 기능을 명확하게하려면 역할 버튼을 할당해야합니다.

아래의 경우와 마찬가지로이 블루트에는 버튼이 포함되어 있습니다.

ARIA 역할을 추가하려면 옵션을 전환하고 다음 값을 할당하십시오.

• 위젯 역할로서 Aria 역할 유형 (이것은 버튼 및 슬라이더와 같은 대화 형 요소가 라이브가있는 범주입니다.)
• 버튼 으로 Aria 역할 가치
• Aria 역할 선택기 AS .ET_PB_BUTTON (이것은 버튼 모듈에 대한 클래스 디바 사용입니다.)

2. ARIA 레이블을 가진 스크린 리더에 대한 명확한 레이블 추가

ARIA 역할은 보조 기술에 요소가 무엇 인지 알려주지 만 Aria 레이블은 그것이 무엇을하는지 설명합니다. 이는 요소에 아이콘, 사용자 정의 스타일 버튼 또는 대화식으로 보이도록 설계된 것과 같은 눈에 보이는 텍스트가 없을 때 특히 유용합니다. 같은 예제를 사용하여 분류합시다.

우리는 이미 역할을 추가했지만 버튼 텍스트는“지금 기부”라고 말합니다. 시각적 사용자에게는 좋지만 화면 독자를 사용하는 사람들은 버튼이 여러 번 나타나기 때문에 더 많은 컨텍스트가 필요할 수 있습니다.

이 버튼에 레이블을 할당하려면 Aria 레이블을 전환하고 짧은 레이블을 추가하십시오.

이제 버튼은 여전히 ​​화면에서 "지금 기부"라고 말하지만 화면 리더는 전체 레이블을 읽어 사용자가 버튼의 기능과 그 장소를 정확하게 이해할 수 있도록 도와줍니다.

3. ARIA 설명과 함께 추가 컨텍스트를 제공하십시오

ARIA 설명은 화면 독자에게 레이블이 설명 할 수있는 요소에 대한 자세한 내용을 제공합니다. 레이블은 무언가가 무엇인지 알려주지 만 설명은 그것이 중요한 이유를 설명합니다.

예를 들어, 한 페이지에 여러 개의 "기부"버튼이 있다고 가정 해 봅시다. 각각은 해안 청소, 해양 교육 또는 서식지 복원과 같은 다른 원인에 배치됩니다. 스크린 리더 사용자는 버튼에 직접 착륙하여 인근 콘텐츠를 놓칠 수 있습니다. Aria 설명이 도움이되는 곳입니다.

첫 번째 카드 인 Coastal Cleanup을 가져 가자. 더 많은 맥락을 추가하기 위해 Aria 설명 텍스트로 "이 기부금이 해양 정화 및 야생 동물 보호를 지원합니다"와 같은 설명을 추가 할 수 있습니다.

다른 버튼에 대해서도 똑같이 수행하므로 모두 "지금 기부"라고 말하지만 스크린 리더는 각각의 설명에 대해 다른 설명을 발표 할 것입니다. 이렇게하면 화면에서 보는 것을 변경하지 않고 사용자에게 전체 컨텍스트를 제공합니다.

4. 스크린 리더의 장식 요소를 숨기십시오

Aria Hidden은 아이콘이나 배경 이미지와 같이 시각적으로 무언가를 보여주고 싶을 때 도움이되지만 스크린 리더가 알리기를 원하지 않습니다. 이를 통해 보조 기술에 의존하는 사용자에게 더 집중할 수 있습니다.

예를 들어, 갈매기 사진과 같이 캠페인의 미리보기 이미지를 찍습니다. 디자인을 지원하지만 이미 제목이나 설명에있는 것 이상의 새로운 정보를 추가하지 않습니다. 여기에서 Aria Hidden을 사용하여 스크린 리더로부터 숨길 수 있습니다.

5. ARIA 세부 정보가 포함 된 추가 정보 링크

Aria 세부 사항을 사용하면 한 요소를 다른 요소에 연결하여 추가 정보를 제공 할 수 있습니다. 예를 들어, 버튼을 버튼의 내용을 설명하는 근처 단락에 링크 할 수 있습니다. 보조 기술이 클릭 된 요소의 직접적인 부분이 아닌 더 많은 컨텍스트를 읽을 수 있도록 유용합니다.

해양 교육 섹션을 방문합시다. 단락 텍스트가 "지금 기부"버튼을 설명하기를 원한다고 가정 해 봅시다. Aria 세부 사항을 사용하여 버튼을 단락에 링크 할 수 있습니다.

먼저 단락에 고유 한 ID를 추가하십시오. 설명이 포함 된 텍스트 모듈을 클릭하고 Advanced> CSS ID 및 클래스 로 이동하십시오. CSS ID 필드에 고유 ID를 입력하십시오. 해양 에다에 들어 갑시다.

이제이 텍스트 모듈에는 화면 리더가 참조 할 수있는 ID가 있습니다.

다음으로 ARIA 세부 사항 속성을 버튼에 추가합니다. 버튼 모듈을 클릭하고 Advanced> Aria 세부 사항으로 이동하십시오. ID 필드에 Marine-edu를 입력하십시오.

이것은 보조 기술에 버튼이 단락에서 더 많은 정보에 연결되어 있음을 알 수 있습니다. 다른 장소에서 동일한 버튼 텍스트를 사용할 때도 도움이되지만 각각은 다른 것을 의미합니다.

ARIA 레이블, ARIA 설명 및 ARIA 세부 사항은 모두 다른 방식으로 추가 컨텍스트를 추가하므로 스크린 리더를 혼란스럽게 할 수 있으므로 동일한 요소로 함께 사용하지 않는 것이 가장 좋습니다. 이미 페이지에서 무언가를 설명하고 있다면 ARIA 세부 정보를 사용하여 새 레이블이나 설명을 작성하는 대신 해당 텍스트에 링크하십시오.

접근성 속성으로 인해 Divi Builder에서 직접 ARIA 역할, 레이블 및 기타 주요 접근성 기능을 쉽게 추가 할 수있는 방법을 보았습니다. 코딩없이 웹 사이트에 액세스 할 수 있습니다.

접근성 속성을 얻습니다

Divi 5에 대한 추가 Divi-Modules의 접근성 도구

접근성 속성은 접근성의 기술적 측면을 처리합니다. 또한 키보드 내비게이션 및 시각적 컨트롤과 같은 추가 기능을 제공하여보다 완전하고 포괄적 인 솔루션을 제공하는 추가 기능 (접근성 번들)과 함께 제공됩니다.

1. 접근성 사이드 바

접근성 사이드 바에는 사용자가 브라우징 경험을 사용자 정의 할 수있는 부유 도구 모음이 추가됩니다. 이동성 장애가있는 방문자는 글꼴 크기를 조정하고, 고 대비 모드로 전환하고, 그레이 스케일을 활성화하고, 키보드를 사용하여 탐색 할 수 있습니다. 사이트 디자인과 일치하도록 사용자 정의 할 수도 있습니다.

2. 접근성 조정

접근성 조정은 사용자가 사이트를보다 쉽게 ​​탐색하는 데 도움이되는 실용적인 기능을 추가합니다. 여기에는 더 나은 탐색을위한 건너 뛰기 링크, 키보드 사용자가 어디에 있는지 확인하는 데 도움이되는 포커스 윤곽선 및 사이트 레이아웃을 변경하지 않고 유용성을 향상시키는 기타 미묘한 향상이 포함됩니다.

접근성 번들을 확인하십시오

오늘 Divi 5 웹 사이트에 액세스 할 수 있도록하십시오

접근성 속성을 통해 Divi 사이트를보다 포괄적으로 만들 수있는 쉽고 시각적 인 방법을 제공합니다. 코딩 없음, 해결 방법 없음 - 빌더에 직접 구축 된 올바른 도구 만 있습니다.

Divi 5와 완전히 호환되며 적극적으로 지원되며 6 월 28 일까지 50% 할인됩니다. 제안이 실행되는 한 사이드 바 및 조정을 포함한 전체 접근성 번들을 연간 $ 36에 구입할 수 있습니다. 모든 사람을 위해 사이트를 개선 할 준비가 되었다면 이것이 가장 간단한 시작 방법입니다.

접근성 번들을 50% 할인하십시오