이 비디오에서는 WebFX Interactive 팀의 Jaci가 액세스 가능한 웹 디자인을 시작하는 방법을 설명합니다.

성적 증명서:

웹 사이트를 확인하는 것이 정말 흥분되지만 해당 웹 사이트에 방문했을 때 콘텐츠에 액세스할 수 없는 경우 어떤 느낌이 듭니까? 저는 개인적으로 좌절감을 느꼈고 여러분도 마찬가지일 것이라고 생각합니다.

접근 가능한 웹 디자인을 사용하지 않는 경우 이것은 미국에서 장애가 있는 성인 4명 중 1명을 위해 만드는 시나리오 입니다. 웹사이트에 동등한 액세스 권한 이 없는 약 6,100만 명의 사람들이 있습니다.

웹 디자인 접근성 지침을 따르는 것은 이전에 해본 적이 없다면 쉽지 않지만 시작하기 위해 할 수 있는 몇 가지 사항을 간략하게 설명하겠습니다 .

이 비디오의 다른 섹션으로 건너뛰려면 비디오 설명에 타임스탬프를 사용하세요. 지금부터 웹사이트 접근성에 대한 개요를 살펴보겠습니다.

웹사이트 접근성이란 무엇입니까?

웹사이트 접근성이란 웹사이트가 장애가 있는 사람들이 사용할 수 있도록 설계되었음을 의미합니다. 접근 가능한 디자인의 목표는 기술 장벽을 제거하여 누구나 콘텐츠와 상호 작용할 수 있도록 하는 것입니다.

W3C라고도 하는 World Wide Web Consortium에 따르면 액세스 가능한 웹 사이트는 청각, 인지, 신경, 신체, 언어 및 시각 장애가 있는 사람들을 위해 작동합니다.

어디서부터 시작해야 할지 모르겠다고 걱정하지 마세요. W3C에는 표준을 충족하기 위해 웹사이트에 무엇이 포함되어야 하는지 알려주는 문서가 있습니다.

이 문서에는 다음이 포함됩니다.

• 저작 도구 접근성 지침(ATAG)
• 웹 콘텐츠 접근성 지침(WCAG)
• 사용자 에이전트 접근성 지침(UAAG)

ATAG는 사람들이 인터넷 콘텐츠를 만드는 데 사용하는 도구에 초점을 맞추고 UAAG는 웹 콘텐츠를 렌더링하는 도구의 접근성을 살펴봅니다.

이 비디오에서는 모든 사람이 웹사이트 콘텐츠에 액세스할 수 있도록 하기 위한 지침인 WCAG 에 중점을 둘 것 입니다.

WCAG를 사용하면 A, AA 및 AAA의 세 가지 규정 준수 수준이 있습니다. A에서 AA, AAA로 갈수록 WCAG에서 제시하는 더 많은 표준 을 따르고 더 많은 사람들이 사이트에 액세스할 수 있게 됩니다.

그렇다면 액세스 가능한 웹 사이트가 있는지 어떻게 알 수 있습니까? 감사를 하라!

웹사이트 접근성을 감사하는 방법

직접 감사를 수행할 필요가 없습니다. 감사를 아웃소싱 하고 싶다면 웹사이트를 분석하고 필요한 조정을 할 수 있는 컨설턴트 팀에 문의 하십시오.

이제 사내에서 처리하는 것을 선호한다면 다양한 옵션이 있습니다. 문제를 찾기 위해 웹사이트 페이지를 수동으로 샅샅이 뒤질 수 있지만 이것은 아마도 많은 시간이 걸릴 것입니다.

도움이 되는 몇 가지 도구를 사용할 수 있습니다. URL을 WAVE와 같은 접근성 검사기 에 연결 하여 한 페이지에서 업데이트해야 하는 내용을 확인하세요. 일괄 접근성 검사기 를 사용하여 한 번에 여러 페이지를 분석 할 수도 있습니다 .

W3C 웹사이트에는 다양한 접근성 도구 목록이 있으므로 모든 작업을 스스로 수행할 필요가 없습니다.

또한 접근성을 위한 5가지 중요한 요소 목록과 접근성을 위한 몇 가지 디자인 예가 있습니다.

5 웹 디자인 접근성 지침

이것들은 WCAG 지침의 간략한 요약임을 기억하십시오. W3C의 빠른 참조 가이드 를 사용 하여 접근 가능한 디자인을 위한 보다 심층적인 기술을 알아보는 것이 좋습니다.

1. 텍스트를 읽을 수 있는지 확인

중요한 정보를 전달하는 모든 일반 크기의 텍스트는 읽기 쉬워야 합니다.

이때 대비가 중요한 역할을 합니다. 현재와 ​​같이 큰 텍스트(주요 제목과 같은)에는 3:1 텍스트 대 배경 대비 비율이 필요합니다. 콘텐츠 본문을 구성하는 텍스트와 같은 일반(또는 더 작은) 텍스트에는 4.5:1의 명암비가 필요합니다.

너무 작은 대비의 예는 약간 더 어두운 녹색 배경에 밝은 녹색 텍스트처럼 보입니다. 텍스트를 검은색이나 흰색으로 변경하면 웹사이트의 대비가 훨씬 높아집니다.

또한 사용자는 사이트의 기능에 영향을 주지 않거나 콘텐츠를 놓치지 않는 방식으로 텍스트 를 확대할 수 있어야 합니다 .

2. 보고 읽을 수 있도록 이미지 최적화

이미지에 대체 텍스트를 추가 하는 것은 일반적인 SEO 관행이 아닙니다. 이미지를 볼 수 없는 사람들이 이미지를 이해하는 데 도움이 됩니다.

대체 텍스트는 이미지에서 진행 중인 작업을 명확하게 설명하는 약간의 텍스트입니다. 대체 텍스트는 이미지의 내장 코드에 딱 맞습니다. Mashable의 이 예제에서 볼 수 있듯이 페이지에는 이미지가 있으며 코드 측면으로 넘어가면 대체 텍스트가 표시됩니다.

3. 청중에게 동영상을 이해할 수 있는 추가적인 방법 제공

이전에 비디오에 캡션을 추가한 적이 없다면 지금이 시작할 때입니다. 그리고 YouTube 또는 다른 호스팅 제공업체가 자동으로 생성하는 것에 의존하지 마십시오.

시간과 인내심이 있다면 자동 생성된 캡션을 보고 수정하세요. 그들은 AI에서 온다고 완벽하지 않을 것입니다.

Rev와 같은 도구를 사용하여 캡션을 주문한 다음 비디오에 추가할 수도 있습니다.

동영상에 스크립트를 포함하면 동영상에 더 쉽게 액세스할 수 있습니다. 대본을 작성했다면 이미 대본이 준비되어 있습니다!

오디오 설명 은 접근성의 또 다른 계층을 추가합니다. 이것은 대화의 간격 사이에 비디오에서 무슨 일이 일어나고 있는지 설명하는 별도의 오디오 트랙입니다.

따라서 두 사람이 최근 쇼핑 여행에 대해 이야기하고 비디오에서 옷을 입어보고 있는 일부 장면으로 자르면 오디오 설명이 비디오에서 무슨 일이 일어나고 있는지 설명할 것입니다. 다음과 같을 수 있습니다. 한 여성이 거울 앞에 서서 두 개의 스카프를 어깨에 두르고 있습니다.

Wistia와 같은 호스팅 플랫폼을 사용하면 오디오 설명을 업로드 할 수 있습니다(비디오를 업로드할 때 비디오 접근성 체크리스트도 있음).

4. 마우스와 키보드에 친숙한 웹사이트 디자인

모든 사람이 마우스를 사용하여 인터넷을 탐색하는 것은 아닙니다. 귀하의 웹사이트는 이를 반영해야 합니다.

이것은 누군가가 키보드를 통해 귀하의 웹사이트와 상호작용할 수 있도록 해야 할 뿐만 아니라 웹사이트의 어느 부분에 초점을 맞추고 있는지 눈에 띄게 강조할 수 있는 방법이 필요하다는 것을 의미합니다.

접근 가능한 다른 디자인 예제를 보면 Keds 웹사이트에서 검색 창을 클릭할 때 내가 입력할 수 있음을 알려주기 위해 깜박이는 클래식 라인이 나타납니다. 검색 표시줄도 클릭하면 더 눈에 띄게 됩니다.

WCAG 지침을 충족하려면 이 기능이 키보드를 사용할 때 발생해야 합니다.

5. 사이트 탐색을 이해하기 쉽게 만드십시오.

이 팁은 접근성 이상입니다. 일반적으로 웹사이트 탐색을 간단하고 명확하게 만드는 것이 좋습니다.

명확한 목적이 있는 페이지 제목과 표제를 작성하십시오. 링크하는 콘텐츠의 내용을 쉽게 이해할 수 있도록 링크 앵커 텍스트를 사용합니다.

다시 말하지만 포커스 표시기를 사용하여 사람들이 페이지에서 자신이 어디에 있는지 알 수 있도록 합니다. 사이트맵, 기본 탐색 또는 목차를 통해 웹 페이지에 액세스할 수 있는 두 가지 이상의 방법을 제공합니다.

그리고 이것을 어떻게 건너뛸 수 있습니까? 일관된 탐색이 가능합니다. 즉, 기본 탐색 헤더가 있는 경우 사용자가 페이지에서 페이지로 이동할 때 실제로 변경되어서는 안 됩니다.

At Home의 웹사이트를 특징으로 하는 이 예에서 한 페이지에서 다음 페이지로 클릭하고 있지만 페이지 상단의 탐색은 변경되지 않습니다.

그리고 앞서 말했듯이 이것은 웹 디자인 접근성 지침을 따르기 위해 해야 할 일에 대한 포괄적인 목록이 아닙니다. 이 가이드라인도 변경될 수 있으므로 접근성을 평가할 준비가 되면 조사를 하십시오 .

다양한 웹 디자인 및 디지털 마케팅 주제에 대해 계속 학습하려면 YouTube 채널 과 이메일 뉴스레터인 Revenue Weekly 를 구독하십시오 . 당신은 실망하지 않을 것입니다.

함께해주셔서 감사합니다!

WebFX 비디오에서 마케팅 지식을 얻는 5,000명의 마케터와 함께하십시오.

지금 구독