무료 ADA 규정 준수 웹사이트 체크리스트

ADA 준수 웹사이트가 필요한 이유

물리적 위치에서 ADA를 준수해야 하고 "프로그램, 상품 또는 서비스에 관한 통신을 위해 인터넷을 사용하는" 모든 비즈니스 또는 공개 기관은 접근 가능한 수단을 통해 이러한 통신을 제공할 준비가 되어 있어야 합니다. 법무부의 공개 서한에 따르면.

상근 직원이 15명 이상이고 연중 20주 이상 영업하는 모든 사업체는 일반 대중이 쉽게 접근할 수 있도록 하여 미국 장애인법 Title III을 준수해야 합니다. 활동가들은 최근 비준수 웹사이트를 검색하고 고소하기 시작했습니다. 2018년에만 2250건의 소송이 제기됐다.

웹사이트가 규정을 준수하지 않는 것으로 판명되면 수천 달러의 벌금과 법원 수수료를 잃게 됩니다. 또한 뉴스 미디어가 귀하의 비즈니스가 장애인을 차별한다는 이유로 소송을 당했다고 보도할 때 홍보 악몽을 겪을 것입니다.

"접근성"은 DOJ 레터가 발행된 1996년에 느슨하게 정의되었지만, 웹 콘텐츠 접근성 지침 이제 연방 정부가 자체 웹 존재를 위해 사용하고 법원이 ADA Title III 위반을 평가하는 데 사용하는 표준입니다.

귀하의 현재 웹사이트는 아마도 규정을 준수하지 않을 것입니다

경영진은 새 웹사이트를 구매할 때 ADA 준수가 문제라는 사실을 거의 깨닫지 못합니다. 세련되고 매력적인 웹사이트를 만들 수 있는 사람은 누구나 ADA 준수 웹사이트를 만들 수 있다고 종종 신뢰하는 사람들입니다. 불행히도 웹 디자이너는 종종 ADA 준수에 대한 모범 사례를 무시하거나 흥미로운 새 디자인 기능을 구현하기 위해 이를 무시합니다.

많은 브랜드의 광고 팀도 요구 사항에 대해 무지합니다. 다른 사람들은 이를 제안으로 받아들이고 색상 대비 및 글꼴 크기와 같은 주요 문제를 무시합니다. 준수하려면 브랜드를 변경하거나 진행 중인 캠페인을 변경해야 하기 때문입니다.

웹사이트의 규정 준수 여부가 확실하지 않은 경우 당사의 체크리스트에 따라 테스트하십시오. 1시간의 시간으로 회사에서 수만 달러와 대중의 굴욕을 줄일 수 있습니다.

ADA 규정 준수를 위해 웹사이트 테스트

Sagapixel Web Design에서는 웹사이트의 ADA 준수를 테스트하기 위한 체크리스트를 만들었습니다. 이를 통해 웹 디자인 및 콘텐츠 제작 팀은 최대한 많은 방문자와 잠재 고객이 작업에 액세스할 수 있습니다.

체크리스트 사용 방법

ADA 규정 준수를 테스트하려면 웹사이트의 다양한 영역을 테스트하기 위한 여러 도구가 필요합니다. 가장 중요한 컴플라이언스 요소를 테스트할 수 있는 WAVE와 같은 다양한 무료 도구가 있지만 폐쇄 자막 및 도구가 포착할 수 없는 이상치 사례(예: 리플로우 문제 및 대체 텍스트가 있는 그림)에 대해서는 인적 검토가 필요합니다. 프레임에 무엇이 있는지 설명하지 않습니다.

체크리스트로 이동하여 각 항목에 대해 테스트하십시오. Tier AA를 통과했다면 축하합니다! 귀하의 비즈니스는 대부분의 장애가 있는 사람들이 이용할 수 있습니다. 하나라도 실패하면 소송의 위험이 있습니다. 몇 가지 기준 이상에 실패하면 새 웹 사이트를 구입하는 것이 현재 가지고 있는 문제를 해결하기 위해 개발자를 유지하는 것보다 더 저렴할 수 있습니다.

아래의 온라인 체크리스트를 보거나 체크리스트의 PDF를 다운로드하여 인쇄하거나 오프라인에서 볼 수 있습니다.

체크리스트

A-계층 규정 준수

• 텍스트가 아닌 모든 콘텐츠에는 동일한 목적을 제공하는 대체 텍스트가 있습니다.
• 오디오 전용 및 비디오 전용 프레젠테이션을 포함한 모든 시간 기반 미디어에는 쉽게 액세스할 수 있는 대안이 있습니다.
• 모든 사전 녹음된 동기화 미디어에는 자막이 있습니다.
• 모든 콘텐츠의 읽기 순서는 프로그래밍 방식으로 결정할 수 있습니다. 콘텐츠는 논리적인 순서로 표시되며 키보드를 통한 탐색은 이 순서를 따릅니다.
• 지침은 웹사이트 콘텐츠 작동 방법을 설명하기 위해 색상, 사운드 또는 시각적 방향과 같은 감각적 특성에만 의존하지 않습니다.
• 색상은 프롬프트, 링크 또는 기타 시각적 요소의 존재를 전달하는 유일한 수단으로 절대 사용되지 않습니다.
• 오디오가 3초 이상 자동으로 재생되도록 프로그래밍된 경우 시스템 볼륨과 관계없이 오디오를 일시 중지하거나 볼륨을 낮추는 메커니즘을 사용할 수 있습니다.
• 사용자는 키보드만으로 웹사이트의 모든 기능에 접근할 수 있습니다.
• 입력 필드는 사용자 움직임의 타이밍이 필드 기능에 필수적인 경우가 아니면 특정 키스트로크 타이밍을 요구하지 않을 수 있습니다.
• 키보드로 구성 요소에 액세스할 수 있는 경우 키보드를 사용하여 해당 구성 요소를 떠날 수도 있어야 합니다.
• 페이지 구성 요소에서 종료 명령이 필요한 경우 Escape 또는 Tab과 같이 인쇄할 수 없는 단일 키여야 합니다.
• 단일 문자 바로 가기에는 다음 기능 중 하나 이상이 있어야 합니다.
  • 바로 가기를 비활성화하는 방법은 항상 있어야 합니다.
  • 바로 가기를 인쇄할 수 없는 문자로 다시 매핑하는 메커니즘이 있습니다.
  • 바로 가기는 특정 구성 요소에서만 작동하며 해당 구성 요소에 포커스가 있을 때만 활성화됩니다.
• 사용자는 시간 제한이 경매와 같은 실생활 기능의 필수적인 부분이 아닌 한 콘텐츠의 시간 제한을 연장하거나 끌 수 있어야 합니다.
• 사용자는 깜박임 또는 스크롤 기능을 숨길 수 있어야 합니다. 유일한 예외는 진정한 비상 경보입니다.
• 어떤 기능도 1초에 세 번 이상 깜박일 수 없습니다.
• 복제된 콘텐츠 블록을 우회하는 메커니즘이 있어야 합니다.
• 모든 페이지 제목은 페이지의 주제와 목적을 설명해야 합니다.
• 페이지를 순차적으로 탐색할 때 구성 요소는 키보드로 액세스할 때 올바른 순서로 포커스를 받아야 합니다.
• 모든 다중 입력 제스처에는 단일 입력 대안이 있습니다.
• 기능이 클릭으로 활성화되면 다음 접근성 기능 중 하나를 활용해야 합니다.
  • 다운 클릭만으로는 기능이 활성화되지 않습니다.
  • 클릭을 취소하거나 중단하는 옵션이 있습니다.
  • 포인터 버튼을 놓으면 클릭이 중단됩니다.
  • 유일한 예외는 기능이 키보드 또는 키패드를 에뮬레이트하도록 설계된 경우입니다.
• 버튼에 텍스트나 이미지가 포함된 경우 버튼 이름에 해당 이름이 포함되거나 버튼의 시각적 콘텐츠를 설명합니다.
• 모션 활성화 기능은 사용자 인터페이스를 통해 활성화할 수 있는 방법도 있어야 합니다. 유일한 예외는 동작이 활동의 ​​필수적인 부분이고 GUI가 기능을 복제할 수 없는 경우입니다.
• 웹 페이지의 기본 언어는 프로그래밍 방식으로 결정할 수 있습니다.
• 버튼 및 기타 대화형 구성 요소는 사용자로부터 포커스를 받을 때 목적을 변경할 수 없습니다.
• 사용자 설정을 변경해도 버튼이나 대화형 요소의 컨텍스트가 변경되어서는 안 됩니다.
• 입력 오류에는 명확한 이름과 텍스트 설명이 있어야 합니다.
• 모든 입력 필드에는 명확한 레이블과 지침이 있어야 합니다.
• 모든 사용자 인터페이스 구성 요소의 이름, 역할 및 상태는 프로그래밍 방식으로 결정할 수 있습니다.
• 마크업 언어로 구현된 모든 콘텐츠 또는 기능은 정확한 태그를 가지며 고유한 ID를 사용합니다.

AA 등급 규정 준수

• 라이브 동기화 미디어 콘텐츠는 자막과 함께 제공됩니다.
• 사전 녹음된 미디어에는 오디오 설명과 함께 자막이 있어야 합니다.
• 페이지 방향(가로 또는 세로)은 방향이 콘텐츠의 필수 기능이 아닌 한 보기 또는 작동을 제한하지 않습니다.
• 사용자 정보를 수집하는 모든 입력의 목적은 명확하게 레이블이 지정되어 있으며 프로그래밍 방식으로 결정할 수 있습니다.
• 일반 텍스트의 대비는 4.5:1이어야 합니다.
• 글꼴 크기가 18pt 이상인 텍스트는 명암비가 3:1만큼 낮을 수 있습니다. 순수한 장식용 텍스트 및 기업 로고는 이러한 표준에서 제외됩니다.
• 텍스트는 최대 200% 크기 조정 시 모든 콘텐츠와 기능을 유지해야 합니다.
• 실제 텍스트로 충분할 경우 텍스트 이미지를 사용해서는 안 됩니다. 이미지에 예술 작품이나 골동품 문서와 같은 실용적인 대안이 없는 경우 이미지에 대한 설명을 사용할 수 있어야 합니다.
• 콘텐츠는 최대 400%까지 확장될 때 320 CSS 픽셀(수직 스크롤) 또는 256 CSS 픽셀(가로 스크롤)의 너비로 리플로우되어야 합니다.
• 사용자 인터페이스 구성 요소와 장식이 아닌 색상 분리는 최소 3:1의 대비를 가져야 합니다.
• 최소 텍스트 간격:
  • Line Height는 글꼴 크기의 1.5배입니다.
  • 단락 간격은 글꼴 크기의 2배입니다.
  • 글자 간격은 글꼴 크기의 0.12배입니다.
  • Word Spacing은 글꼴 크기의 0.16배입니다.
  • 주어진 언어 또는 스크립트가 이러한 간격 옵션 중 하나를 지원하지 않으면 접근성을 위해 해당 옵션에서 제외됩니다.
• 콘텐츠가 호버 또는 키보드 포커스에 나타날 때:
  • 포커스를 변경하지 않고 콘텐츠를 닫는 방법이 있어야 합니다.
  • 포인터나 포커스가 콘텐츠에 남아 있는 한 콘텐츠가 사라지지 않아야 합니다.
  • 콘텐츠는 사용자가 트리거하거나(즉, 포커스를 변경하거나 콘텐츠를 해제하여) 정보가 무효화되지 않는 한 사라지지 않아야 합니다.
• 해당 페이지가 프로세스의 한 단계가 아닌 한 다른 웹 페이지 세트 내에서 웹 페이지에 액세스하는 방법은 여러 가지가 있습니다.
• 모든 제목과 레이블은 그 아래에 있는 내용의 주제 또는 목적을 설명합니다.
• 해당되는 경우 키보드 포커스 표시기가 항상 표시되어야 합니다.
• 텍스트 구절의 언어는 프로그래밍 방식으로 표시됩니다.
  • 이름, 전문 용어 및 합리적인 언어는 예외로 할 수 있습니다.
• 탐색 요소는 웹 관련 페이지에서 동일한 디자인, 위치 및 목적을 공유해야 합니다.
• 입력 오류가 자동으로 감지되고 해결 방법에 대한 제안이 제공됩니다.
• 웹 페이지가 법적 약속을 일으키거나, 금융 거래로 이어지거나, 테스트 응답을 제출하는 경우 다음 기능 중 하나 이상을 포함해야 합니다.
  • 제출은 되돌릴 수 있습니다.
  • 웹사이트는 누락 및 데이터 오류를 확인하고 사용자에게 이를 수정할 수 있는 옵션을 제공합니다.
  • 사용자는 입력한 정보를 검토, 수정 및 확인할 수 있습니다.
• 웹사이트는 사용자가 오류 메시지에 집중하지 않는 경우에도 보조 기술에 오류 및 상태 메시지를 표시합니다.

AAA 등급 규정 준수

• 사전 녹음된 동기화 미디어에 대해 수화 통역이 제공됩니다.
• 사전 녹음된 미디어에는 확장된 오디오 설명이 포함된 자막이 있습니다.
• 비디오 전용 미디어에 대해 시간 제한 없는 대안이 제공됩니다.
• 오디오 전용 미디어에 대해 시간이 지정되지 않은 대안이 제공됩니다.
• 마크업 언어를 통해 구현된 콘텐츠와 사용자 인터페이스 구성 요소의 목적은 프로그래밍 방식으로 결정할 수 있습니다.
• 일반 텍스트의 대비는 최소 7:1입니다. 굵은 글씨는 최소 4.5:1입니다.
• 사전 녹음된 오디오가 주로 음성인 경우 배경 소음이 없어야 하거나 배경 소음과 음성의 차이가 20db 이상이어야 합니다. 음악 콘텐츠는 제외됩니다.
• 사용자는 다음과 같이 텍스트 블록의 형식을 변경할 수 있어야 합니다.
  • 전경색과 배경색은 사용자가 선택할 수 있으며,
  • 단락은 80자 또는 중국어/일본어/한국어 글리프 40자 이내,
  • 줄 간격은 1.5 이상, 단락 간격은 3 이상,
  • 텍스트는 최대 200% 크기 조정 시 사용자가 가로로 스크롤할 필요가 없습니다.
  • 텍스트 이미지는 순전히 장식용으로 사용됩니다. 로고는 면제됩니다.
• 웹사이트의 모든 기능은 키보드 인터페이스만 있으면 액세스할 수 있습니다.
• 웹사이트의 어떤 기능도 실제 이벤트와 연결되지 않는 한 시간에 민감하지 않아야 합니다.
• 긴급하지 않은 중단은 사용자가 일시 중지하거나 해제할 수 있습니다.
• 세션이 만료되면 사용자는 정보 입력을 다시 인증하고 재개할 수 있어야 합니다.
• 일정 기간 동안 사용하지 않으면 데이터가 손실될 경우 사용자에게 명확하게 알려야 하며 사용자 데이터를 저장하고 나중에 계속할 수 있는 옵션이 제공되어야 합니다.
• 애니메이션 동작은 정보를 전달하는 데 필수적인 것은 아닙니다.
• 애니메이션을 비활성화할 수 있습니다.
• 웹 페이지가 연결된 집합일 때 사용자 위치에 대한 명확한 시각적 및 프로그래밍 방식 표시가 있어야 합니다.
• 링크의 텍스트는 링크의 목적을 식별해야 합니다.
• 텍스트는 HTML 제목 태그로 구성됩니다.
• 포인터의 버튼 및 기타 대상은 최소 44x44픽셀이어야 합니다.
• 유효한 보안 목적을 위해 제한이 필요한 경우에만 대체 입력 방식을 프로그래밍으로 차단할 수 있습니다.
• 외래어, 관용어 및 전문 용어는 텍스트 마크업 또는 적절한 사전에 대한 링크로 정의됩니다.
• 약어가 정의되거나 전체 용어를 표시하도록 확장될 수 있습니다.
• 9학년 읽기 수준 이상으로 작성된 경우 콘텐츠의 단순화된 버전을 사용할 수 있어야 합니다.
• 단어의 발음이 애매한 경우에는 발음의 키를 포함해야 합니다.
• 탐색 요소는 사용자가 변경을 시작하지 않는 한 컨텍스트를 변경해서는 안 됩니다.
• 상황에 맞는 도움말 또는 도구 설명을 항상 사용할 수 있습니다.
• 웹 페이지에서 사용자가 개인 정보를 제출해야 하는 경우 다음 기능 중 하나 이상이 포함됩니다.
  • 제출은 되돌릴 수 있습니다.
  • 웹사이트는 누락 및 데이터 오류를 확인하고 사용자에게 이를 수정할 수 있는 옵션을 제공합니다.
  • 사용자는 입력한 정보를 검토, 수정 및 확인할 수 있습니다.

준수 웹 디자인 FAQ

공식 ADA 웹사이트 지침은 무엇입니까?

2008년과 같은 최신 개정판에도 불구하고 ADA는 웹사이트 또는 인터넷 접근성에 대해 구체적으로 언급하지 않습니다. 매년 수천 건의 소송이 온라인 접근성에 대해 제기되며 법원은 인터넷 표준에 대해 국제적으로 인정받는 조직인 W3C(World Wide Web Consortium)에서 발행한 지침을 준수 설계의 모델로 사용했습니다. 컨소시엄의 WCAG( 웹 콘텐츠 접근성 지침 ) 이 표준은 2012년 ISO 표준으로 채택되었으며 유럽과 아시아 전역의 웹 접근성 법률의 기초가 됩니다. 미국은 이제 모든 정부 웹사이트에 대해 WCAG AA-Tier 규정 준수를 의무화하고 연방 판사는 웹사이트 접근성 및 Title III ADA 위반에 대해 판결할 때 이러한 표준을 참조합니다.

규정 준수 지침은 얼마나 자주 변경됩니까?

이 지침은 1999년에 처음 게시되었으며 2008년과 2018년에 주요 개정판이 있었습니다. WCAG 2.1은 2018년 6월에 게시된 최신 업데이트입니다. 여기에는 주로 스마트폰 및 기타 소형 터치스크린 장치에 대한 접근성을 목표로 하는 17개의 새로운 기준이 포함되어 있습니다.

2.0 지침을 충족해도 데스크톱 사이트에 액세스할 수 있습니다. 하지만 11년 전에 나온 2.0 표준은 스마트폰 혁명을 예측하지 못했다. 결과적으로 호환되는 모바일 웹사이트를 만들기 위한 지침이 없고 터치 및 제스처 기반 작동 입력에 대한 지침이 거의 없습니다. 귀하의 웹사이트가 2018년 이전에 ADA를 준수하도록 구축된 경우, 특히 스마트폰에서 액세스할 때 더 이상 최소 준수 표준을 충족하지 못할 수 있습니다.

A, AA 및 AAA 규정 준수 계층의 차이점은 무엇입니까?

계층 A는 장애가 있는 사람이 웹사이트를 사용하기 위해 반드시 있어야 하는 요소와 기능입니다. A 계층 기능이 없으면 웹 사이트에 액세스할 수 없습니다.

Tier AA에는 접근성을 위해 강력히 권장되는 요소가 포함되어 있습니다. AA 기능이 없으면 시각 장애가 있거나 신체 장애가 있는 사람들이 웹사이트를 탐색하기가 매우 어렵습니다. ADA 규정 준수를 위해 이것은 최소한으로 허용되는 접근성 계층입니다.

Tier AAA에는 가장 진보된 접근성 기능이 포함되어 있습니다. 이러한 기능 중 일부는 모든 웹사이트 또는 디지털 플랫폼에서 가능하지 않습니다. 가능한 한 많은 AAA 기능 또는 부분 AAA 기능을 포함하는 것이 좋지만 대부분의 웹 사이트 또는 비즈니스 유형에서 완전한 AAA 규정 준수는 합리적인 목표가 아닙니다.

ADA 호환 웹 디자인의 원칙

감지할 수 있는

• 적응성: 콘텐츠는 화면 판독기로 확대하거나 처리할 때와 같이 대체 형식으로 표시될 때 구조나 기능을 잃지 않아야 합니다.
• 구별 가능: 텍스트와 배경 색상 간의 대비, 명확하게 표시된 하이퍼링크 및 버튼을 포함하여 시각 및 오디오 콘텐츠가 명확하고 뚜렷해야 합니다.
• 시간 기반 미디어 대안: 사운드 클립의 전체 스크립트 및 그래픽 또는 차트에 대한 서면 설명과 같이 오디오 및 비디오 콘텐츠에 대해 쉽게 액세스할 수 있는 대안이 있어야 합니다.

실시 가능한

• 키보드 액세스 가능: 웹 사이트의 모든 기능은 키보드 하나로 사용할 수 있어야 합니다. 제스처와 마우스 사용이 유일한 입력 방법이 되어서는 안 됩니다.
• 탐색 가능: 사용자가 웹사이트에 있는 위치와 연결된 다양한 페이지로 이동하는 방법에 대한 명확한 표시가 있어야 합니다. 모든 버튼, 링크 및 입력 필드는 레이블이 명확하고 쉽게 구분되어야 합니다.
• 접근 가능한 제스처 및 입력: 기능은 경로 기반 또는 다중 지점 제스처 또는 포인터 활동에 종속되어서는 안 되며 모든 입력에는 중단 또는 실행 취소 옵션이 있어야 합니다.

이해할 수 있는

• 읽기 가능: 모든 텍스트 콘텐츠는 보조 장비로 구문 분석할 수 있어야 합니다.
• 예측 가능: 웹 페이지는 일관되고 논리적인 방식으로 작동해야 합니다. 탐색 버튼은 사용 전후에 동일한 컨텍스트를 유지해야 하며 컨텍스트의 변경 사항은 사용자에게 명확해야 합니다.
• 입력 지원: 웹 페이지는 사용자가 가능한 실수를 피하고 수정하는 데 도움이 되어야 합니다. 모든 오류 메시지에는 명확한 설명, 해결을 위한 제안 및 레이블이 있어야 합니다.

건장한

• 이전 버전과의 호환성: 웹 사이트는 이전 세대의 보조 기술과 인터페이스할 수 있어야 하며 모든 현재 표준을 충족해야 합니다.
• 보조 기술용으로 설계: 웹 사이트의 모든 요소에는 화면 판독기 및 기타 보조 장치에서 프로그래밍 방식으로 결정할 수 있는 이름, 역할 및 값이 있어야 합니다.
• 마크업 및 상태 메시지: 텍스트 마크업 및 중요한 상태 메시지는 현재 메시지에 초점이 맞지 않더라도 화면 판독기가 액세스할 수 있도록 프로그래밍해야 합니다.

중소기업은 ADA를 준수해야 합니까?

소규모 사업체, 대부분의 계절 사업체 및 종교 기관은 대부분의 Title III 요건에서 법적으로 면제됩니다. 가족 소유의 샌드위치 가게는 법적으로 휠체어 경사로를 설치할 필요가 없으며 지역 취미 가게는 웹사이트의 제품 사진에 대체 텍스트를 넣는 것을 잊었다고 소송을 제기할 수 없습니다. 그럼에도 불구하고 온라인에 존재하는 가장 작은 회사라도 ADA 준수에 대해 생각하는 것이 합리적입니다.

규정을 준수하지 않는다는 것은 읽기 어려운 텍스트와 어려운 탐색 그 ​​이상을 의미합니다. 이미지의 대체 텍스트 및 입력 필드를 완성하기 위한 지침과 같은 필수 요소가 누락된 경우 고객이 구매를 완료하지 못할 수 있습니다. 일부 오래된 디자인 기능은 보조 화면 읽기 기술을 사용하는 사람들이 귀하의 전화 번호와 주소를 보지 못하게 할 수도 있습니다. 온라인에서 쉽게 액세스할 수 있으므로 거의 모든 소규모 상점에서 비즈니스에 적합합니다.