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

이 게시물은 WordPress 접근성을 전문으로 하는 인증된 B Corporation인 Equalize Digital의 CEO인 Amber Hinds가 게스트로 작성했습니다. Equalize Digital 및 해당 서비스에 대해 자세히 알아보려면 회사 웹 사이트를 방문하십시오.

전 세계 수백만 명의 사람들이 인터넷 사용 방식에 영향을 미치는 장애를 가지고 있으며, 쉬운 온라인 쇼핑, 음식 주문, 심지어 원격 의료 서비스에 대한 필요성을 증가시킨 팬데믹 이후 웹 접근성은 그 어느 때보다 중요합니다.

이 웹 접근성 가이드에서는 접근성이 무엇인지, 왜 중요한지, 테스트를 통해 일반적인 문제를 식별하는 것을 포함하여 WordPress 웹사이트를 액세스 가능하게 만드는 방법에 대해 설명합니다.

이 기사에서는 다음을 다룰 것입니다.

• 웹접근성이란?
• 접근성이 중요한 이유
• 몇 가지 일반적인 접근성 문제는 무엇입니까?
• 접근성을 위한 WordPress 웹사이트 테스트
• 웹 사이트를 액세스 가능하게 유지

웹 접근성이란?

간단히 말해서 액세스 가능한 웹 사이트는 일반적인 키보드 및 마우스 설정을 통해 웹과 상호 작용할 수 없는 사람과 다양한 지적 또는 신체적 차이가 있는 사람을 포함하여 모든 사람이 사용할 수 있는 웹 사이트입니다.

장애가 있는 사람들이 사용하고 이해할 수 있도록 웹 사이트에 특정 기능을 구축해야 합니다. 청각, 시각, 인지, 운동 또는 학습 장애를 사용할 수 있도록 조정 및 웹 사이트 수정이 필요합니다. 장애가 있는 사람들은 상황에 따라 스크린 리더와 같은 다양한 보조 장치를 사용하여 웹 사이트에 액세스합니다.

웹 디자이너와 개발자는 웹사이트의 콘텐츠와 기능이 인식 가능하고 작동 가능하며 이해 가능하고 견고함(POUR)을 보장해야 합니다. 즉, 모든 사람이 모든 장치에서 콘텐츠와 기능에 액세스하고 이해할 수 있습니다.

웹 사이트의 접근성을 높이는 기능의 몇 가지 예는 다음과 같습니다.

• 비디오 및 오디오 파일의 자막 및 대본
• 이미지의 대체 텍스트
• 키보드 탐색을 지원하는 링크 건너뛰기
• 텍스트를 더 읽기 쉽게 만드는 적절한 색상 대비

접근성이 중요한 이유

웹사이트 접근성은 웹을 사용하는 모든 사람에게 영향을 미칩니다. 귀사 또는 귀사 고객의 웹사이트에 액세스할 수 있는 경우 모든 사람이 능력에 관계없이 온라인 정보, 필수품, 엔터테인먼트, 쇼핑 등에 동등하게 액세스할 수 있습니다.

그러나 웹 사이트 접근성은 단지 좋은 업보에 관한 것이 아닙니다. 또한 검색 엔진 순위, 신규 판매 및 웹사이트 방문자, 법적 문제, 브랜드 이미지에 실질적인 영향을 미칩니다.

검색 엔진 순위

접근성을 수정하면 웹 사이트의 검색 엔진 순위를 높일 수 있습니다. 이미지의 대체 텍스트 및 제목이 있는 적절하게 구조화된 콘텐츠와 같은 많은 접근성 기능은 접근성과 검색 엔진 최적화(SEO) 모두에 도움이 됩니다. 검색 결과 페이지에서 더 높은 순위를 차지하면 신규 클라이언트 또는 고객의 가시성을 높여 웹 사이트 트래픽, 전환, 블로그 또는 뉴스레터 구독자 등을 늘릴 수 있습니다.

판매 증가

CDC는 2018년 현재 미국인 4명 중 1명이 장애가 있다고 밝혔습니다. 장애인 미국인들은 매년 2,000억 달러 이상을 온라인 재량 지출로 지출했습니다. 접근성 기능을 통해 더 많은 사람들이 웹사이트를 찾고 사용할 수 있으므로 새로운 판매, 전환 및 반복 고객의 기회가 늘어납니다. 오늘날 세계에서 많은 웹사이트에 액세스할 수 없는 경우 액세스 가능한 모든 웹사이트는 경쟁에서 우위를 점할 것입니다.

법적으로 필요합니다

모든 웹사이트는 미국 장애인법(ADA)에서 정한 웹 접근성 표준을 충족해야 합니다. ADA에 따라 웹사이트를 공공 시설의 장소로 설정하는 법적 판례가 설정되었습니다. 즉, 본질적으로 디지털 매장인 비즈니스 웹 사이트는 벽돌 및 박격포 비즈니스의 건물에 액세스할 수 있어야 하는 것과 같은 방식으로 액세스할 수 있어야 합니다.

지역, 주 및 연방 정부 기관 웹사이트와 연방 자금 지원을 받는 조직 및 프로젝트를 위한 모든 웹사이트는 섹션 508의 기준도 충족해야 합니다. 또한 웹사이트에 액세스할 수 있도록 요구하는 다양한 주 및 국제법이 있습니다.

웹 사이트가 이 지침에 제시된 접근성 요구 사항을 충족하지 않는 경우 조직은 소송 ​​또는 경우에 따라 정부 벌금의 위험에 처할 수 있습니다. Usablenet에 따르면 2020년 미국에서 3,550건의 웹사이트 접근성 관련 소송이 제기되었습니다. 법적 준수를 유지하는 것은 비즈니스 수행의 중요한 부분이며 액세스 가능한 웹 사이트를 갖는 것은 비즈니스가 법적 의무를 충족할 수 있는 한 가지 방법입니다.

브랜드 이미지

WordPress 웹사이트의 접근성을 높이기 위한 조치를 취하는 기업 및 비영리 단체는 사회적 책임을 실천하고 있음을 보여주고 인터넷을 모든 사람을 위한 장소로 만들고 싶다고 단언합니다. 접근성에 대한 조직의 노력은 사람들에게 그들이 매우 인간적인 방식으로 관심을 갖고 있다는 것을 보여주며, 이는 충성도를 구축하고 브랜드 이미지를 높일 수 있습니다.

일반적인 접근성 문제는 무엇입니까?

우리 회사인 Equalize Digital은 기업, 비영리 단체 및 정부 기관의 웹사이트에서 접근성 감사를 수행하는 접근성 컨설팅 회사입니다. 모든 테스트에서 모든 웹사이트에서 반복되는 많은 접근성 문제를 확인했습니다. 이러한 일반적인 문제는 비교적 해결하기 쉬운 문제이지만 일반적으로 개발자, 디자이너 및 콘텐츠 제작자가 간과합니다.

구축하거나 관리하는 웹 사이트에 액세스할 수 있는지 확인하려면 먼저 다음 문제를 확인하세요.

누락되거나 품질이 낮은 대체 텍스트

대체 텍스트는 스크린 리더가 시각 장애인에게 이미지의 내용이나 목적을 설명하는 데 사용하는 것입니다. 대체 텍스트가 비어 있으면 화면 판독기가 전체를 건너뛰거나 대신 이미지의 파일 이름을 읽을 수 있습니다. 이는 파일 이름이 숫자 문자열이거나 모양을 설명하지 않는 경우 도움이 되지 않습니다. 적절한 대체 텍스트가 없으면 맹인 및 시각 장애가 있는 사용자는 이미지에 대한 컨텍스트나 이해를 할 수 없습니다.

품질이 낮은 대체 텍스트는 이미지를 정확하게 설명하지 못하거나 지나치게 장황하여 혼동을 일으킬 수 있기 때문에 문제가 됩니다. "그림", "이미지", "그래픽", "이미지"와 같은 단어와 구는 대체 텍스트에 추가할 필요가 없습니다. 스크린 리더가 이미지나 그래픽이 있음을 알리기 때문입니다.

125-150자보다 긴 대체 텍스트가 있는 경우 일부 화면 판독기가 잘리고 읽기가 중지됩니다. 대체 텍스트 내에 마침표를 추가하면 스크린 리더가 일시 중지되어 듣는 사람이 혼동을 일으키거나 대체 텍스트가 끝났다고 믿게 될 수 있습니다.

불충분한 색상 대비

웹 디자인에서 색상 대비는 배경 색상과 텍스트, 버튼 또는 아이콘과 같은 색상 요소 사이의 밝기 측정을 나타냅니다. 표준 크기의 텍스트가 충분한 것으로 간주되려면 배경색과 전경색의 비율이 4.5:1이어야 합니다. 무료 색상 대비 체커에 두 색상의 16진수 코드를 입력하여 색상 대비를 테스트할 수 있습니다.

모호한 앵커 텍스트

앵커 텍스트는 웹 페이지에서 클릭할 수 있는 단어 또는 단어 그룹입니다. 앵커 텍스트를 클릭하면 새 웹사이트로 이동하고, 문서를 다운로드하고, 새 탭에서 이미지나 비디오를 열 수 있습니다. 앵커 텍스트는 문맥에 맞지 않거나 링크의 목적을 설명하지 않는 경우 모호한 것으로 간주됩니다. 모호한 앵커 텍스트의 예로는 "링크", "여기를 클릭하십시오", "자세히 알아보기" 또는 "계속"이 있습니다. 콘텐츠에 링크를 추가할 때 누군가가 링크만 독립적으로 듣는 경우(주변 텍스트 없이) 링크가 가리키는 위치 또는 링크를 클릭할 때 어떤 일이 발생하는지 알 수 있어야 합니다.

캡션 및 성적표 누락

캡션은 동영상의 음향 효과, 음악 또는 웃음과 같은 음성 콘텐츠 및 비언어적 콘텐츠를 텍스트로 설명합니다. 동영상이 재생되는 동안 화면에 표시되므로 청각 장애가 있는 사용자가 동영상에서 일어나는 일을 이해할 수 있습니다. 또한 자막은 동영상의 타이밍과 일치해야 합니다. 캡션은 정확해야 합니다. 자동 생성된 캡션의 정확성을 확인해야 합니다.

대본은 오디오 클립이나 비디오에서 말한 내용을 서면으로 기록한 것입니다. 대본은 비디오 콘텐츠 또는 오디오 파일을 이해하는 보조 수단을 제공합니다. 사람들이 비디오를 보지 않고 대본을 읽을 수 있도록 비디오의 캡션과 함께 사용해야 합니다. 모든 사용자가 캡션을 읽을 수 있는 것은 아니기 때문에 이는 중요합니다. 또한 성적표는 다른 언어로 쉽게 번역되는 이점을 제공하고 SEO에 도움이 될 수 있습니다.

접근성을 위한 WordPress 웹사이트 테스트

접근성을 위해 웹 사이트를 테스트하는 가장 좋은 방법은 자동, 수동 및 사용자 테스트를 조합하여 수행하는 것입니다.

자동화된 접근성 테스트

자동화된 접근성 테스트는 AI 스캐닝 도구로 수행됩니다. 다양한 접근성 검사 기능을 제공할 수 있는 많은 무료 및 유료 도구가 있습니다. 자동화 도구를 선택할 때 염두에 두어야 할 사항은 다음과 같습니다.

• 웹사이트의 크기입니다. 소규모 웹 사이트가 있는 경우 무료 도구가 적합할 수 있습니다. 수천 개의 게시물이 있는 블로그 또는 전자 상거래 섹션이 있는 사이트와 같이 더 큰 웹 사이트가 있는 경우 유료 도구가 더 적합할 수 있습니다.
• 얼마나 많은 지원이 필요한지. 웹 사이트에서 접근성 오류를 찾아 수정하는 데 도움이 필요한 경우 무료 도구를 사용하는 것이 좋습니다. 접근성 오류를 이해하는 데 도움이 필요하거나 다른 사람이 오류를 수정하도록 하려면 내장되어 있거나 개발자가 제공하는 지원 옵션이 있는 도구를 찾아보세요. 접근성 개선을 처음 사용하는 경우 지원을 받는 것이 중요합니다.
• 사용자 경험. 일부 자동화된 접근성 도구는 예를 들어 브라우저 확장을 통해 또는 WordPress 대시보드 내에서 웹사이트에서 직접 사용할 수 있습니다. 다른 도구는 웹사이트와 완전히 분리된 인터페이스를 사용해야 합니다. 웹 사이트에서 작업하는 동안 접근성 오류를 확인하려면 현장 보고를 제공하는 도구를 선택하십시오. 이렇게 하면 사이트에서 콘텐츠를 편집하는 동안 웹 사이트의 접근성을 지속적으로 쉽게 확인할 수 있습니다.

모든 웹사이트에서 사용할 수 있는 두 가지 인기 있는 무료 도구는 WAVE와 Axe입니다. 이러한 도구에는 단일 URL을 한 번에 하나씩 테스트하는 데 사용할 수 있는 Chrome 및 Firefox 확장 프로그램과 대량 테스트 및 추가 기능을 허용하는 유료 플랜이 있습니다.

접근성 검사기 WordPress 플러그인

대량 접근성 검사를 실행하고 WordPress 대시보드에서 보고서를 보려면 WordPress Accessibility Checker 플러그인이 가장 좋은 도구입니다. WordPress.org에서 플러그인의 기본 버전을 무료로 다운로드할 수 있습니다.

접근성 검사기는 접근성 오류나 잠재적인 문제에 대해 페이지와 게시물을 스캔하고 해당 페이지 또는 게시물의 편집 화면에 직접 표시합니다. 이러한 인페이지 보고서는 웹사이트가 처음에 액세스 가능한지 확인하는 것뿐만 아니라 지속적인 액세스 가능성을 모니터링하는 데에도 유용합니다.

접근성 검사기는 위에서 식별된 일반적인 문제를 포함하여 40개 이상의 다양한 검사를 실행합니다. 무료 버전은 게시물과 페이지를 스캔하고 Pro 버전은 사용자 정의 게시물 유형 및 아카이브 페이지의 전체 사이트 스캔을 포함합니다. 잘못 플래그 지정되거나 검토된 항목을 닫을 수 있으므로 시간 경과에 따라 접근성 수정 사항을 추적할 수 있습니다. 대행사, 개발자 및 WordPress 사용자 모두에게 훌륭한 도구입니다.

수동 테스트

불행하게도 자동 스캔은 웹사이트의 모든 접근성 문제를 식별할 수 없습니다. 일부 문제는 웹사이트를 경험하는 사람에 의해서만 결정될 수 있습니다. 접근성 검사기와 같은 자동화 도구로 웹사이트를 테스트한 후 다음으로 수동 테스트를 수행하여 모든 사람이 사용하는 장치에 관계없이 웹사이트를 사용할 수 있는지 확인합니다.

수동 접근성 테스트의 첫 번째 단계는 사용자가 키보드만으로 완전히 탐색할 수 있는지 확인하는 것입니다. 웹사이트의 프런트 엔드로 이동하고 탭 및 화살표 키를 사용하여 사이트를 이동하면서 위치를 잃지 않고 웹사이트의 모든 부분을 사용할 수 있는지 확인합니다.

키보드 테스트 후 스크린 리더 테스트로 이동할 수 있습니다. 스크린 리더는 맹인 및 시각 장애인이 웹 콘텐츠를 이해하는 데 사용하는 일종의 보조 기술 소프트웨어입니다. Mac이 있는 경우 컴퓨터에 내장된 VoiceOver 소프트웨어를 사용할 수 있습니다. Mac이 없는 경우 무료 오픈 소스 스크린 리더 NVDA를 다운로드하거나 인기 있는 스크린 리더 JAWS를 구입할 수 있습니다. 모든 스크린 리더가 개별 요소에 대해 동일한 내용을 말하는 것은 아니므로 두 개 이상의 스크린 리더로 웹 사이트를 테스트하는 것이 가장 좋습니다.

스크린 리더로 웹 사이트를 테스트하려면 테스트하려는 페이지로 이동한 다음 키보드 탐색 테스트 중에 했던 것처럼 탭과 화살표 키만 사용하여 페이지를 이동합니다. 페이지를 이동할 때 스크린 리더가 말하는 내용을 듣고 올바르지 않거나 혼란스러운 항목에 플래그를 지정합니다. 자동으로 재생되고 페이지의 다른 콘텐츠를 중단하는 미디어 파일 또는 슬라이더를 듣습니다.

키보드 탐색 및 화면 판독기 테스트를 수행한 후에는 포함되거나 연결된 모든 미디어 파일을 확인해야 합니다. 미디어 파일에는 비디오, 오디오 파일, PDF, .Doc 또는 .XLS 파일, 이미지 또는 텍스트 슬라이더, 타사 위젯 또는 iFrame이 포함됩니다. 장애가 있는 사용자가 포함되거나 연결된 모든 미디어 파일이 제공하는 콘텐츠에 액세스하고 상호 작용하고 이해할 수 있는지 확인합니다.

사용자 테스트

자동 및 수동 접근성 테스트 후 사용자 테스트를 수행하는 것이 좋습니다. 사용자 테스트에는 접근성 오류가 있는지 웹 사이트를 테스트하기 위해 실제 보조 기술 사용자를 고용하는 작업이 포함됩니다. 일반적으로 테스트 사용자는 특정 목표를 가진 웹 개발자로부터 브리핑을 받습니다. 그런 다음 테스트 사용자는 이러한 목표를 달성하려고 시도한 다음 개발자에게 피드백을 제공합니다.

유료 또는 자원 봉사 프로그램을 통해 개별 테스트 사용자를 고용하거나 사용자 테스트 서비스를 제공하는 접근성 회사를 찾을 수 있습니다.

결론: 웹 사이트에 액세스할 수 있도록 유지

SEO와 마찬가지로 접근성은 지속적인 모니터링과 수정이 필요한 지속적인 프로세스라는 점에 유의해야 합니다. 웹 사이트에 액세스할 수 있도록 하려면 다음과 같은 계획을 세우십시오.

• 접근성 검사기 플러그인과 같은 도구를 사용하여 접근성 오류를 정기적으로 모니터링하고 테스트합니다.
• 웹 접근성 모범 사례에 대해 웹 개발자, 디자이너 및 콘텐츠 작성자를 교육합니다. 클라이언트를 위한 웹사이트를 시작하는 경우 클라이언트가 시작 후 액세스 가능한 방식으로 콘텐츠를 추가하는 방법을 알고 있는지 확인하십시오.
• 반드시 따라야 하는 접근성 지침 또는 법률 변경 사항에 대해 계속 알고 있어야 합니다.

이러한 조치를 취하면 귀하의 웹 사이트에 계속 액세스할 수 있고 모든 사람이 능력에 관계없이 웹의 정보, 제품 및 서비스에 동등하게 액세스할 수 있습니다.