기사 다가오는 WCAG 변경 사항에 대해 알아야 할 사항

게시 됨: 2022-10-07

2022년 9월 W3C는 WCAG의 다음 버전이 후보 추천 상태에 도달했다고 발표했습니다. 11시간 후의 변경 사항을 제외하고 표준 버전 2.2는 곧 비준되어야 합니다. 변경 사항은 상대적으로 미미하지만 웹 사이트의 구축 또는 유지 관리를 담당하는 사람은 누구나 다음 사항을 알고 있어야 합니다.

WCAG에 이미 익숙하다면 개요를 건너뛰고 이상한 세부 사항으로 바로 이동할 수 있습니다. 그렇지 않으면 계속 읽으십시오.

WCAG란 무엇이며 왜 중요한가요?

WCAG(웹 콘텐츠 접근성 지침)는 웹 개발자, 디자이너 및 콘텐츠 관리자가 다양한 장애가 있는 사람들이 웹사이트에 액세스할 수 있도록 하는 데 도움이 되도록 설계된 일련의 기준으로 구성됩니다. W3C의 Web Accessibility Initiative 팀은 표준을 담당합니다. W3C와 WAI는 웹 접근성을 높이는 데 중점을 둔 업계 리더와 주제 전문가의 컨소시엄으로 구성되어 있습니다.

WCAG는 접근성의 네 가지 원칙에 따라 구성됩니다. 이러한 원칙은 웹사이트가 인지 가능하고 작동 가능하며 이해 가능하고 견고해야 한다고 명시되어 있습니다. 이러한 각 원칙에는 기본 목표를 설명하는 지침이 있습니다. 각 가이드라인에는 웹사이트 개발자가 WCAG를 준수하기 위해 충족해야 하는 구체적이고 측정 가능한 목표를 설명하는 성공 기준이 있습니다.

성공 기준에는 각각 A, AA 또는 AAA의 적합성 수준 표시기가 있습니다. 레벨 A 기준은 더 쉽게 충족되는 반면 AAA는 가장 엄격합니다.

내 웹사이트가 WCAG 2.2 AA를 준수하지 않으면 고소를 당합니까?

확실한 대답은 "아마도"입니다.

미국에서는 법률이 모호하며 ADA는 웹사이트를 명시적으로 다루지 않습니다. 물리적 공간에서 이루어져야 하는 숙박 시설에 대한 매우 구체적인 법률이 있지만 ADA가 웹사이트에 직접 적용할 수 있는 유일한 것은 회사의 "시설에 액세스할 수 있어야 한다"는 것입니다. 그럼에도 불구하고 모든 법원이 웹 사이트가 회사 시설로 간주되는지 여부에 동의하는 것은 아니며 "접근 가능"에 대한 명확한 정의는 어디에도 없습니다. 우리는 민간 기업의 웹사이트와 연방법에 대해 이야기하고 있습니다. 연방 및 일부 주 정부 웹사이트에는 적용되는 법률이 있습니다.

"접근 가능"에 대한 명확한 정의가 없기 때문에 WCAG에서 웹 사이트를 구축하거나 유지 관리할 때 해야 할 일을 알려줍니다. 미국 법률은 공개 웹사이트에 대한 WCAG(또는 기타 표준) 버전을 구체적으로 권장하지 않습니다. 그러나 모든 버전의 WCAG 성공 기준을 충족하기 위해 노력하는 것은 좋은 목표입니다. 모든 사람이 합리적으로 액세스할 수 있는 사이트로 연결되어야 합니다.

표준은 어떻게 개발됩니까?

일반적인 믿음과는 달리, 표준 개발은 선택된 소수의 참가자에 의해 상아탑에서 수행되지 않습니다. 대부분의 작업은 회원 조직의 직원이 수행하지만 작업의 대부분은 초대된 전문가 및 해당 주제에 대해 열정적이고 기꺼이 시간을 할애하는 개인이 수행합니다. 또한 많은 표준 팀에는 커뮤니티 구성원이 질문을 하거나 새로운 문제를 제기하여 참여하도록 권장되는 공개 포럼이 있습니다.

WCAG의 경우 대중은 새 문제, 풀 요청을 열거나 Github의 WCAG 리포지토리에서 기존 토론에 참여하여 표준에 대해 읽고 의견을 남길 수 있습니다. 아이디어가 있는 그룹에 올 때 기존 문제와 풀 리퀘스트를 모두 검색하여 아이디어가 이미 테이블에 나오지 않았는지 확인하는 것이 항상 현명합니다. 풀 리퀘스트를 통해 WCAG에 기여할 생각이라면 항상 시간을 내어 문제를 열고 먼저 아이디어를 논의하세요. 불필요한 작업을 절약할 수 있는 매우 좋은 기회가 있습니다.

표준에 기여하는 것은 답답하고 어려울 수 있지만 매우 보람 있는 일이기도 합니다. 대부분의 경우 참가자들은 매우 환영하고 인내합니다. 시간을 할애하여 아이디어를 조사하고, 실사를 하고, 예의 바르고 다른 사람을 존중한다면 기여를 환영할 것입니다. 최악의 결과는 가능하다고 생각했던 것보다 주제에 더 익숙해지는 것입니다.

변경 사항은 무엇입니까?

WCAG 2.2에서는 하나의 기존 성공 기준이 변경되었으며 9개의 새로운 성공 기준이 추가되었습니다. 여기서는 AAA를 거의 대상으로 하지 않기 때문에 레벨 A와 AA로 제한합니다. 새로운 기준을 모두 보려면 W3C의 전체 기사를 확인하세요.

2.4.7 보이는 초점(A)

이 기준은 레벨 AA에서 WCAG 적합성을 위한 가장 낮은 막대인 A로 변경되었습니다. 그것이 존재하는 이유 중 일부는 그리 멀지 않은 과거에 포커스 링을 제거하기 위해 웹사이트를 구축한 사람들에게 일반적인 관행이었습니다. 결국, 그것들은 디자인의 일부가 아니었습니다. 즉, 키보드로 웹 페이지를 탐색하는 사용자는 페이지에서 자신이 어디에 있는지 볼 수 없습니다. 많은 수의 사용자가 어떤 형태의 장애가 없는 사용자라도 키보드 탐색에 의존하기 때문에 이 기준을 단일 A로 이동하는 것이 합리적입니다.

모든 주요 웹 브라우저는 기본적으로 포커스 링을 표시합니다. 여기서 핵심 요구 사항은 기본 제공 기능을 중단하지 않는 것입니다.

W3C – 가시적 초점 이해

2.4.11 초점 모양(AA)

이 새로운 기준은 초점 링의 가시성에 대한 몇 가지 명확한 규칙을 정의합니다. 주변 픽셀 및 대체 픽셀과의 명암비가 3:1이어야 합니다. 또한 초점이 맞춰진 요소 또는 하위 구성요소를 둘러싸거나 요소의 가장 짧은 가장자리를 따라 4픽셀 두께의 선만큼 커야 합니다.

WCAG 표준을 충족하는 포커스 링의 예(출처: w3.org)
WCAG 표준을 충족하지 않는 포커스 링의 예(출처: w3.org)

다시 말하지만, 브라우저의 기본 포커스 링은 일반적으로 이 기준을 충족합니다. 사용자는 기본값에 익숙하므로 필요한 경우에만 기본값을 재정의해야 합니다. 기본 포커스 링과 브랜드의 기본 색상 사이에 색상 대비가 충분하지 않은 경우를 예로 들 수 있습니다. 브라우저는 일반적으로 기본적으로 파란색 초점 링을 사용하므로 브랜드 팔레트에 파란색이 있으면 충돌이 있을 수 있습니다.

W3C – 초점 모양 이해

2.4.12 초점이 흐려지지 않음(최소)(AA)

이 기준은 초점이 사용자 생성 콘텐츠에 의해 완전히 가려져서는 안 된다고 명시합니다. 이는 고정 탐색(사용자가 스크롤하는 동안 창 상단에 유지되는 메뉴 모음)과 같은 계층화된 콘텐츠가 포커스 표시기를 가리는 것을 방지하기 위한 것입니다.

여기서 가장 쉬운 수정은 끈적한 요소가 없는 것입니다. 그러나 최신 웹 사이트는 고정 탐색 및 부동 CTA를 자유롭게 사용하므로 선택 사항이 아닐 수 있습니다. scroll-padding 및 scroll-margin CSS 속성을 통해 언젠가는 고정 탐색을 수용할 오프셋을 정의할 수 있을 것이라는 기대가 있습니다. 현재 이러한 속성은 스크롤 스냅을 활용하는 요소에만 사용됩니다.

그것은 우리에게 JavaScript를 남깁니다. 일반적으로 우리의 목표는 필요할 때만 브라우저에서 JavaScript를 사용하는 것입니다. 이 StickyFix 기능은 기본 요소 내에서 초점을 맞출 수 있는 요소를 모니터링하고, 초점을 맞출 때 고정 탐색에 의해 가려지면 스크롤하여 볼 수 있습니다.

이 기능을 사용하려면 사이트의 JavaScript 파일에 포함하기만 하면 됩니다.

 /** * A minimal function that will detect if a focusable element is obscured by sticky navigation * This only works for sticky elements at the top of the page, but could be extended * @author Donovan Buck <[email protected]> * @param {string} selector - A valid CSS selector string for the sticky element * @param {number} offset - An additional offset for the focused element * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors * @tutorial https://www.brandextract.com/Insights/Articles/Changes-to-the-Web-Content-Accessibility-Guidelines/ * @license MIT */ function stickyFix(selector, offset = 0) { // Find the height of our sticky element const sticky = document.querySelector(selector); let stickyRect = sticky.getBoundingClientRect(); let stickyHeight = stickyRect.bottom - stickyRect.top; // Select all the focusable elements within the main element const focusables = document.querySelectorAll('main button:not([disabled]), main [href], main input:not([disabled]), main select:not([disabled]), main textarea:not([disabled]), main [tabindex]:not([tabindex="-1"]):not([disabled]), main details:not([disabled]), main summary:not(:disabled)'
 ); // Add a listener to each focusable element focusables.forEach(focusable => { focusable.addEventListener('focus', (event) => { const targetRect = event.target.getBoundingClientRect(); if(targetRect.top < stickyHeight + offset) { window.scrollTo({ top: targetRect.top + window.scrollY - stickyHeight - offset }); } }); }); };

그런 다음 함수를 호출할 수 있습니다.

 // Wait for the document to load document.addEventListener("DOMContentLoaded", function() { stickyFix('.sticky', 24); });

초점이 흐려지지 않는 이해(최소)

2.5.7 드래그 동작(AA)

이 기준은 드래그 동작이 사용자 인터페이스의 일부인 경우 간단한 포인트 앤 클릭 동작을 허용하는 대체 방법을 제공해야 함을 나타냅니다. 예를 들어 사용자가 업로드를 위해 컴퓨터에서 브라우저로 파일을 끌어다 놓을 수 있는 양식이 있습니다. 사용자가 파일 업로드 대화 상자를 사용하여 업로드할 파일을 선택할 수도 있는지 확인해야 합니다. 드래그 이동은 일반적으로 한 가지 예외를 제외하고 대부분의 웹 사이트 UI에서 필요하지 않습니다.

드래그 동작 이해하기

2.5.8 목표 크기(최소)(AA)

모든 포인터 대상은 최소 24 x 24픽셀이어야 합니다. 단, 해당 대상이 모든 인접 대상에서 최소 24픽셀 떨어져 있거나 대상이 문장이나 텍스트 블록에 있지 않은 경우입니다. 이 기준에 대한 디자인을 확인할 때 아이콘과 모든 탐색 목록만 사용하는 소셜 공유 링크를 확인하는 데 매우 주의하십시오.

목표 크기를 통과한 세 가지 예와 실패한 한 가지 예(출처: w3.org)

대상 크기 이해(최소)

3.2.6 일관된 도움말(A)

웹 사이트에 연락처 세부 정보, 자가 해결 옵션 또는 여러 페이지에 표시되는 연락처 메커니즘이 포함되어 있다고 가정합니다. 이 경우 해당 요소는 사이트 전체의 다른 페이지 콘텐츠에 대해 동일한 순서로 나타나야 합니다. 이것은 대체로 훌륭하고 일관된 디자인의 기능이며 이 기준을 충족하는 것이 어렵지 않아야 합니다.

일관된 도움말 이해

3.3.7 접근 가능한 인증(AA)

사용자가 사용자 이름과 암호를 기억하도록 강요하면 인지 장애가 있는 사람에게 과도한 부담이 될 수 있습니다. 이 때문에 웹 개발자는 비밀번호 관리자 사용이나 복사 및 붙여넣기를 허용하지 않는 로그인 프로세스를 생성해서는 안 됩니다. 이 기준은 암호를 기억하거나 퍼즐을 푸는 것과 같은 인지 기능 테스트에 의존하지 않는 한 대체 인증 방법을 허용합니다.

접근 가능한 인증 이해

3.3.9 중복 입력(A)

이 기준은 동일한 프로세스 동안 사용자가 이전에 입력한 모든 정보가 정보를 수동으로 다시 입력할 필요 없이 자동으로 채워지거나 사용자가 선택할 수 있음을 나타냅니다. 분명히 이것은 누구에게나 기대되는 편리함이어야 합니다.

중복 항목 이해

참고문헌

  • WCAG 2.2 초안의 새로운 기능
  • Github에 있는 W3C의 WCAG 저장소