WordPress 웹 사이트를 액세스 가능하게 만드는 방법

게시 됨: 2021-10-18

WordPress 접근성을 이해하고 적절하게 활용하는 것은 사이트의 유용성에 매우 중요합니다. 이 주제를 처음 접하는 경우 접근성은 말 그대로 누구나 액세스할 수 있고 무언가를 완전히 사용할 수 있는 정도입니다.

“접근성은 가능한 한 많은 사람들이 웹사이트를 사용할 수 있도록 하는 것입니다. 우리는 전통적으로 이것을 장애가 있는 사람들에 대한 것으로 생각하지만 사이트에 액세스할 수 있도록 하는 관행은 모바일 장치를 사용하는 사람들이나 느린 네트워크 연결을 사용하는 사람들과 같은 다른 그룹에도 혜택을 줍니다." (원천)

귀하의 사이트에 대한 접근성이 높을수록 더 많은 사람들이 사용할 수 있습니다. 사이트의 접근성이 낮거나 접근성이 우선시되지 않으면 일부 청중은 사이트에서 제공해야 하는 모든 정보를 얻는 데 방해를 받거나 완전히 차단됩니다.

이 게시물에서는 접근성이 중요한 이유, 의미, WordPress에 이미 액세스할 수 있는 정도, 사이트 빌더가 사이트에 액세스할 수 있도록 하는 방법, 사이트의 접근성을 테스트하는 방법에 대해 설명합니다.

시작하자!

웹사이트 접근성에 대한 비디오 가이드를 확인하십시오.

웹 접근성의 의미

웹 접근성이란 모든 사람이 사용할 수 있도록 웹사이트를 설계하고 개발하는 것을 의미합니다. 여기에는 웹 사이트를 이해하고 탐색하고 상호 작용하고 기여하는 방법이 포함됩니다.

웹 접근성을 완전히 정의하고 이해하는 좋은 방법은 일부 신화를 깨는 것입니다.

귀하의 사이트에 대한 접근성이 높을수록 더 많은 사람들이 사용할 수 있습니다. 간단합니다. 이 가이드에서 자세히 알아보세요. 트윗하려면 클릭

신화 1: 시각 장애인을 위한 것입니다.

완전히 액세스 가능한 웹사이트는 청각, 인지, 신경, 신체, 언어 및 시각 장애가 있는 사람들이 사용할 수 있어야 합니다. 장애인은 접근성 노력의 주요 초점입니다. 그러나 액세스 가능한 웹 사이트의 혜택을 받는 사람은 그들만이 아닙니다.

웹 접근성은 다음과 같은 모든 종류의 사람과 상황에 대한 사용자 경험을 향상시킵니다.

  • 더 작은 화면과 다양한 입력 모드로 모바일 장치를 사용하는 사람.
  • 노화로 인해 능력, 시력 또는 이동성이 제한된 사람들.
  • 다친 손과 같이 일시적인 어려움이 있는 사람.
  • 화면의 대비를 변경할 수 있는 조명이 있는 영역에서 사이트를 사용하는 사람.
  • 제한된 인터넷 연결 또는 대역폭으로 사이트에 액세스하는 사람.

통념 2: 그것은 유행인가 추세인가

최근 몇 년 동안 웹 접근성에 대해 점점 더 많이 들어보셨을 것입니다. 웹이 성장하고 웹에 의존하는 사람들이 늘어남에 따라 웹 접근성은 더욱 시급한 문제가 되고 있습니다. 그러나 그것은 단지 유행이 아닙니다.

“디지털 접근성은 전 세계 장애인의 시민권이자 인권입니다.”
Lainey Feingold, 장애 권리 변호사 및 작가

시간이 흐르고 웹의 사용이 보편화됨에 따라 광범위한 웹 접근성에 대한 요구도 증가하고 있습니다. WCAG 지침에 따라 웹사이트에 완전히 액세스할 수 없는 경우 개인은 웹사이트 개발자 또는 소유자에 대해 법적 조치를 취할 수 있습니다.

사람들이 이것을 얼마나 심각하게 받아들이고 있는지 이해하기 위해 웹 접근성과 관련된 소송의 수를 살펴봅니다. 2017년부터 2018년까지 소송 건수는 거의 3배 가까이 증가했습니다. 그 이후로 그 숫자는 연간 평균 2,345건의 소송을 제기했습니다. 2020년 내내 COVID-19 팬데믹 기간에도 연방 법원에서 제기된 ADA Title III 웹사이트 접근성 소송 건수는 전년 대비 12%로 증가했습니다.

접근성 관련 소송 건수를 보여주는 차트는 해가 갈수록 증가하고 있습니다.
접근성 관련 소송 건수는 해가 갈수록 증가하고 있습니다.

웹 접근성이 유지됩니다. 소프트웨어와 웹 사이트를 개발할 때 웹 접근성을 프로세스에 통합해야 합니다. 이것은 아무도 고소당하는 것을 좋아하지 않기 때문이 아니라 인터넷이 모든 개인의 필요를 충족시켜야 하기 때문에 필요합니다.

오해 3: 접근성을 완전히 자동화할 수 있다

접근성이 왜 중요한지 이해하고 우선 순위를 지정하지 않으면 결과가 있을 수 있음을 이해하고 나면 웹사이트가 WCAG를 준수하는지 확인하기 위해 서두를 수 있습니다.

웹 접근성에 대한 가장 인기 있는 신화 중 하나는 간단한 플러그인을 다운로드하거나 손가락을 튕기는 것만으로 사이트에 완전히 액세스할 수 있는 소프트웨어를 설치할 수 있다는 것입니다. 이것은 단순히 불가능합니다.

11yproject.com에 따르면 접근성 문제는 객관적이거나 주관적입니다. 객관적인 문제는 코드로 감지할 수 있고 주관적인 문제는 사람의 판단이 필요합니다. 코드는 후자의 범주에 속하는 문제를 결코 정확하게 해결할 수 없으며 그렇게 하려는 시도는 종종 득보다 실이 더 많이 발생합니다.

“오버레이 솔루션은 우리가 알고 있는 것처럼 처음에 WCAG 문제의 ~30%만 감지할 수 있는 자동화된 소프트웨어 솔루션입니다. 이는 WCAG가 미묘하고 해석적이기 때문입니다. 기계는 이것을 잘하지 못합니다.” (원천)

접근성은 위험 회피가 아니라 모든 사용자에게 최적화된 경험을 제공하는 것임을 기억하십시오.

웹 콘텐츠 접근성 지침

Web Accessibility Initiative는 사이트가 규정을 준수하고 완전히 액세스할 수 있는지 확인하는 데 도움이 되는 WCAG(웹 콘텐츠 접근성 지침) 집합을 개발했습니다. 웹 사이트를 디자인, 개발 또는 지원하는 경우 이러한 지침에 매우 익숙해야 합니다.

접근성은 개발자뿐만 아니라 디자이너, 마케터, 콘텐츠 작가, 프로젝트 관리자 등을 위한 초점입니다. 접근성은 계획에서 출시에 이르기까지 전체 사이트 구축 프로세스에서 우선 순위가 되어야 합니다. 또한 웹사이트가 게시된 후에도 웹사이트의 접근성을 지속적으로 개선해야 합니다.

WordPress에 액세스할 수 있는 방법

이것은 많은 사람들이 WordPress를 사이트 구축 옵션으로 고려할 때 묻는 큰 질문 중 하나입니다. 이미 액세스 가능한 정도와 WordPress에 액세스할 수 있게 하려면 얼마나 많은 작업을 해야 합니까? 이에 대한 흑백의 답은 없기 때문에 워드프레스가 이미 접근 가능한 정도를 살펴보자.

WordPress의 접근성이 좋은 곳

좋은 소식은 시간이 지남에 따라 WordPress가 점점 더 접근하기 쉬워졌다는 것입니다. 각 릴리스는 접근성을 염두에 두고 작은 단계와 발전을 이루었습니다. 접근성이 더 많은 사람들의 마음에서 더 큰 주제가 됨에 따라 더 많은 사람들이 우선 순위를 지정할 수 있습니다.

WordPress 접근성 핸드북에는 모범 사례, 테스트, 도구, 테마 등에 대한 여러 페이지의 정보가 포함되어 있습니다.
워드프레스 접근성 핸드북.

또한 WordPress 커뮤니티의 많은 사람들이 이러한 주제에 대해 열정적이며 목소리를 내고 있습니다. 각각의 새로운 기본 WordPress 테마는 접근성을 높이기 위한 추가 단계를 수행합니다. 개발자는 항상 새로운 보조 도구를 제공하고 WordPress 접근성에 대한 가이드와 기사를 작성하고 있습니다. 결과적으로 WordPress 접근성 여정에서 당신은 결코 혼자가 되지 않을 것입니다.

커뮤니티 구성원으로부터 직접 WordPress 및 접근성에 대해 자세히 알아보려면 WordPress.tv를 방문하여 접근성에 대한 대화를 시청하세요.

WordPress가 마크를 놓친 곳

최근의 발전에도 불구하고 WordPress는 항상 100% 즉시 액세스할 수 있는 것은 아닙니다. 각 WordPress 릴리스는 부족한 부분에 대한 몇 가지 비판에 직면해 있습니다. 2019년 초 WPCampus는 당시 최신 Gutenberg 릴리스에 대한 광범위한 감사를 수행했습니다. 이와 같은 작업은 매우 중요합니다. 감사 이후 접근성과 관련된 116개의 문제가 해결되었습니다.

장애가 있는 콘텐츠 제작자가 WordPress로 게시하는 것은 어려울 수 있습니다. 접근 가능한 모든 디자인 및 개발 측면을 자동화하는 것은 불가능하기 때문에 누구나 WordPress로 접근할 수 없는 웹 페이지를 만들 수 있습니다.

“WordPress의 프론트 엔드는 수년 동안 있었던 것과 거의 같은 위치에 있습니다. 완벽하게 액세스할 수 있지만 사이트를 구축하는 개발자에 전적으로 달려 있습니다. 열악한 테마 또는 액세스할 수 없는 플러그인이 모든 차이를 만듭니다. 관리자는 계속해서 개선되었습니다. 구텐베르그 편집기를 더 나은 접근성으로 옮기는 것은 힘든 여정이었지만 진전이 이루어지고 있습니다. 즉, 새로운 인터페이스 구성 요소로 접근성 퇴보를 피하기 위한 끊임없는 전투입니다.” (원천)

WordPress 개발자 또는 디자이너로서 이것이 의미하는 바는 무엇입니까? WordPress로 시작하면 완전히 액세스 가능한 웹사이트로 가는 여정이 조금 더 짧아집니다. 그러나 결승점에 도달하려면 아직 가야 할 거리가 있습니다.

액세스 가능한 WordPress 웹 사이트를 만드는 방법

이제 모든 사용자가 WordPress 웹 사이트에 액세스할 수 있도록 하기 위해 취할 수 있는 단계를 살펴보겠습니다.

어떤 일이 있어도 접근성을 프로젝트 마지막에 해결해야 할 과제로 남겨두지 마십시오. 프로세스의 맨 처음부터 통합되는 우선 순위여야 합니다. 그리고 사이트가 시작되면 지속적인 목표가 되어야 합니다.

100% 접근성을 보장하기 위해 따르거나 자동화할 수 있는 단일 체크리스트는 없습니다. 대부분의 작업은 플러그인, 테마 및 콘텐츠에 따라 다릅니다.

접근 가능한 웹사이트를 만드는 것은 안전한 건물을 짓는 것과 같습니다. 물론 지침이 있지만 목표를 달성하려면 개인의 관심, 유지 관리 및 사려 깊은 개조가 필수적입니다.

접근성 디자인의 모범 사례

유형별로 분류된 WordPress 웹 사이트의 접근 가능한 디자인에 대한 몇 가지 모범 사례부터 시작하겠습니다. 이 정보는 접근성 교육을 위한 견고한 토대가 되어야 합니다.

이미지

사이트의 모든 이미지는 모든 사용자가 액세스할 수 있어야 합니다. 모든 사용자가 이미지를 볼 수 있는 것은 아니기 때문에 일부 사용자는 시각적 요소를 이해하기 위해 보조 기술을 사용할 수 있으므로 사이트는 해당 기술로 작업할 준비가 되어 있어야 합니다.

대체(또는 "alt") 텍스트는 이미지에 첨부하는 서면 설명입니다. 스크린 리더는 이미지를 볼 수 없는 게스트에게 해당 설명을 소리 내어 읽어줍니다. 페이지에서 유용한 정보를 제공하는 모든 이미지에는 대체 텍스트를 사용해야 합니다. 여기에는 사진에서 아이콘, 인포그래픽에 이르기까지 모든 것이 포함됩니다.

WordPress.com의 이 예에서 홈페이지의 웹 사이트 예는 대체 텍스트 "Picture of easy to create 홈페이지"와 함께 제공됩니다.
대체 텍스트 데모.

유일한 예외는 이미지가 순전히 "장식"으로 간주되는 경우입니다. 페이지 자체에 표시되는 텍스트를 표시하는 배경 이미지, 구분선 또는 이미지에는 반드시 대체 텍스트가 필요하지 않습니다.

대체 텍스트를 작성할 때 이미지를 있는 그대로 설명하지 마십시오. 대신 페이지의 컨텍스트 내에서 이미지가 의미하는 바를 전달하십시오. 다음은 훌륭한 대체 텍스트를 작성하는 데 도움이 되는 몇 가지 좋은 지침입니다.

  • 짧고 간단한 것이 가장 좋습니다.
  • 스크린 리더는 이것이 이미지라는 것을 전달할 것이므로 대체 텍스트에서 "이것은 ...의 이미지입니다."라고 말하지 마십시오.
  • 이미지가 링크인 경우 대체 텍스트는 사용자가 해당 이미지를 선택하면 어떻게 되는지 설명해야 합니다.
  • 대체 텍스트에는 이미지에 나타나는 모든 텍스트가 포함되어야 합니다. 캡션과 같이 동일한 텍스트가 이미지 근처에도 나타나는 경우는 예외입니다.

WordPress 웹사이트의 이미지에 대체 텍스트를 추가하는 것은 생각보다 쉽습니다. 이미지 캡션을 추가할 위치에 이 텍스트를 추가할 수 있습니다.

미디어 라이브러리 를 열고 편집할 이미지를 선택합니다. 해당 이미지에 대한 설정 화면이 열립니다. 대체 텍스트 필드에 대체 텍스트를 추가한 다음 저장 을 클릭합니다.

대체 텍스트의 위치는 WordPress 미디어 라이브러리에 명확하게 표시되어 있으며 언제든지 편집할 수 있습니다.
대체 텍스트 필드.

그림 물감

접근 가능한 사이트를 디자인할 때 적절한 색상 대비를 제공하는 것이 필수적입니다. 색상 대비가 좋지 않으면 시력이 좋지 않은 사용자, 색맹 사용자 또는 특정 장치를 사용하는 사용자와 같이 다양한 경우에 사이트의 가독성에 영향을 줄 수 있습니다. 이미지, 텍스트 및 버튼과 같은 요소는 모두 적절한 색상 대비가 필요합니다.

색상 대비는 서로 마주하거나 매우 가까이 배치할 때 밝거나 어두운 색상이 나타나는 정도를 나타냅니다. 예를 들어 흰색 배경의 검은색 텍스트는 흰색 배경의 노란색 텍스트(1.08:1)보다 색상 대비(21:1)가 훨씬 높습니다. WCAG 2.0 AA는 일반 텍스트의 경우 최소 4.5:1의 비율을 요구하고 더 큰 텍스트의 경우 3:1의 비율을 요구합니다(굵게 18픽셀 또는 표준 24픽셀 이상).

정확히 무엇을 의미합니까? 색상이 잘 어울리는지 확인하는 가장 간단한 방법은 WebAIM 대비 검사기와 같은 대비 테스트 도구에 색상을 삽입하는 것입니다. 온라인에는 수많은 무료 검사기 도구가 있습니다.

색상 테스트에 대해 자세히 알아보려면 테스트 섹션을 확인하세요.

점점 더 많은 색상 조합을 테스트할수록 어떤 색상 조합이 효과가 있고 어떤 색상 조합이 효과가 없는지 육안으로 더 잘 판단할 수 있습니다.

WebAIM 대비 검사기 도구의 데모.
WebAIM 대비 검사기.

또한 색상을 주요 구별 요소로 사용하지 않도록 해야 합니다. 예를 들어, 많은 사이트에는 주변 본문 텍스트와 색상이 다른 링크가 있습니다. 그러나 사용자가 어떤 이유로 색상을 보기 어려운 경우 연결된 단어와 연결되지 않은 단어를 구별하는 것이 불가능할 수 있습니다. 색상을 사용하여 링크를 장식하지만 텍스트 아래에 밑줄을 추가하여 링크에 액세스할 수 있도록 합니다.

텍스트

우리가 웹에서 경험하는 대부분은 텍스트입니다. 우리는 웹사이트를 사용하여 기사, 조리법, 이야기 등을 읽습니다. 당신은 지금 이 포스트를 읽고 있습니다! 결과적으로 텍스트는 눈으로 읽든 귀로 읽든 모든 독자에게 최적화되어야 합니다.

접근성에 대해 이야기할 때 텍스트를 논의하는 두 가지 주요 방법은 글꼴과 크기입니다.

접근 가능한 글꼴은 크고 작은 크기로 읽기 쉽습니다. Tahoma, Calibri, Helvetica, Arial, Verdana, Times New Roman, Arvo, Museo Slab 및 Rockwell과 같은 글꼴은 모두 액세스 가능한 선택입니다. 난독증이 있는 독자는 많은 세리프 글꼴을 포함하여 특정 글꼴을 읽는 것이 어려울 수 있습니다. 본문 텍스트에 대한 산세리프 글꼴은 더 ​​안전한 선택입니다. 텍스트가 크고 드문 드문 경우가 아니면 필기체나 필기체와 같은 표시 글꼴을 사용하지 않는 것이 가장 좋습니다.

글자의 차이로 인해 단어를 더 쉽게 읽을 수 있는 접근 가능한 글꼴의 예.
접근 가능한 글꼴을 사용하면 글자의 차이로 인해 단어를 더 쉽게 읽을 수 있습니다.

글꼴 크기는 접근성에 매우 중요합니다. 접근 가능한 글꼴 크기 조정과 관련하여 몇 가지 경험적 규칙에 대해 논의해 보겠습니다.

기본 글꼴은 9pt 또는 12px 이상이어야 합니다. 12pt 또는 16px를 권장합니다. WCAG 가이드라인에 따르면 텍스트는 200%로 확대할 때 읽을 수 있어야 합니다. 픽셀이나 포인트 대신 백분율이나 em을 사용하여 글꼴 크기를 설정하는 것이 좋습니다. 다양한 글꼴 두께를 사용하는 것은 좋지만 텍스트가 가벼운 글꼴을 사용하는 경우 볼 수 있을 만큼 충분히 커야 합니다.

이것은 접근성을 염두에 두고 설계하는 방법의 전부가 아닙니다. 그러나 어디서부터 시작해야 하는지 아는 것이 중요합니다. 접근성을 위한 디자인에 대해 더 자세히 읽고 싶다면 다음 리소스를 확인하세요.

  • W3C 웹 디자인 및 응용 프로그램
  • 디자이너를 위한 웹 접근성 입문서
  • 접근성을 위한 디자인은 그렇게 어렵지 않습니다
  • ADA 준수 액세스 가능한 웹 디자인의 10가지 예
  • 디자인의 접근성

접근성 개발의 모범 사례

웹 사이트 또는 보완 소프트웨어(테마 및 플러그인 등)를 구축할 때 접근성을 위해 염두에 두어야 할 중요한 사항이 있습니다. 이 중 일부는 디자인과 겹치지만 다음 섹션에서는 주로 사이트 작동 방식과 사용자가 사이트와 상호 작용하는 방식에 중점을 둡니다.

인터랙티브 요소

사용자는 어떤 일이 있어도 비교적 쉽게 웹 사이트와 상호 작용하고 웹 사이트를 사용할 수 있어야 합니다. 여기에는 이미지를 즐기고 텍스트를 읽는 것뿐만 아니라 메뉴, 양식, 버튼 및 비디오와 상호 작용하는 것이 포함됩니다.

사이트를 구축할 때 모든 대화형 요소를 쉽게 식별할 수 있는지 확인하십시오. 머리글에서 바닥글까지 모든 탐색 메뉴는 키보드 컨트롤과 함께 사용할 수 있어야 합니다. hover , focusclick 에 대한 링크 및 버튼의 모양이 변경되어야 합니다.

클릭하지 않은 일반 버튼의 스타일은 마우스가 버튼 위에 있을 때와 클릭되었을 때의 버튼과 달라야 합니다.
버튼 스타일.

사이트의 페이지 탐색은 일관되고 명확해야 합니다. 탐색 링크의 이름을 지정하고 스타일을 지정하고 위치를 지정하는 방법은 매우 중요합니다. 사려 깊은 탐색 경로와 명확한 제목을 통해 사용자는 자신 있게 콘텐츠와 상호 작용할 수 있습니다.

독자들이 우리 블로그를 쉽게 탐색할 수 있도록 Kinsta가 이동 경로를 사용하는 방법.
Kinsta는 탐색경로를 활용하여 독자가 블로그를 보다 쉽게 ​​탐색할 수 있도록 합니다.

웹사이트에 한두 가지 양식이 있을 가능성이 있습니다. 액세스할 수 없는 양식이 얼마나 많은지 알면 놀랄 수 있습니다. 양식 요소에는 필드 왼쪽이나 위쪽에 연결된 레이블이 포함되어야 합니다. (확인란과 라디오 상자는 오른쪽으로 이동할 수 있습니다.) 사용자에게 각 양식 필드가 무엇을 위한 것인지 명확해야 합니다.

WordPress 사이트를 위한 빠르고 안정적이며 완전히 안전한 호스팅이 필요하십니까? Kinsta는 이 모든 것과 WordPress 전문가로부터 연중무휴 24시간 세계적 수준의 지원을 제공합니다. 우리의 계획을 확인하십시오

텍스트 필드의 테두리를 사용하면 양식에 더 쉽게 액세스할 수 있습니다. 테두리를 제거하면 어떤 필드가 어떤 필드인지 더 혼란스러울 수 있습니다.
텍스트 필드의 테두리를 사용하면 양식에 더 쉽게 액세스할 수 있습니다.

사이트에 GIF, 슬라이더, 캐러셀, 비디오 또는 음악과 같이 자동으로 재생되는 콘텐츠가 있는 경우 사용자가 애니메이션이나 사운드를 중지할 수 있도록 하는 시각적 컨트롤이 있어야 합니다. 요소를 모두 중지, 일시 중지 또는 숨기는 옵션을 제공하는 것이 가장 좋습니다.

웹 접근성 개발에 대해 자세히 알아보려는 개발자라면 W3C에서 직접 이 팁을 확인하십시오.

워드프레스 테마

DIY 웹사이트 빌더라면 접근 가능한 테마를 선택하여 이 게시물에서 설명하는 많은 작업을 수행할 수 있습니다. 개발자는 프로젝트에서 테마의 우선 순위를 지정하기 위해 테마에 액세스할 수 있도록 하는 요소를 이해하는 것이 중요합니다.

WordPress 테마는 웹사이트의 모양을 제어합니다. 많은 테마가 색 구성표 및 글꼴 모음과 함께 미리 패키지로 제공됩니다. 해당 색상과 글꼴이 위에 설명된 요구 사항을 충족하는지 확인하는 것이 중요합니다. 많은 테마가 "완전히 액세스 가능"하다고 마케팅하지만 항상 그런 것은 아닙니다. 테마에 액세스할 수 있는지 여부를 확인하려면 자체 테스트를 사용하세요.

WordPress.com의 접근성 팀은 지금 바로 사용할 수 있는 WordPress 저장소에 92개의 무료 테마 목록을 준비했습니다.

접근 가능한 테마를 구축할 때는 처음부터 WCAG 요구 사항을 숙지해야 합니다. 개발 중에 다루어야 하는 공통 영역은 다음과 같습니다.

  • 사전 설정된 색상 팔레트 내에서 적절한 색상 대비
  • 키보드로 쉽게 웹사이트를 탐색할 수 있는 기능
  • 적절한 ARIA 역할 및/또는 HTML5 랜드마크를 사용하여 스크린 리더 지원 경험 보장
  • 적절한 HTML 시맨틱 마크업
  • 페이지에서 반복되는 ID 피하기
  • 사용자가 자동 ​​동작을 중지하거나 제어할 수 있도록 허용

테마 생성을 시작할 때 쉽게 참조할 수 있도록 WordPress 접근성 지침을 북마크에 추가하십시오.

워드프레스 플러그인

WordPress 플러그인을 사용하면 WordPress 웹사이트에 플러그 앤 플레이 기능을 추가할 수 있습니다. WordPress 접근성 플러그인에는 두 가지 유형이 있습니다. 액세스 가능한 웹 사이트를 구축하고 사용자가 기존 사이트에 액세스할 수 있도록 하는 플러그인입니다.

"원클릭 액세스" 또는 "자동 액세스"와 같은 보장을 제공하는 WordPress 플러그인에 유의하십시오. 이러한 것들은 불가능합니다. 플러그인은 모든 작업을 수행하는 마술 지팡이가 아니라 접근성 목표를 달성하는 데 도움이 되는 도구입니다. 때로는 플러그인이 접근성 노력을 방해할 수도 있으므로 주의해서 진행하십시오!

접근성 문제를 개선, 모니터링 또는 수정할 것을 약속하는 접근성 중심 플러그인이 많이 있습니다. 그들은 사이트를 감사하고 개선해야 할 부분을 알려줄 수 있습니다. 또는 사이트에서 액세스 가능한 경험을 더 쉽게 만들 수 있도록 프런트엔드 도구를 제공할 수 있습니다.

이들 중 일부는 매우 유용합니다. 그러나 다른 사람들은 거짓 약속을 합니다. 커밋하기 전에 항상 이와 같은 플러그인을 철저히 조사하십시오.

일부 플러그인은 퀴즈 및 슬라이더와 같은 대화형 콘텐츠를 만듭니다. 앞에서 설명한 것처럼 이러한 요소는 완전히 액세스할 수 있는지 확인하기 위해 특별한 주의와 테스트가 필요합니다. 라이브로 푸시하기 전에 항상 스테이징 또는 개발 사이트에서 대화형 플러그인을 철저히 테스트하십시오.

양식 플러그인에 대해서도 마찬가지입니다. 불행히도 많은 사람들이 접근성 문제를 가지고 있습니다. 이 경우 사용자 정의 코딩된 양식이 좋은 대안입니다.

플러그인의 인기 있는 카테고리는 페이지 빌더 플러그인입니다. 이는 강력하고 정교한 끌어서 놓기 디자인을 빠르게 구축할 수 있도록 하는 데 유용합니다. 그러나 종종 해결하는 것보다 더 많은 접근성 문제가 발생할 수 있습니다. 이 문제에 대한 단일 수정 사항은 없으므로 디자인을 단순하게 유지하고 모든 요소를 ​​테스트하여 접근성을 확인해야 합니다.

접근성 선언문

접근성 선언문은 웹사이트에서 내부 정책, 접근성 목표, 장애가 있는 사람들과의 작업에 관한 과거의 성공을 알리는 페이지입니다.

다음과 같은 이유로 WordPress 웹사이트에서 접근성 설명을 생성하고 게시해야 합니다.

  • 귀하가 접근성과 사용자에게 관심을 갖고 있음을 사용자에게 보여주기 위해
  • 콘텐츠의 접근성에 대한 정보를 제공하기 위해
  • 접근성 및 사회적 책임에 대한 헌신을 보여주기 위해

W3C에서 제공하는 이러한 지침에 따라 또는 접근성 문 생성기를 사용하여 자신만의 접근성 문을 작성할 수 있습니다.

WordPress 사이트 접근성을 테스트하는 방법

접근성은 오른쪽 버튼을 누른 다음 걸어가는 것이 아닙니다. 테스트는 사이트에 완전히 액세스할 수 있는지 확인하는 데 중요한 부분입니다. 자동 및 수동 테스트는 모두 귀하가 모든 기반을 다뤘는지 확인하는 데 도움이 될 수 있습니다.

자동 테스트 수행 방법

자동화된 테스트는 어디서부터 시작해야 하는지 측정하는 데 도움이 됩니다. 접근성이 처음이거나 어디서부터 시작해야 할지 모르겠다면 자동 테스트 및 평가로 시작하세요.

대부분의 자동화된 테스트는 색상 대비 불량, 대체 텍스트 누락, 빈 링크, 구조적 요소 문제 등을 식별합니다. 이러한 테스트를 사용하여 해결할 문제 목록을 생성할 수 있습니다. 이와 같은 테스트는 육안으로는 잘 보이지 않지만 일부 사용자에게는 상당히 중요한 코드 기반 오류를 찾는 데 특히 유용합니다.

사용할 수 있는 무료 접근성 테스트의 한 예는 WebAim 도구입니다. 전체 웹 페이지를 검사하고 오류 목록을 생성합니다. 페이지에서 해당 오류가 발생한 위치를 정확히 보여주기도 합니다.

WebAim 도구에 URL을 삽입하면 오류 요약과 개별 탭으로 분류된 항목이 표시됩니다.
오류 요약을 보여주는 WebAim 도구.

특정 문제에 도움이 되는 수많은 개별 접근성 도구를 찾을 수 있습니다. 예를 들어, 디자인을 시작하기 전에 대비 검사기를 사용하여 팔레트의 색상이 잘 어울리는지 확인하십시오.

자동화된 테스트는 완벽하거나 완벽하거나 수동 테스트를 대체할 수 없다는 점을 기억하십시오.

수동 테스트 수행 방법

WordPress 접근성은 실제 사람의 사용 사례에 관한 것이기 때문에 실제 사람이 사이트에 액세스할 수 있는지 여부에 대한 최종 결정을 내리는 사람이어야 합니다. 결과적으로 수동 테스트를 위해 시간과 리소스를 예약하는 것은 매우 중요합니다.

그렇다면 수동 테스트는 어떻게 수행합니까? 다음은 화려하거나 값비싼 도구나 프로그램 없이 사이트에 액세스할 수 있는 정도를 테스트하기 위해 수행할 수 있는 몇 가지 작업입니다.

  1. 마우스 버리기: 키보드 키만 사용하여 웹사이트의 모든 기능을 합리적이고 쉽게 탐색할 수 있는지 확인하십시오. 여기에는 섹션 간 이동, 메뉴 액세스, 페이지 간 이동, 페이지 아래로 건너뛰기, 링크 및 양식과의 상호 작용이 포함됩니다.
  2. 화면 판독기 사용: 가시성이 낮거나 나쁜 사람의 입장이 되어 보십시오. 스크린 리더 앱이나 웹사이트를 사용하고 사이트의 콘텐츠를 검토하여 소리 내어 읽을 때 여전히 의미가 있고 부드럽게 들리는지 확인합니다.
  3. 다양한 환경에서 사이트 테스트: 공용 WiFi가 있는 곳으로 이동하여 고품질 인터넷 연결 없이 사이트가 제대로 로드되는지 확인합니다. 연결 불량으로 인해 지연되거나 완전히 사라지는 사이트 영역을 기록해 두십시오.
  4. 확대/축소 확대: 브라우저에서 사이트를 열고 브라우저 설정을 사용하여 200% 확대합니다. 이 설정에서 사이트를 계속 사용하고 탐색하고 참여할 수 있습니까? 사라지거나 잘리는 콘텐츠가 있습니까?
  5. 상호 작용에 중점: 비디오, 양식 및 버튼과 같은 상호 작용 요소를 테스트하는 데 많은 시간을 할애하십시오. 링크와 양식 필드는 항상 윤곽선, 밑줄, 특수 커서로 초점을 맞춰야 합니다.
  6. 대체 태그를 다시 확인하십시오. 이미지에 대체 이미지가 첨부되었는지 여부가 확실하지 않은 경우 요소 검사 도구를 사용하여 확인하십시오.
  7. 다르게 생각 하십시오. 사이트의 모든 이미지가 사라진 경우에도 누군가가 이 이미지를 사용할 수 있습니까? 사이트의 모든 색상이 갑자기 흑백으로 바뀌면 사용성에 어떤 영향을 줍니까? 장식 요소가 어떤 식으로든 영향을 받는 경우 사이트의 필수 부분이 계속 작동하는지 확인하십시오.

확실하지 않은 경우 수동 접근성 테스트를 제공하는 회사에 문의하십시오. 접근성, 웹 디자인 및 개발 전문가가 수동 검토 작업을 신속하게 수행하고 작업이 필요한 영역을 정확히 알려줄 수 있습니다.

실제 청중은 최고의 리소스 중 하나라는 것을 잊지 마십시오. 사이트에 사용자가 접근성 피드백을 제공할 수 있는 공간을 확보하세요. 누군가가 귀하의 사이트를 사용하는 데 어려움을 겪고 있다면 피드백 수집에 대한 귀하의 노력을 통해 해당 경험에 대해 듣고 문제를 수정할 수 있다는 점을 분명히 해야 합니다.

귀하의 웹사이트는 모든 방문자가 액세스할 수 있습니까? 이 가이드에서 접근성을 테스트하는 방법에 대해 자세히 알아보십시오 ️ 트윗하려면 클릭

요약

인터넷은 우리 일상 생활에서 가장 중요한 단일 도구 중 하나가 되었습니다. 엔터테인먼트 또는 필수 정보 검색 여부에 관계없이 모든 사람이 자유롭게 액세스할 수 있어야 합니다. 귀하의 사이트는 웹상의 형평성에 대해 설정된 표준을 충족할 책임이 있습니다.

이러한 지침의 필요성을 이해하는 것은 중요하고 지속적인 변화를 위한 첫 번째 단계입니다. 접근 가능한 사이트를 구축한다는 것은 장기적으로 더 많은 사람들이 귀하의 웹사이트가 제공하는 혜택을 누릴 수 있다는 것을 의미합니다.

WordPress 접근성에 대해 궁금한 점이 있습니까? 의견 섹션에서 알려주십시오!