The Potentially Dangerous Non-Accessibility Of Cookie Notices
쿠키 알림의 잠재적으로 위험한 접근 불가능성
In this piece, a Web Content Accessibility Guidelines (WCAG) auditor shares some cookie banner error patterns that can massively hurt a page’s overall conformance. Let’s explore what to look out for with this omnipresent piece of the web interface.
이 문서에서는 WCAG(Web Content Accessibility Guidelines) 감사인이 페이지의 전반적인 적합성을 크게 해칠 수 있는 쿠키 배너 오류 패턴을 공유합니다. 이 포괄적인 웹 인터페이스로 무엇을 주의해야 하는지 살펴봅시다.
요약 :)
쿠키에 대한 귀하의 입장이 무엇이든, 데이터 보호, 웹 광고, 쿠키 설정, EU의 일반 데이터 보호 규정(GDPR) 및 개인 정보 기본 설정에 대한 귀하의 관점이 무엇이든, 쿠키 동의 위젯(또는 "쿠키 배너")은 오늘날 웹의 현실.
이러한 이유로 이러한 배너가 얼마나 접근 가능하고 사용 가능한지 조사할 가치가 있습니다. 좋든 나쁘든 오늘날 대다수 웹 사이트의 구성 요소가 되었습니다. 더욱이 쿠키 배너는 사용자가 가장 먼저 접하게 되는 경우가 많습니다. 물론 일단 구현되면 웹페이지의 모든 사이트의 일부가 됩니다.
경우에 따라 쿠키 배너는 페이지의 기능 세트 또는 페이지의 광고 때문에 기술적으로 필요합니다. 더 자주 쿠키 배너는 프런트 엔드 팀에서 구축하지 않고 UserCentrics 또는 기타와 같은 기성 솔루션입니다.
쿠키에 대한 귀하의 입장이 무엇이든, 데이터 보호, 웹 광고, 쿠키 설정, EU의 일반 데이터 보호 규정(GDPR) 및 개인 정보 기본 설정에 대한 귀하의 관점이 무엇이든, 쿠키 동의 위젯(또는 "쿠키 배너")은 오늘날 웹의 현실.
이러한 이유로 이러한 배너가 얼마나 접근 가능하고 사용 가능한지 조사할 가치가 있습니다. 좋든 나쁘든 오늘날 대다수 웹 사이트의 구성 요소가 되었습니다. 더욱이 쿠키 배너는 사용자가 가장 먼저 접하게 되는 경우가 많습니다. 물론 일단 구현되면 웹페이지의 모든 사이트의 일부가 됩니다.
경우에 따라 쿠키 배너는 페이지의 기능 세트 또는 페이지의 광고 때문에 기술적으로 필요합니다. 더 자주 쿠키 배너는 프런트 엔드 팀에서 구축하지 않고 UserCentrics 또는 기타와 같은 기성 솔루션입니다.
공지가 웹사이트 헤더 상단에 있는 예시적인 쿠키 배너 그림
( 큰 미리보기 )
쿠키 배너가 접근성과 관련하여 특별한 주의를 기울여야 하는 이유를 설명하기 전에 현재 웹 접근성의 표준인 WCAG(Web Content Accessibility Guidelines) 버전 2.1이 어떻게 작동하는지 간단히 설명하겠습니다.
WCAG는 원칙, 지침 및 성공 기준으로 구성됩니다. 후자는 웹 페이지를 확인하기 위한 테스트 가능한 단계입니다. 예를 들어:
"문서의 기본 언어가 설정되어 있습니까?"
"이 텍스트가 아닌 콘텐츠에 적합한 대체 텍스트가 있습니까?"
"키보드(또는 키보드 누름을 에뮬레이트하는 다른 기술)로 웹 존재를 사용할 때 내 초점이 어디에 있는지 인지할 수 있습니까?"
이것이 "예 또는 아니오" 질문이라는 것을 눈치채셨을 것입니다. 따라서 이는 주어진 성공 기준의 최종 판정이 "통과" 또는 "불합격"임을 의미합니다.
또한 W3C(웹 관리 기관)에서 정의한 WCAG 준수는 전체 문서가 준수해야 할 때 성공 기준 중 어느 것도 "실패"할 수 없음을 의미합니다.
“표준 준수는 표준의 '요구 사항'을 충족하거나 충족한다는 의미입니다. WCAG 2.0에서 '요구 사항'은 성공 기준입니다. WCAG 2.0을 준수하려면 성공 기준을 충족해야 합니다. 즉, 성공 기준을 위반하는 콘텐츠가 없습니다.”
— W3C 워킹 그룹 노트
여기에는 뉘앙스가 없습니다. 쿠키 동의 인터페이스로 돌아가서 이는 배너(또는 다른 구성 요소)만으로도 전체 웹 프로젝트의 WCAG 준수에 부정적인 영향을 미칠 가능성이 있음을 의미합니다.
위에서 자세히 설명한 일반적인 쿠키 동의 문제의 그림
( 큰 미리보기 )
WCAG 적합성은 비차별 또는 시장 접근법 또는 정보에 대한 전반적인 인권에 해당하는 것으로 간주되기 때문에 유럽 연합 또는 미국의 공공 부문의 일부인지 여부에 관계없이 많은 웹 사이트에서 큰 법적 문제가 될 수 있습니다. 웹 페이지는 종종 최신 버전인 WCAG를 직간접적으로 참조하는 지침 및 규정을 준수해야 하며 해당 수준 AA 표준을 준수해야 합니다. 따라서 다음의 모든 WCAG 기준은 진정한 웹 접근성에 관한 한 단순한 시작점에 불과하다는 점을 충분히 인식하고 이 렌즈를 통해 검토됩니다 . 또한 쿠키 동의 인터페이스는 웹사이트의 모든 하위 페이지에서 구현되어 결과적으로 전체 웹사이트의 접근성과 적합성을 손상시킵니다.
따라서 결함이 있는 쿠키 배너 인터페이스가 접근성 법률에 대한 페이지의 적합성을 떨어뜨리지 않도록 하고, 더 중요한 것은 사용자가 자신의 권리에 액세스하고 행사하는 것을 배제하지 않기 위해 무엇을 찾고, 무엇을 구성하고, 무엇을 구축해야 하는지 나열해 보겠습니다. 처음부터 제대로.
점프 후 더! 아래 계속 읽기 ↓
프런트엔드 및 UX 에 대한 Smashing Workshop을 만나보세요 . 실용적인 테이크아웃, 라이브 세션, 비디오 녹화 및 친근한 Q&A가 제공됩니다. 디자인 시스템, UX, 웹 성능 및 CSS/JS에 대해. Brad Frost, Christine Vallaure 및 기타 많은 사람들 과 함께 .
워크숍 바로가기 ↬
기능 패널
대비 오류 #
이는 쿠키 설정 또는 권장 쿠키 세트의 전반적인 수락과 같은 중요한 제어와 관련하여 특히 관련이 있습니다. 양식 컨트롤과 텍스트가 충분히 인식될 수 있도록 하는 것이 중요합니다. 당연히 WCAG에서도 일반적으로 견고한 대비가 중요합니다. 즉, 성공 기준 1.4.3 및 1.4.11 에서 둘 다 대비 경계를 정의합니다.
해야 할 일 #
미리 만들어진 쿠키 관리 솔루션을 사용하는 경우 색상에 영향을 미치고(가능한 경우 잠재적으로 쿠키 공급업체 설정에서) 대화형 컨트롤에 충분한 색상 대비가 있는지 확인하십시오.
또한 웹사이트가 WCAG 준수를 위한 전용 대비 모드에 의존하는 경우 쿠키 관리 인터페이스로 확장(또는 영향)하는지 확인하십시오. 내 접근성 감사자 관행에서 이것이 고려되지 않고 쿠키 인터페이스에서 액세스할 수 없는(종종 브랜드가 있는) 색상 조합이 사용되어 대비 모드가 모든 색상 관련 위반을 처리한다고 생각하는 사례를 보았습니다. 그러나 웹 사이트의 대비 설정은 외부 소스에서 로드되었거나 대비 모드가 작동한 후에 타사 쿠키 배너에 영향을 미치지 않아 WCAG의 대비에 "실패"가 발생했습니다. - 관련 성공 기준.
의사 버튼 #
div또 다른 쿠키 배너 문제는 유감 스럽게도 쿠키 관리 외부에서 찾을 수 있는 오류 패턴입니다 span. 이러한 컨트롤은 버튼처럼 스타일이 지정될 수 있지만 버튼의 의미론적 정보가 부족합니다.
게다가 이러한 컨트롤은 일반적으로 키보드로 초점을 맞출 수 없습니다 . 따라서 많은 심각한 장벽과 WCAG 위반이 한꺼번에 발생하고 있습니다. 예를 들어 클릭 핸들러가 있는 가장 "의사" 버튼을 상상하려고 한다면 이는 div적어도 성공 기준 2.1.1(키보드)을 위반할 것 입니다 . 이름, 역할, 값) 자체를 버튼으로 "도입"하지 않고 프로그래밍 레이블이 없기 때문입니다.
해야 할 일 #
쿠키 관리 인터페이스를 직접 구축했다고 가정할 때 가장 쉬운 방법은 위에서 언급한 유사 버튼을 실제