웹사이트 접근성이란? (ADA 준수를 위한 4가지 팁)

게시 됨: 2023-02-12

인터넷은 장애나 손상 여부에 관계없이 모든 사람이 액세스할 수 있어야 합니다. 그러나 모든 사람을 위한 사용자 친화적인 웹 사이트를 개발하는 것은 어려울 수 있습니다.

다행히 몇 가지 도구, 기술 및 지침을 통해 보다 액세스하기 쉬운 사이트를 만들 수 있습니다. 이 접근성을 통해 더 많은 청중과 연결하고 평판을 보호하며 법적 문제에서 벗어날 수 있습니다.

이 게시물에서는 웹사이트 접근성이 무엇이며 왜 중요한지에 대해 논의하는 것으로 시작하겠습니다. 그런 다음 모든 사용자에게 좋은 경험을 제공하는 네 가지 방법을 공유합니다. 시작하자!

목차
1. 웹사이트 접근성 소개
1.1. 웹사이트 접근성이 중요한 이유
1.2. 웹 접근성에 대한 법적 요건 이해
2. WordPress 웹사이트를 액세스 가능하게 만드는 방법(4가지 방법)
2.1. 1. 사용성 문제 스캔
2.2. 2. 이미지에 대체 텍스트 추가
2.3. 3. 사이트의 오디오에 대한 대안 제공
2.4. 4. WordPress 테마의 접근성 문제 식별
3. 결론

웹사이트 접근성 소개

접근성은 가능한 한 많은 사람들이 사이트를 사용할 수 있도록 만드는 것입니다. 여기에는 모든 사람이 WordPress 웹 사이트를 탐색하고, 이해하고, 상호 작용하고, 기여할 수 있도록 하는 것이 포함됩니다.

접근성에 대해 이야기할 때 종종 장애가 있는 사용자에게 초점을 맞추는데 그럴 만한 이유가 있습니다. 세계보건기구(WHO)에 따르면 인구의 약 15%가 어떤 형태로든 장애를 가지고 있습니다.

모든 형태의 청각, 인지, 신경, 신체, 언어 또는 시각 장애가 있는 사람들이 완전히 액세스할 수 있는 웹 사이트를 사용할 수 있습니다. 일부 방문자는 스크린 리더와 같은 보조 도구를 사용하여 사이트에 액세스하도록 선택할 수 있습니다. 이러한 사용자를 지원하려면 사이트가 이러한 도구에 최적화되어 있는지 확인해야 합니다.

사이트의 일반적인 사용 편의성을 개선할 수도 있습니다. 예를 들어 글꼴 크기를 늘리면 시각 장애가 있는 사용자에게 도움이 될 수 있습니다.

접근성은 또한 사이트의 미디어에 액세스할 수 있는 대체 방법을 제공하는 것을 의미합니다. 예를 들어 동영상 콘텐츠에 자막을 제공하는 것이 좋습니다.

WP Engine의 YouTube 비디오 스크린샷, "창조할 수 있는 자유 제공"

보다 사용자 친화적인 웹 사이트의 혜택을 볼 수 있는 방문자는 장애가 있는 사람만이 아닙니다. 일부 사람들은 손목 염좌와 같이 이동성에 영향을 미치는 일시적인 부상을 입을 수 있습니다. 다른 사람들은 연령 관련 문제가 있을 수 있습니다.

일시적인 상황이라도 방문자가 귀하의 웹사이트에서 가치를 얻는 것을 더 어렵게 만들 수 있습니다. 시끄러운 카페나 기차역에서 인터넷을 해본 적이 있습니까? 이러한 시나리오에서 웹 사이트의 비디오 또는 기타 오디오 콘텐츠를 듣는 것이 얼마나 어려운지 알 수 있을 것입니다.

이러한 모든 상황에서 사용자는 성적표와 같은 접근성 개선의 이점을 누릴 수 있습니다. 유용성을 우선시함으로써 개인적인 상황이나 일시적인 상황에 관계없이 방문자가 콘텐츠에서 가치를 얻는 데 필요한 도구를 제공할 수 있습니다.

웹사이트 접근성이 중요한 이유

접근성을 우선 순위로 두지 않으면 콘텐츠에서 혜택을 받았을 사람들을 제외할 수 있습니다. 첫째, 이것은 불공평합니다. 또한 브랜드에 부정적인 영향을 미치며 좋지 않은 리뷰나 불만을 초래할 수도 있습니다.

접근 가능한 웹사이트는 잠재 고객도 더 많습니다. WHO에 따르면 10억 명이 넘는 사람들이 어떤 형태로든 장애를 가지고 있습니다. 귀하의 사이트가 이러한 개인에게 열려 있지 않으면 방문자 및 잠재적인 전환을 놓치고 있을 수 있습니다.

이미 언급했듯이 사용성 개선은 종종 더 많은 고객에게 긍정적인 영향을 미칩니다. 예를 들어 보겠습니다.

사이트의 대화형 요소 크기를 늘리면 손재주 문제가 있는 사용자에게 도움이 될 수 있습니다. 그러나 이러한 변경 사항은 스마트폰 및 태블릿 사용자를 포함하여 더 작은 화면을 사용하여 사이트에 액세스하는 모든 사람의 삶을 더 쉽게 만들 수도 있습니다.

접근성의 중요한 부분은 방문자에게 더 많은 옵션을 제공하는 것입니다. 예를 들어 누군가가 도서관이나 강의실과 같이 오디오를 들을 수 없는 위치에서 사이트에 액세스할 수 있습니다. 이 시나리오에서는 자막을 사용하여 감상할 수 있습니다.

접근성을 통해 방문자는 자신에게 가장 적합한 방식으로 사이트 콘텐츠를 유연하게 사용할 수 있습니다. 따라서 웹사이트를 방문하는 모든 사람의 사용자 경험을 향상시킬 수 있습니다.

웹 접근성에 대한 법적 요건 이해

ADA(Americans with Disabilities Act)는 모든 전자 및 정보 기술이 장애가 있는 사람들이 접근할 수 있어야 한다고 명시하고 있습니다. ADA 준수는 거의 모든 웹사이트에 대한 법적 요구 사항입니다.

또한 ADA는 직원이 15명 이상인 개인 고용주인 경우 해당 정책을 준수해야 한다고 구체적으로 명시하고 있습니다. 귀하의 비즈니스가 대중의 이익을 위해 운영되는 경우에도 적용됩니다.

귀하의 사이트가 ADA 표준을 충족하지 않는 경우 법적 문제에 처할 수 있습니다. 이러한 규칙을 의도적으로 위반하지 않았더라도 여전히 소송의 근거가 있을 수 있습니다.

이러한 법적 소송이 증가하고 있다는 증거도 있습니다. 디지털 접근성 소송 건수는 2021년에 15% 증가하여 하루에 10건이 넘는 비율에 도달했습니다. 청구 대상이 웹 사이트, 모바일 애플리케이션 또는 비디오 콘텐츠인 접근성 사례가 4,000건 이상입니다.

ADA 위반으로 유죄 판결을 받은 경우 법원은 차별을 시정하기 위해 보상적 손해배상과 체납금을 명령할 수 있습니다. 법무부는 또한 첫 번째 위반에 대해 최대 $55,000, 후속 위반에 대해 최대 $110,000의 민사 벌금을 부과할 수 있습니다.

법무부가 아직 웹 사이트 접근성에 대한 공식 ADA 지침을 발표하지 않았다는 점은 주목할 가치가 있습니다. 그러나 미국에서는 WCAG(Web Content Accessibility Guidelines) 2.0 레벨 AA가 사실상의 표준이라는 것이 널리 받아들여지고 있습니다.

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

사용성을 우선시해야 하는 이유를 방금 다루었습니다. 이제 사이트가 ADA를 완전히 준수하는지 확인하는 방법을 살펴보겠습니다. 워드프레스의 접근성을 높이는 네 가지 방법이 있습니다!

1. 사용성 문제 스캔

접근성은 이해관계가 높은 방대한 주제입니다. 단 하나의 사용성 문제를 간과하면 잠재적인 판매 기회를 놓치고 소송을 촉발할 수도 있습니다. 이러한 이유로 전문 접근성 소프트웨어를 사용하여 사이트를 스캔하는 것이 좋습니다.

자동화된 도구는 완벽하거나 수동 테스트를 대체할 수 없습니다. 사용성은 모두 실제 인간 사용 사례에 관한 것입니다. 즉, 사람들만이 귀하의 사이트에 액세스할 수 있는지 여부를 판단할 수 있습니다.

그러나 자동 스캔은 해결해야 할 문제의 초기 목록을 생성할 수 있습니다. 이러한 문제를 해결한 후 수동 테스트를 진행할 수 있습니다.

다양한 도구를 사용할 수 있지만 웹사이트 접근성 평가(WAVE)는 다양한 사용성 문제를 식별할 수 있는 소프트웨어 제품군입니다.

"웹접근성 평가도구" Wave 스크린샷

웹사이트 URL을 입력하고 테스트를 실행한 후 i 아이콘을 클릭하면 감지된 각 오류에 대한 자세한 정보를 볼 수 있습니다. WAVE는 특정 접근성 문제를 이해하는 데 도움이 되는 리소스를 제안하기도 합니다.

Wave 웹 사이트의 스크린샷과 접근성을 위해 도메인을 검사하는 방법

이 소프트웨어의 단점은 WAVE가 한 번에 한 페이지만 스캔할 수 있다는 것입니다. 테스트 시간을 줄이려면 Firefox용 WAVE 또는 Chrome용 WAVE 확장 프로그램을 설치하는 것이 좋습니다. 이 도구를 사용하면 버튼 클릭만으로 웹 페이지에서 WAVE를 실행할 수 있습니다.

Chrome 웹 스토어, Wave 평가 도구의 스크린샷

또는 WP ADA 준수 확인과 같은 플러그인을 사용하여 사이트를 스캔할 수 있습니다. 이 무료 도구는 50개의 오류 검사를 자랑합니다.

WordPress 대시보드, 웹 접근성 기본 탭의 스크린샷

언제든지 수동으로 전체 스캔을 수행할 수 있습니다. 추가 편의를 위해 WP ADA 규정 준수 검사는 새 콘텐츠를 게시할 때마다 접근성 문제에 대해 사이트를 자동으로 테스트할 수도 있습니다.

2. 이미지에 대체 텍스트 추가

WCAG 지침에 따르면 사이트를 방문하는 모든 사람은 사이트의 모든 정보에 액세스할 수 있어야 합니다. 따라서 모든 이미지에 대체 텍스트를 추가하고 싶을 것입니다. 그러면 시각 장애가 있는 사용자가 스크린 리더를 통해 이 콘텐츠에 액세스할 수 있습니다.

그러나 배경 그래픽과 같은 순전히 장식용 이미지에는 대체 텍스트가 필요하지 않습니다. 또한 페이지의 작성된 콘텐츠와 같이 다른 곳에서 이미 전달된 정보를 반복하는 시각적 개체에 대한 설명을 제공할 필요가 없습니다.

WordPress 미디어 라이브러리의 모든 이미지에 대체 텍스트를 추가할 수 있습니다.

Anchor Text "a green graphic print t-shirt"와 함께 WordPress에 업로드되는 이미지의 스크린샷

또는 페이지에 이미지를 삽입한 후 대체 텍스트를 만들 수 있습니다. 해당 그래픽을 선택하고 블록 탭을 열기만 하면 됩니다. 그런 다음 이미지 설정 섹션을 클릭하여 확장하고 대체 텍스트를 작성합니다.

ALT 텍스트 "a pair of sunglasses"와 함께 WordPress에 업로드되는 이미지의 스크린샷

화면 판독기는 주석과 같이 이미지에 포함된 텍스트에 액세스할 수 없습니다. 그래픽에 텍스트가 포함되어 있으면 이를 대체 설명에 통합해야 합니다. 또는 이 작성된 콘텐츠가 일반 텍스트로 표시되도록 이미지를 편집할 수 있습니다.

대체 텍스트를 작성할 때 가능한 한 많은 정보를 제공하고 싶은 유혹을 느낄 수 있습니다. 그러나 콘텐츠를 듣는 것이 읽는 것보다 훨씬 느릴 수 있습니다. 지나치게 설명하거나 불필요한 세부 사항을 포함하면 청중을 돕지 않고 실망하게 만들 수 있습니다.

3. 사이트의 오디오에 대한 대안 제공

일부 방문자는 나이나 장애로 인해 청각 문제가 있을 수 있습니다. 다른 사람들은 주변 환경 때문에 사이트의 오디오를 듣지 못할 수 있습니다.

이 사람들은 오디오 콘텐츠를 소비할 다른 방법이 필요합니다. 동영상의 경우 자막 제공을 의미할 수 있습니다.

"아일랜드 전역에서 원격으로 작업할 수 있는 자유"라는 제목의 접근성을 위한 자막이 있는 YouTube 비디오의 스크린샷

WebVTT(Web Video Text Tracks Format) 파일을 모든 WordPress 비디오 블록에 추가할 수 있습니다. WebVTT는 W3C(World Wide Web Consortium) 사양을 사용하여 캡션의 형식을 지정하는 텍스트 문서입니다.

온라인 자막 편집과 같은 서비스를 사용하여 이 파일을 만들 수 있습니다. 그러나 이 도구는 무료이며 아직 베타 버전이므로 생성된 캡션을 수동으로 검토하는 것이 좋습니다.

자막 편집 온라인 베타 테스트 스크린샷

또는 다양한 미디어 파일에서 오디오를 전사하는 자막 서비스와 파트너 관계를 맺을 수 있습니다. Rev.com은 인기 있는 자막 서비스입니다.

자막 서비스 방문 페이지의 Rev.com 스크린샷

팟캐스트와 같이 더 긴 콘텐츠에 대한 대본을 제공하는 것을 고려할 수 있습니다. 방문자는 여가 시간에 이 파일을 읽을 수 있습니다.

YouTube에서 동영상을 호스팅하는 경우 플랫폼에는 대본을 생성할 수 있는 전용 자막 영역이 있습니다. 그런 다음 이 텍스트를 웹사이트에 복사/붙여넣기할 수 있습니다.

YouTube 스크립트 생성기의 스크린샷

검색 엔진이 오디오 파일에 액세스할 수 없다는 점도 주목할 가치가 있습니다. 스크립트를 게시하여 이러한 검색 엔진이 페이지의 오디오 콘텐츠를 이해하도록 도울 수 있습니다. 이 문서는 순위와 접근성을 향상시킬 수 있습니다.

4. WordPress 테마의 접근성 문제 식별

모든 콘텐츠에 액세스할 수 있도록 시간과 에너지를 투자할 수 있습니다. 그러나 WordPress 테마가 귀하의 노력을 약화시킬 가능성이 있습니다.

WP 접근성과 같은 플러그인을 사용하여 테마의 접근성 문제를 식별할 수 있습니다. 이 소프트웨어는 누락된 언어 또는 텍스트 방향 속성을 포함하여 일반적인 접근성 문제에 대해 선택한 테마를 스캔합니다. 또한 검색댓글 과 같은 표준 WordPress 양식 필드에 레이블을 추가할 수 있습니다.

기술과 접근성을 나타내는 아이콘 일러스트

이 플러그인을 활성화한 후 WordPress 대시보드에서 설정 > WP 접근성 으로 이동합니다. 여기에서 감지된 문제를 해결하기 위해 활성화 및 비활성화할 수 있는 다양한 접근성 중심 설정을 찾을 수 있습니다.

WordPress의 WP 접근성 설정 스크린샷

또는 사용성을 염두에 두고 디자인된 테마를 선택할 수도 있습니다. WordPress.com 팀은 보다 사용자 친화적인 환경을 제공할 수 있는 접근성 지원 테마 목록을 준비했습니다.

결론

모든 사람이 액세스할 수 있는 웹 사이트를 만드는 것이 항상 간단한 것은 아닙니다. 그러나 그것은 도덕적으로, 직업적으로, 심지어 법적으로 옳은 일입니다.

이를 염두에 두고 보다 접근하기 쉬운 웹 사이트를 만드는 네 가지 방법을 빠르게 요약해 보겠습니다.

  1. 사용성 문제를 스캔합니다. 여기에서 WP ADA 준수 플러그인을 사용하는 것이 도움이 될 수 있습니다.
  2. 이미지에 대체 텍스트를 추가합니다.
  3. 캡션 및 스크립트를 사용하여 사이트의 오디오에 대한 대안을 제공합니다.
  4. WP 접근성과 같은 플러그인을 사용하여 WordPress 테마의 접근성 문제를 식별합니다.

WP Engine에서는 접근성이 많은 웹사이트 소유자에게 최우선 순위라는 것을 이해합니다. 그래서 우리는 당신을 위해 다른 모든 것을 처리합니다!
WP Engine과 파트너 관계를 맺으면 속도, 보안, 안정성 및 확장성에 최적화된 WordPress 호스팅에 액세스할 수 있습니다. 이렇게 하면 모든 사람이 사용할 수 있고 즐길 수 있는 액세스 가능한 웹 사이트를 만드는 정말 중요한 일에 자유롭게 집중할 수 있습니다!