WordPress 사이트에 웹 접근성을 통합하는 방법

게시 됨: 2020-02-15

WordPress는 가장 인기 있는 웹사이트 구축 플랫폼입니다. W3techs에 따르면 모든 웹사이트의 35.7%가 WordPress를 사용하여 전 세계적으로 콘텐츠 관리 시스템(CMS) 시장 점유율의 62.5%를 차지합니다.

그러나 WP 웹 사이트를 만들 때 웹 접근성은 아마도 마지막으로 염두에 두는 것입니다.

그러나 WordPress 접근성 코딩 표준에는 “ WordPress에서 릴리스된 모든 새 코드 또는 업데이트된 코드는 레벨 AA에서 웹 콘텐츠 접근성 지침 2.0을 준수해야 합니다. "

즉, WP 웹 사이트가 있으면 접근성이 중요한 요소입니다.

다행히도 WP 웹 사이트에 액세스할 수 있도록 하는 것은 불가능하지 않습니다. 그러나 그것을 수행하는 방법을 논의하기 전에 웹 접근성이 무엇을 구성하는지 이해합시다.

A. 웹 접근성의 4가지 기둥

웹에 대한 국제 표준을 개발하는 W3C(월드 와이드 웹 컨소시엄)는 이미 다음과 같은 4가지 웹 접근성 원칙을 제시했습니다.

인지 가능: 모든 사람이 인지할 수 있는 방식으로 웹사이트의 모든 정보와 요소를 제시해야 합니다.
작동 가능: 탐색 가능하고 상호 작용하는 모든 요소는 다른 사용자가 작동할 수 있어야 합니다.
이해할 수 있음: 모든 사람이 웹사이트의 정보와 사용자 인터페이스를 이해할 수 있어야 합니다.
견고함: 다양한 유형의 보조 기술과 사용자가 웹사이트의 콘텐츠를 읽을 수 있어야 합니다.

B. WordPress 웹 접근성 모범 사례

위의 원칙을 염두에 두고 다음 단계를 수행하여 장애인이 WordPress 사이트에 액세스할 수 있도록 할 수 있습니다.

텍스트 접근성 향상

시각 장애인을 포함한 모든 사람이 웹사이트의 텍스트를 읽을 수 있어야 합니다. 기본적으로 큰 크기의 글꼴을 사용할 수 있지만 크기를 조정할 수 있는 텍스트를 제공하면 가독성이 더욱 높아집니다. 시각 장애가 있는 사용자는 이 기능을 사용하여 편의에 따라 글꼴 크기를 늘릴 수 있습니다.

또한 필요한 경우 Alt 태그와 같은 대체 텍스트를 추가해야 합니다. WP 접근성은 크기 조정 가능한 텍스트, 색상 대비를 추가하고, 게시물 제목을 추가하여 더 많은 링크를 읽고, 적절한 대체 텍스트를 제공하는 데 도움이 되는 WordPress 접근성 플러그인 중 하나입니다.

구조화된 프런트 엔드 및 백 엔드

각 웹페이지에는 잘 구성된 프론트엔드와 백엔드가 있어야 합니다. 콘텐츠의 전반적인 가독성을 높일 뿐만 아니라 보조 도구를 사용하여 장애인 사용자에게 메시지를 더 쉽게 전달할 수 있습니다. 의미 체계 제목 태그 및 메타 설명과 같은 HTML 요소를 사용하여 백엔드를 개선할 수 있습니다.

글머리 기호 목록, 짧은 단락, 잘 구성되고 핵심적인 내용을 사용하면 프런트 엔드를 개선하는 데 도움이 됩니다. 또한 적절한 헤드라인과 제목을 사용하여 다양한 콘텐츠 하위 섹션을 정의해야 합니다. 화려한 애니메이션과 GIF는 접근성이 좋지 않으므로 사용하지 마십시오.

또한 화면 판독기 사용자가 콘텐츠를 더 쉽게 탐색할 수 있도록 링크 건너뛰기를 추가합니다. 이 간단한 접근성 기능을 통해 사용자는 불필요한 자료를 거치지 않고도 콘텐츠의 한 섹션에서 다른 섹션으로 이동할 수 있습니다.

더 나은 상호 작용을 위한 키보드 탐색

또한 웹사이트가 키보드로 탐색할 수 있는지 확인해야 합니다. 여기에는 링크와 메뉴, 특히 드롭다운 메뉴가 포함되어야 합니다. 모든 사용자는 Tab(앞으로) 및 Shift+Tab(뒤로)를 사용하여 링크, 메뉴, 버튼 및 양식과 같은 요소에 액세스할 수 있어야 합니다.

또한 웹 페이지에서 장애가 있는 사용자를 표시하는 가시적 초점 표시기를 사용해야 합니다. WordPress 테마는 종종 기본 포커스 스타일을 재설정할 수 있습니다. 이 기능을 재설정하지 않는 WordPress 테마를 사용해야 합니다. Divi 접근성 테마를 사용하면 접근 가능한 드롭다운 메뉴와 포커스 가능한 요소에 대한 시각적 개요를 사용하여 키보드 친화적인 탐색을 설정할 수 있습니다.

ARIA 랜드마크 추가

ARIA는 Accessible Rich Internet Applications의 약자입니다. ARIA 랜드마크 역할을 사용하면 웹페이지의 여러 영역을 정의할 수 있으므로 보조 기술 사용자가 웹사이트를 쉽게 탐색할 수 있습니다.

가장 일반적인 ARIA 랜드마크 역할에는 배너, 기본, 보완, 콘텐츠 정보, 검색 및 탐색이 포함됩니다.

배너: 로고, 회사 이름 또는 웹 사이트 제목과 같은 사이트 제목을 정의합니다.
메인: 웹페이지의 메인 콘텐츠를 정의합니다.
보완: 메인 콘텐츠의 필수적인 부분인 보조 콘텐츠를 감지합니다.
검색: 귀하의 사이트에서 의 검색 형식을 나타냅니다.
탐색: 웹 페이지의 탐색 요소를 표시합니다.

ARIA 랜드마크를 사용하는 가장 좋은 점은 이미 의미 있는 HTML5 요소와 함께 작업할 수 있다는 것입니다. 결과적으로 기존 WordPress 테마의 HTML5 요소와 함께 사용할 수 있습니다.

대화형 요소: 색상 대비

CTA 및 양식과 같은 대화형 요소의 경우 항상 고대비 색상을 텍스트 배경으로 사용하십시오. WCAG 2.0 레벨 AA는 일반 텍스트의 경우 최소 4:5:1, 큰 텍스트의 경우 3:1의 명암비를 요구하지만 레벨 AAA는 일반 텍스트의 경우 최소 7:1, 4:5의 명암비를 요구합니다. 큰 텍스트의 경우 1.

일반적으로 흰색 배경에 검정색 텍스트가 최상의 색상 대비를 제공합니다. 노란색 배경에 검은색 텍스트를 사용하거나 그 반대로도 사용할 수 있습니다. 그러나 빨간색 배경에 녹색 텍스트 또는 녹색 배경에 빨간색 텍스트와 같은 조합은 피하십시오.

이별의 말

웹사이트 접근성은 웹사이트의 멀티미디어와 같은 다른 대화형 요소로도 확장됩니다. 비디오, 오디오, 슬라이더 또는 캐러셀과 같은 멀티미디어에 기본 자동 재생 옵션이 없는지 확인하십시오. 이는 장애인 사용자에게 상당한 장벽이 되기 때문입니다. 대신 모든 멀티미디어 콘텐츠는 사용자 상호 작용 후에만 재생을 시작해야 합니다.

비디오 스크립트, 오디오 설명 및 캡션 외에도 액세스 가능한 미디어 플레이어를 사용해야 합니다. Able Player와 같은 플러그인을 사용하면 WordPress 사이트의 모든 페이지에서 액세스 가능한 미디어 플레이어에 포함된 비디오 및 오디오를 추가할 수 있습니다.

WordPress 웹 사이트를 액세스 가능하게 만들려면 디자인 및 개발 흐름을 변경해야 하며 고문과 함께 수동 프로세스를 통해 수행할 수 있습니다. 자동 웹 접근성 솔루션은 약간의 시간과 리소스 투자가 필요하며 긍정적인 브랜드 이미지, 더 넓은 시장 도달 범위, 더 나은 검색 순위는 물론 판매 증가와 같은 수많은 이점을 가져올 것입니다.

WordPress 사이트를 액세스할 수 있게 만드는 방법에 대해 여전히 의문이 있는 경우 댓글에 질문을 남겨주세요.