WCAG 2.1의 새로운 기능 : 이름의 레이블

2018 년에 출시 된 WCAG 2.1은 웹 접근성을 향상시키는 몇 가지 새로운 성공 기준을 도입했습니다. 이 기사는 사용자 인터페이스 구성 요소 라벨링의 중요한 측면 인 "Name in Name"(2.5.3)에 중점을 둡니다. 우리는 일반적인 함정, 솔루션 및 모범 사례를 탐구합니다.

성공 기준 이해

성공 기준은 접근성 준수를 정의하는 테스트 가능하고 기술적 인 진술입니다. "이름의 레이블"은 구성 요소의 시각적 레이블이 프로그래밍 방식과 일치하는지 여부를 평가합니다. WCAG 2.1의 "운영 가능한"범주의 일부이며, 특히 입력 방식을 다루는 것입니다. 중요하게도, WCAG 2.1은 WCAG 2.0과 후진 호환입니다.

이름의 레이블 : Visual vs. Programmatic

WCAG 2.5.3 (레벨 A)에 따르면 : "텍스트의 텍스트 또는 이미지가 포함 된 레이블이있는 사용자 인터페이스 구성 요소의 경우 이름에는 시각적으로 제시된 텍스트가 포함되어 있습니다."

이를 통해 시각적으로 제시된 레이블과 구성 요소의 프로그래밍 이름 (액세스 가능한 이름) 사이의 일관성이 보장됩니다. 이 일관성은 스크린 리더 및 음성 인식 소프트웨어와 같은 보조 기술 사용자에게 매우 중요합니다. 시각적 및 프로그래밍 방식의 이름은 동일 할 필요는 없지만 공통적 인 관련 용어 (예 : "제출"및 "제출 양식")를 공유해야합니다. 불일치는 혼란을 일으키고 접근성을 방해합니다.

보조 기술 영향

HTML 연락처 양식을 고려하십시오. 음성 인식을 사용하는 사용자는 시각적 텍스트 "보내기"가 있지만 "제출"이라는 프로그래밍 방식의 버튼이 발생할 수 있습니다. 이 불일치는 실패입니다. 비주얼 레이블에 의존하는 사용자는 음성 명령을 사용하여 버튼을 활성화 할 수 없습니다. 시각적 및 프로그래밍 방식 (두 경우 모두 "Send")과 일치하면이 문제가 해결됩니다. aria-label 값을 추가하지 않으면 제거하는 것이 바람직합니다.

스크린 리더 사용자는 또한 일관된 라벨링의 혜택을받습니다. 그들이 보는 것과 유사한 청각 텍스트는 유용성을 향상시킵니다. 반대로, 불일치 한 레이블은 스크린 리더를 통해 탐색하는 사용자를위한 음성 입력 또는 혼란을 통해 우발적으로 컨트롤을 활성화 할 수 있습니다. 기준은 시각적 라벨이없는 구성 요소에는 적용되지 않습니다.

코드 예제 : 실패 상태 및 수정

이 기사는 세 가지 실패 시나리오를 제시합니다.

1. 음성 레이블과 시각적 라벨 간의 연결이 끊어집니다.
2. "접근성 숨겨진"스팬으로 인한 레이블 불일치.
3. aria-labelledby 속성이있는 입력은 음성 레이블과 시각적 레이블 사이의 상관 관계를 설정하지 못하는 입력입니다.

이 예는 일반적인 오류를 강조합니다. 그런 다음이 기사는 각 시나리오에 대한 수정 된 코드 스 니펫을 제공합니다.

2020 Webaim 연구에 따르면 420 만 개의 형태 입력의 55%가 부적절하게 표시되어 있습니다.

적절한 라벨 입력 페어링 사용<label></label> 요소는 중요하지만 aria-label 통한 프로그래밍 방식 이름 (접근 가능한 이름)도 마찬가지로 중요합니다. 사이의 불일치<label></label> 텍스트 및 aria-label 인지 장애 및 음성 입력 사용자가있는 사용자를위한인지 과부하를 만듭니다.

레이블 배치 및 텍스트 특이성

이 기사는 문자 그대로 상징적으로 사용하는 경우 텍스트가 시각적 레이블로 간주되지 않는다는 것을 명확하게합니다. 풍부한 텍스트 편집기, 종종 이미지를 텍스트로 사용하는 것은 이것을 예시합니다.

일관성을 위해 시각적으로 근접한 레이블은 레이블 텍스트로 간주되어야합니다. 최적의 배치 가이드 라인에는 다음이 포함됩니다.

• 텍스트 입력 및 드롭 다운 왼쪽.
• 확인란과 라디오 버튼의 오른쪽.
• 내부 버튼 또는 탭 또는 아이콘 버튼 아래.

구두점과 자본화의 사소한 변화는 상징적이지 않으면 허용됩니다.

시각적 레이블이없는 구성 요소는이 성공 기준에서 제외됩니다.

적절한 라벨링의 이점

일관된 라벨링을 사용하면 음성 입력 사용자가 컨트롤을 완벽하게 활성화하여 추측을 제거 할 수 있습니다. 포괄적 인 디자인은 모든 사용자에게 도움이되며보다 즐겁고 접근 가능한 경험을 창출합니다.

결론과 테스트

이 기사는 WCAG 2.5.3을 요약하여 단순성에도 불구하고 그 중요성을 강조합니다. A- 레벨 준수 요구 사항을 강조합니다. 프로그래밍 방식 이름에 시각적으로 제시된 텍스트가 포함되어 있는지 확인합니다.

브라우저 개발자 도구 (Chrome DevTools, Firefox 개발자 도구) 또는 Wave 및 AX와 같은 접근성 감사 도구를 사용하여 테스트를 수행 할 수 있습니다. 이 기준을 준수하지만 사소한 것처럼 보이지만 모든 사용자의 접근성을 크게 향상시킵니다.

위 내용은 WCAG 2.1의 새로운 기능 : 이름의 레이블의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!