ADA 및 WCAG 규정 준수 표준을 따라 모든 사람이 클릭 후 경험에 액세스할 수 있도록 하는 방법

클릭 후 방문 페이지를 만들 때 얼마나 많은 광고주가 웹 접근성에 대해 생각합니까?

이것은 당신이 접근성에 대해 생각하고있는 처음 인 경우, 기회는 당신이 이미 변환을 잃고 적이 있습니다. 사실 온라인 사용자 5명 중 1명은 웹 페이지를 사용하기 위해 편의 시설이 필요합니다. CDC 및 간질 재단의 이러한 통계는 모든 사람이 클릭 후 방문 페이지에 액세스할 수 있어야 할 필요성을 강조합니다.

클릭 후 페이지가 ADA 및 WCAG를 준수하는지 확인하는 것이 모든 사람이 액세스할 수 있도록 하는 방법입니다.

오늘 게시물에서는 ADA 및 WCAG 규정 준수에 수반되는 사항과 광고주가 페이지에 이러한 접근성 표준을 구현하는 것이 중요한 이유를 살펴봅니다.

온라인 ADA 준수는 무엇을 수반합니까?

ADA(Americans with Disabilities Act)는 능력 차이에 따른 차별을 근절하기 위해 1990년에 제정되었습니다. 규정 준수를 위한 특정 요구 사항은 ADA가 온라인 규정 준수를 명시적으로 다루지 않기 때문에 다소 모호하고 혼란스러운 경향이 있습니다.

그러나 지침을 위해 액세스 가능한 웹 사이트 구축 및 유지 관리에 대한 가장 포괄적인 지침인 W3C에서 발행한 WCAG(웹 콘텐츠 접근성 지침)를 참조할 수 있습니다.

WCAG는 무엇입니까?

WCAG는 다양한 청각, 운동, 시각 및 인지 능력을 가진 사람들이 모든 웹 페이지에 액세스할 수 있도록 하는 지침입니다.

웹 접근성에는 장애가 있는 사람들이 사용할 수 있도록 웹사이트, 도구 및 기술을 만드는 것이 포함됩니다. 보다 구체적으로 말하면 방문자는 페이지를 인식, 이해, 탐색 및 상호 작용하고 페이지에 기여할 수 있습니다.

WCAG에는 세 가지 버전이 있습니다.

• WCAG 1.0은 1999년 초안 작성
• WCAG 2.0은 2008년에 출판되었습니다.
• WCAG 2.1은 2018년 6월에 만들어졌습니다.

버전 2.1에는 WCAG 지침에 따라 접근성 문제가 4개의 개별 그룹으로 분류되는 17개의 새로운 성공 기준(자세한 내용은 아래 참조)을 포함합니다. 이러한 문제는 POUR 약어로 요약할 수 있습니다.

• 인지 가능: 모든 사용자가 페이지의 콘텐츠를 인지할 수 있습니까?
• 작동 가능: 모든 사용자가 페이지와 상호 작용할 수 있습니까?
• 이해 가능: 모든 사용자가 페이지의 콘텐츠를 이해할 수 있습니까?
• 견고함: 화면 판독기를 비롯한 다양한 프로그램과 장치에서 콘텐츠를 해석할 수 있습니까?

WCAG 지침은 접근성 문제와 권장 사항을 세 가지 수준으로 분류합니다.

• 수준 A: 이것은 가장 긴급한 수준이며 장애가 있는 방문자의 페이지 탐색 또는 사용 능력을 심각하게 제한할 수 있는 문제를 포함합니다.
• 레벨 AA: 이 레벨은 대부분의 상업용 웹사이트의 표준으로 간주됩니다. 장애가 있는 사용자에게 웹 페이지의 전체 경험을 제공하기 위해 개선이 필요한 영역을 다룹니다.
• 레벨 AAA: 이것은 가장 높은 표준으로, 레벨 A와 AAA가 모두 해결하는 문제에 대한 미세 조정을 포함합니다. 그러나 AAA 준수는 대부분의 웹 페이지가 도달할 수 있는 범위를 벗어납니다.

클릭 후 방문 페이지를 액세스 가능하게 만드는 방법

다음은 클릭 후 페이지가 접근성 표준을 충족하도록 하는 9가지 방법입니다.

1. 페이지를 키보드 친화적으로 만들기: 방문자는 마우스가 없더라도 키보드 'Tab' 키만 사용하여 클릭 후 페이지를 탐색할 수 있어야 합니다. 이렇게 하면 보조 기술을 사용하는 청중이 페이지를 탐색 및 스크롤하고 CTA 버튼을 클릭하는 데 도움이 됩니다.

2. 모든 콘텐츠에 액세스 가능하게 만들기: 많은 클릭 후 페이지는 미리 결정된 태그를 기반으로 변경되는 콘텐츠인 동적 콘텐츠를 사용합니다. 많은 화면 판독기가 처음 로드될 때 표시되는 페이지 내용만 "읽기" 때문에 페이지가 보조 도구에 변경 사항을 알리지 않으면 문제가 될 수 있습니다. 동적 콘텐츠를 사용할 때 동적 콘텐츠에 라이브 영역으로 태그를 지정하면 화면 판독기 및 유사한 장치에서 콘텐츠가 변경될 때 이를 이해할 수 있습니다.

3. 모든 이미지에 대체 텍스트 포함: 이미지에 대체 텍스트를 추가하면 이미지가 로드되지 않을 경우 텍스트가 이미지에 대한 대체 텍스트로 나타나도록 보장하고 이미지에 대한 컨텍스트를 설명하고 제공합니다.

4. 페이지에 대비 추가: 이것은 사본과 모든 페이지 요소가 배경에서 눈에 띄고 시각 장애가 있는 사용자에게 보이도록 하기 위해 필요한 단계입니다. 이상적으로는 밝은 색상에 대해 어두운 색상을 설정하여 서로 병합되지 않도록 해야 합니다.

5. 헤더를 사용하여 콘텐츠 구성: H1, H2 및 H3은 사본을 구성하고 사용자가 쉽게 해석할 수 있도록 합니다.

6. 양식 필드에 레이블 지정: 페이지의 각 양식 필드에 레이블이 명확하게 지정되어 있는지 확인하십시오. 이렇게 하면 스크린 리더를 사용하는 사용자가 양식을 작성하는 방법을 이해할 수 있습니다. Amplitude 페이지에는 레이블이 지정된 양식 필드가 있습니다.

7. 반응형 페이지 만들기: 반응형 페이지는 화면 크기에 관계없이 모든 장치에서 형식을 변경하고 재구성합니다. 페이지는 모바일, 태블릿 및 소형 랩톱의 작은 화면에서 표준 데스크톱 화면 및 더 큰 와이드스크린 모니터까지 확장되며 모든 장치의 사용자에게 유연성과 뛰어난 사용성을 제공합니다.

8. 자동 재생 미디어 및 슬라이더 피하기: 자동 재생 비디오는 화면 판독기를 사용하는 사용자를 음소거하거나 일시 중지하기 어려울 수 있으므로 사용자를 좌절시킬 수 있습니다. 마찬가지로 슬라이더와 캐러셀은 사용자가 이해력에 문제를 일으킬 수 있습니다.

9. 접근 가능한 사본 만들기: 모든 사용자가 귀하가 제공하는 것을 이해할 수 있도록 두문자어 및 전문 용어를 사용하지 마십시오.

귀하의 페이지가 ADA 및 WCAG를 준수하는지 어떻게 확인할 수 있습니까?

많은 온라인 리소스를 통해 페이지가 규정을 준수하는지 확인할 수 있습니다. URL과 이메일 주소만 입력하면 됩니다.

인터넷 접근성국

BOIA를 통해 광고주는 페이지가 접근성 표준을 준수하는지 확인할 수 있습니다.

오디오아이

AudioEye는 페이지를 무료로 스캔하고 접근성 측면에서 측정하는 방법을 확인합니다.

사이트 개선

Siteimprove는 페이지의 접근성을 확인하고 WCAG 표준을 준수하는 자동화된 테스트를 제공합니다.

다음 Chrome 확장 프로그램을 다운로드하여 접근성을 확인할 수도 있습니다.

웨이브 평가 도구

Wave 평가 도구는 페이지에 아이콘과 표시기를 삽입하여 웹 콘텐츠의 접근성에 대한 시각적 피드백을 제공합니다. 사람의 평가를 용이하게 하고 접근성 문제에 대해 교육합니다. 이 도구는 여러 문제, 구조적 요소, 대비 오류, 경고 및 대체 텍스트에 대한 세부 정보를 제공합니다.

유저웨이

광고주는 UserWay 위젯을 다운로드하여 기존 코드를 리팩토링하지 않고도 페이지 접근성 솔루션을 평가할 수 있으므로 ADA, 섹션 508 및 WCAG 2.1 AA를 포괄하는 포괄적인 법률 및 규정 준수 프레임워크를 보장합니다.

위젯은 모든 주요 CMS 플랫폼과 일반 HTML/CSS/JS 사이트에서 사용할 수 있습니다. 이 도구는 중요한 접근성 기능과 사용자가 개별 접근성 요구 사항을 충족하기 위해 조합할 수 있는 광범위한 기능을 제공합니다.

Round Table Pizza는 접근성을 보장하기 위해 UserWay 위젯을 제공합니다. 먼저 읽기 가이드 라인을 사용하여 화면의 색상을 반전시킵니다.

크롬복스

ChromeVox는 시각 장애가 있는 사용자에게 Chromebook의 속도, 단순성, 보안을 제공하는 스크린 리더입니다. ChromeVox는 Chromebook에 사전 설치되어 제공되지만 확장 프로그램으로 다운로드할 수 있습니다.

확장 프로그램은 각 페이지 섹션을 강조 표시하고 사용자를 위해 소리 내어 읽어줍니다.

규정 준수를 위해 Instapage에서 수행할 수 있는 작업

Instapage는 모든 사용자가 웹사이트 접근성 표준을 준수하고 모든 대상에 맞는 페이지를 만들도록 권장하고 촉진합니다. 여기에는 다음이 포함됩니다.

• 모든 페이지 이미지에 이미지 대체 텍스트를 쉽게 추가할 수 있는 방법 제공
• 액세스 가능한 페이지 만들기
• 스크린 리더가 모든 양식 입력 및 제출 버튼을 인식하도록 허용
• 적절한 HTML 태그 추가
• 지원 팀에 요청을 제출하여 페이지에 언어 속성 추가

lang 속성을 사용하여 페이지의 언어를 설정하는 것은 WCAG의 요구 사항이며 그렇게 하면 다음 두 가지 방법으로 사용자에게 이익이 됩니다.

1. Google 크롬과 같은 번역 서비스가 올바르게 작동하도록 허용
2. 속성은 화면 판독기에 페이지 내용을 올바르게 발음하는 방법을 알려줍니다.

모든 사람이 클릭 후 페이지에 액세스할 수 있도록 설정

클릭 후 페이지를 방문하는 모든 사용자가 동일한 전환 기회를 갖도록 하려면 모든 사용자가 페이지에 액세스할 수 있어야 합니다.

액세스 가능하고 개인화된 클릭 후 방문 페이지를 대규모로 만드는 방법에 대해 자세히 알아보려면 지금 Instapage Enterprise 데모를 요청하십시오.