WordPress 웹사이트의 접근성 향상

워드프레스 웹사이트 접근성을 개선한다고 해서 시각 장애인이 웹사이트를 사용할 수 있는 것은 아닙니다. 작은 그림입니다. 다음은 W3C가 인터넷 접근성을 높이기 위해 고려할 것을 권장하는 장애입니다.

• 청각 장애
• 인지 장애
• 신경 장애
• 신체적 장애
• 언어 장애
• 시각 장애

또한 표준 접근성 가이드라인을 따르는 웹사이트는 장애인의 사용성을 향상시킬 뿐만 아니라 비장애인에게도 도움이 됩니다 . 다음은 동일한 W3C 문서의 몇 가지 예입니다.

• 휴대 전화, 스마트 시계, 스마트 TV 및 작은 화면, 다른 입력 모드 등의 기타 장치를 사용하는 사람들
• 노화로 인해 능력이 변하는 노인
• 부러진 팔이나 잃어버린 안경과 같은 "일시적 장애"를 가진 사람들
• 밝은 햇빛 아래 또는 오디오를 들을 수 없는 환경과 같은 "상황적 제한"이 있는 사람
• 느린 인터넷 연결을 사용하거나 대역폭이 제한적이거나 값비싼 사람들

따라서 웹사이트의 접근성을 높이는 것은 다양한 장애가 있는 사람들도 웹사이트의 콘텐츠를 쉽게 사용할 수 있도록 웹사이트를 디자인하는 것을 의미합니다.

웹사이트의 접근성을 높이기 위해 따라야 하는 모범 사례가 많이 있으며 검색 엔진에서 더 높은 순위를 얻기 위해 따라야 하는 사례가 많이 있습니다. 좋은 소식은 이러한 모범 사례의 대부분이 일반적이라는 것입니다.

따라서 웹사이트의 접근성을 높이면 검색 엔진에서 웹사이트의 순위가 자동으로 높아집니다. 기술적으로 이것은 의미가 있습니다. 검색 엔진은 "크롤러"라는 특수 소프트웨어를 사용하여 인터넷의 모든 웹사이트를 크롤링합니다.

그러나 크롤러는 웹사이트의 텍스트 전용 버전을 크롤링합니다. 그들은 이미지와 비디오를 이해할 수 없습니다. 웹사이트가 접근성 표준을 따른다면 웹사이트에는 이미 최적화된 텍스트 전용 버전이 있는 것입니다. 따라서 검색 엔진은 귀하의 웹사이트가 무엇인지 쉽게 이해할 수 있습니다.

웹사이트의 접근성 개선의 이점을 알았으니 이제 WordPress 웹사이트의 접근성을 높이는 방법을 살펴보겠습니다.

나는 가벼운 근시가 있습니다. 그래도 자주 하는 사양을 어기면 일부 웹 사이트를 읽는 데 어려움을 겪습니다. 엄청나게 많은 웹사이트가 작은 글꼴을 사용합니다. 그러나 WordPress 사용자에게는 이점이 있습니다.

거의 모든 테마를 사용하면 WordPress Customizer를 통해 글꼴 크기를 변경할 수 있습니다. 일반적으로 15px – 16px 글꼴은 데스크탑 보기의 본문 텍스트에 이상적입니다. 많은 테마가 14px를 사용하지만 15px를 권장합니다.

시장에서 사용할 수 있는 무제한 글꼴에 현혹되지 마십시오. 글꼴로 너무 창의적일 수 있지만 방문자는 텍스트를 읽는 데 어려움을 겪을 것입니다.

몇 가지 좋은 글꼴 옵션은 Times New Roman, Georgia, serif, Arial, Helvetica 및 sans-serif입니다.

좋은 Google 글꼴로는 PT Serif, Noto Serif 및 Noto Sans가 있습니다.

많은 테마를 사용하여 전경색과 배경색을 변경할 수도 있습니다. 전경색과 배경색을 선택할 때 둘 사이에 상당한 대비가 있는지 확인하십시오. W3C에 따라 텍스트의 최소 명암비는 4.5:1이어야 합니다.

회색조가 아닌 색상의 대비를 결정하는 것은 어려울 수 있습니다. WebAIM의 대비 검사기 도구를 사용하여 전경과 배경 색상 조합의 대비 비율을 결정할 수 있습니다.

방문자는 비디오 또는 오디오와 같은 미디어의 일시 중지 및 재생 기능을 제어할 수 있어야 합니다. Google은 또한 자동 재생 미디어가 포함된 웹사이트를 권장하지 않습니다.

또한 많은 테마를 통해 작성자는 많은 이미지를 업로드하여 회전 목마로 표시할 수 있습니다. 어떤 종류의 자동 재생 미디어도 사용하지 마십시오. 인지 및 신경 장애가 있는 사람들에게 스트레스를 줍니다.

시각 장애인은 게시물의 이미지를 볼 수 없지만 스크린 리더는 이미지의 alt 태그를 읽어줍니다. 따라서 항상 대체 텍스트를 사용하여 이미지를 설명하십시오. 이것은 또한 이미지 결과에서 이미지의 SEO를 증가시킵니다.

예를 들어, 일몰 이미지를 포함하는 경우 alt 태그에 "일몰 사진"을 넣어 사진을 볼 수 없는 스크린 리더를 사용하는 사람들이 게시물에 일몰 사진이 있음을 이해할 수 있도록 합니다. .

이미지를 업로드할 때 WordPress는 오른쪽에 대체 텍스트를 지정하는 옵션을 제공합니다.

게시물 이미지와 추천 이미지 모두에 대해 이 작업을 수행합니다.

현재 WordPress의 기본 비주얼 편집기는 약어 언급을 지원하지 않습니다. 수동으로 수행할 수 있습니다. 게시물 편집기의 시각적 모드에서 축약된 텍스트(예: "HTTP")를 선택한 다음 오른쪽 상단 모서리에 있는 "텍스트" 탭을 클릭하여 텍스트 모드로 전환합니다.

텍스트 모드에서 다음과 같이 선택한 텍스트를 태그로 래핑합니다 .

HTTP

자막이 있는 영상이 가장 좋고, 그 밑에 영상의 대본을 올려주시면 청각장애나 인터넷 속도가 느린 분들의 영웅이 될 것입니다.

저는 팟캐스트를 많이 듣고 유튜브에서 논픽션 영상을 많이 봅니다. 언젠가 내가 청력을 잃고 인터넷이 대본 없는 비디오와 팟캐스트로 가득 차면 세상은 나에게 슬픈 곳이 될 것입니다.

블로그에 동영상이나 팟캐스트를 업로드할 때 스크립트를 게시해 주세요. 동영상 콘텐츠 제작자인 경우 동영상에 캡션을 포함하세요.

WordPress 사용자 정의 도구에서 단순히 할 수 없는 몇 가지 변경 사항이 있습니다. 이는 테마의 코드 수준에 더 가깝습니다. 접근성이 좋은 테마를 찾고 있다면 테마에서 다음 항목을 찾으십시오.

업로드하는 모든 이미지에 대체 텍스트를 제공해야 한다고 이미 논의했습니다. 그러나 테마의 헤더 이미지는 일반적으로 대체 텍스트를 설정하는 옵션을 제공하지 않습니다. 테마는 자동으로 헤더 이미지의 대체 텍스트를 사이트 제목으로 설정하거나 사용자 정의 도구에서 대체 텍스트를 설정하는 옵션을 제공해야 합니다.

영구적이든 일시적이든 운동 장애가 있는 사람들은 마우스나 트랙패드를 사용하기 어렵다는 것을 알게 됩니다. 키보드로 웹사이트에 액세스할 수 있게 하면 웹사이트를 쉽게 탐색할 수 있습니다.

주목해야 할 두 가지 주요 사항은 탭 순서가 올바른지와 키보드를 사용하여 드롭다운 메뉴가 제대로 작동하는지 여부입니다.

요소의 탭 인덱스는 사용자가 "Tab" 키를 눌렀을 때 요소가 선택되는 순서를 결정합니다. 또한 "Shift+Tab" 키는 요소를 역순으로 선택해야 합니다.

"Tab" 키를 계속 누르고 요소가 선택되는 순서를 확인하십시오. 순서는 연속적이고 논리적이어야 합니다. 같은 방법으로 "Shift + Tab"을 눌러 확인합니다.

HTML에는 드롭다운 요소인 선택 요소가 있습니다.

<선택></select>

그러나 많은 테마는 사용자 정의 드롭다운을 사용합니다. 이러한 드롭다운은 보기에는 좋지만 마우스나 트랙패드 없이는 액세스할 수 없습니다. 따라서 키보드를 통해 드롭다운을 선택할 수 있는지 항상 확인하십시오.
또한 웹사이트의 탐색 모음은 드롭다운을 사용하여 하위 메뉴를 표시할 수 있습니다. 하위 메뉴가 열릴 수 있고 키보드를 사용하여 하위 메뉴 항목을 선택할 수 있는지 확인하십시오.

일반적으로 헤더, 탐색 모음 및 CTA는 웹 사이트의 주요 콘텐츠 위에 배치됩니다. 결과적으로 키보드 사용자는 메인 섹션에 도달하기 전에 "Tab" 키를 여러 번 눌러야 할 수 있습니다. 스크린 리더를 사용하는 사람들도 같은 문제에 직면합니다.

건너뛰기 링크는 페이지의 첫 번째 링크입니다. "링크 건너뛰기"를 클릭하면 탭 순서가 바로 메인 섹션으로 설정됩니다. 따라서 다음에 "Tab" 키를 누르면 사용자는 메인 섹션 내부의 요소로 이동합니다.

"Tab" 키를 사용하여 웹사이트를 탐색할 때 활성 요소 주위에 점선 테두리가 표시됩니다. 이것은 현재 선택된 요소를 식별하는 데 도움이 됩니다. 많은 WordPress 테마가 이 기능을 비활성화합니다.

사용자가 탐색을 위해 "Tab" 또는 "Shift + Tab"을 누를 때 선택한 요소를 식별하는 데 도움이 되므로 이 기능을 활성화된 상태로 유지하는 것이 좋습니다. 웹사이트의 접근성을 높입니다.

HTML5는 <header>, <footer>, <article>, <aside>, <nav>, <main>, <section>과 같은 유용한 의미 요소를 도입했습니다. 슬픈 부분은 많은 WordPress 테마가 여전히 의미론적 요소 중 하나를 사용할 수 있는 일반 <div> 요소를 사용한다는 것입니다.