가이드 / 웹사이트 편집 / 사이트 설정 / 사이트 접근성 향상

사이트 접근성 향상

접근성이 구현된 웹사이트는 웹을 탐색하기 위해 보조 기술에 의존하는 장애인을 포함하여 가능한 한 많은 사용자가 사용할 수 있도록 설계되었습니다. 이 가이드에서는 웹사이트의 접근성을 높이는 방법을 설명합니다.

웨비나: 접근성이 구현된 웹사이트 구축

영어 비디오입니다.
YouTube의 자동 번역 기능을 사용하면 원하는 언어로 시청할 수 있습니다.

자동 번역 자막을 켜는 방법:

  1. 비디오를 재생합니다.
  2. 비디오 오른쪽 하단의 ⚙️ 설정 아이콘을 클릭합니다.
  3. 자막/CC 를 선택합니다.
  4. 자동 번역 을 선택합니다.
  5. 원하는 언어를 선택합니다.

자동 더빙(실험 기능)으로 시청하는 방법:

  1. ⚙️ 설정 아이콘을 클릭합니다.
  2. 오디오 트랙 을 선택합니다.
  3. 시청하려는 언어를 선택합니다.

ℹ️ 번역과 더빙은 Google에서 자동 생성되므로 정확하지 않을 수 있으며, 자동 더빙 기능은 현재 테스트 중이라 모든 언어에서 사용할 수 있는 것은 아닙니다.

사이트 접근성 향상

웹사이트를 만들 때 콘텐츠에 접근하기 위해 취할 수 있는 몇 가지 조치가 있습니다.

이미지에 대체 텍스트 사용

웹사이트의 모든 방문자가 이미지를 볼 수 있는 것은 아닙니다. 시각 장애가 있는 일부 사람들은 웹을 탐색하기 위해 화면 리더라는 도구를 사용합니다.

시각 장애가 있는 사람을 돕기 위해 이미지에 표시되는 내용을 설명하는 대체 텍스트 를 추가합니다.

워드프레스 편집기에서 이미지 블록 , 갤러리 블록 , 커버 블록 , 미디어 & 텍스트 블록 설정에서 대체 텍스트 를 추가할 수 있습니다.

검색 엔진 크롤러도 대체 텍스트를 읽고 이미지 콘텐츠를 인식하므로 대체 텍스트는 SEO 를 개선하는 추가적인 이점이 있습니다.

이미지 블록의 대체 텍스트 설정.

설명 이미지 캡션 작성

이미지를 삽입 할 때, 특히 이미지를 볼 수 없는 독자를 위해 모든 사람의 읽기 환경을 개선할 수 있도록 캡션 작성을 고려하세요.

이미지 캡션으로 창의력을 발휘할 수 있습니다. 대체 텍스트 는 사실적이어야 하지만 캡션은 이미지의 느낌 을 전달하는 데 도움이 될 수 있습니다.

예를 들어 ‘내 아들이 스윙을 한다’ 대신에 ‘내 아들이 좋아하는 스윙을 하고 있다. 아름다운 봄날에 그의 얼굴은 순수한 기쁨으로 가득 차 있다. 완벽하다’고 써 보세요.

텍스트에 링크를 추가 할 때, 연결된 텍스트에서 설명하는 데 도움이 됩니다. 예를 들어, “클릭하기”는 “문의하기”보다 명확하지 않습니다.

적절한 제목 사용

페이지와 글에 제목 을 자유롭게 사용하여 독자가 콘텐츠를 더 쉽게 팔로우할 수 있도록 하세요(특히 긴 페이지의 콘텐츠인 경우).

헤딩을 사용할 때 각 헤딩의 레벨이 1~6 인 것을 알 수 있습니다. 잘못된 헤딩 크기를 삽입하면 페이지 개요 에 강조 표시되므로 수정할 수 있습니다. 페이지 아웃라인을 보려면 목록 보기 를 열고 아웃라인 탭을 선택합니다.

잘못된 제목 크기를 강조하는 아웃라인 도구를 보여주는 이미지.
아웃라인에서는 잘못된 헤딩 크기가 강조 표시됩니다. 이 예시에서는 H2가 가장 적절합니다.

글꼴과 색상 선택하기

사이트를 읽기 어렵게 만드는 글꼴 스타일과 크기 를 피하세요. 또한 대비되는 색상, 즉 텍스트의 어두움과 배경의 밝기의 차이에 주의하세요.

색상 설정 에서 색상 대비 선택 항목이 불량하면 경고 메시지가 표시됩니다.

색상 설정은 텍스트와 배경에 대해 선택된 두 가지 유사한 파란색 음영과 그에 따른 대비 경고를 표시합니다.
대비가 잘 되지 않는 색상을 선택하면 편집기에서 알림이 표시됩니다

멀티미디어 콘텐츠에 대본 추가

사이트에 비디오 또는 오디오 콘텐츠가 포함되어 있다면 자막 추가 또는 녹취록 포함(화면에 보이는 음성, 소리 및 동작 문서화)을 고려하세요.

비디오와 오디오 콘텐츠가 자동 재생되지 않는 것이 가장 좋지만, 그렇게 할 수 없다면 볼륨을 일시 중지하거나 조정하는 옵션이 페이지에 명확하게 표시되어야 합니다.

접근성이 구현된 테마

워드프레스닷컴은 모든 테마 에 접근성이 구현되도록 권장합니다. 그러나 일부 테마는 접근성의 특정 측면을 손상시킬 수 있는 복잡성을 사이트에 추가하는 추가 기능을 포함할 수 있습니다.

이 점이 특별히 우려된다면 접근성을 보장하기 위해 테스트한 테마를 여기에서 찾을 수 있습니다: 접근성이 구현된 테마 . 접근성이 구현된 사이트에 어떤 테마를 사용할지 잘 모르겠다면, 여기 있는 테마 중 하나를 선택하세요.

접근성 가이드라인

워드프레스닷컴에서는 최대한 포괄적이고 접근하기 쉽도록 최선을 다하고 있습니다. 새로운 기능과 테마를 구축할 때 웹 디자인 표준과 모범 사례를 따릅니다. 웹 기술이 발전함에 따라 특정 문제를 해결할 새로운 방법을 끊임없이 찾고 있습니다.

워드프레스닷컴은 항상 접근성을 높이기 위해 최선을 다하고 있지만, ADA Section 508 과 같은 특정 규정을 준수하는 것은 궁극적으로 웹사이트 소유자의 책임입니다. 워드프레스닷컴은 접근성 높은 플랫폼을 제공하지만, 접근성 높은 웹사이트는 사이트 소유자가 이 페이지의 접근 가능성 팁을 얼마나 아는지에 따라 결정됩니다.

WAVE 웹 접근성 도구 같은 도구를 사용하여 이러한 가이드라인을 준수하는지 특정 테마를 테스트할 수 있습니다. 100% 규정을 준수해야 하는 사이트의 경우, 테마의 데모 페이지(예: Twenty Twenty-Four 또는 Twenty Twenty -Five )를 사용하여 원하는 테마를 테스트하는 것이 좋습니다.

Copied to clipboard!