메인 콘텐츠로 이동
Niquelao 스페인어로 배우는 웹 접근성과 프론트엔드 개발: WCAG 표준, 접근 가능한 위젯 및 Firefox 확장 프로그램을 실제 코드로 설명합니다.

이 사이트의 일부 링크는 제휴 링크입니다. 해당 링크를 통해 구매하실 경우 추가 비용 없이 소정의 수수료를 받을 수 있으나, 이는 추천 내용에 영향을 주지 않습니다. 자세한 내용은 제휴 공개 정책을 확인하세요. 제휴 마케팅 공개.

웹사이트 접속: características clave comparadas

웹 접근성은 유럽의 EN 301 549 표준에서 요구하는 WCAG 2.2의 13개 레벨 A 및 AA 기준에 따라 표현된 인지 가능, 작동 가능, 이해 가능 및 견고함이라는 네 가지 측정 가능한 특성으로 정의됩니다. 이 네 가지 특성은 평가 기준으로 작용합니다. 모든 위젯, 도구 또는 프레임워크는 얼마나 많은 것을 충족하고 어떤 견고성을 가지고 있는지에 따라 판단됩니다.

주요 내용

  • WCAG의 네 가지 특성(인식 가능, 작동 가능, 이해 가능, 견고함)은 슬로건이 아닌 평가 프레임워크입니다. 각각은 문서화된 기술을 사용하여 검증 가능한 기준을 그룹화합니다.
  • 레벨 AA는 대부분의 프로젝트의 실제 목표입니다. 이는 대비, 키보드, 양식 레이블, 구조 및 오류 메시지를 다루며 유럽 법률을 참조하는 임계값입니다.
  • 실제 문제의 일부 이상을 감지하는 자동 도구는 없습니다. 키보드와 스크린 리더를 사용한 수동 테스트는 여전히 대체할 수 없습니다.
  • “접근 가능한” 위젯이나 프레임워크를 선택하려면 마케팅뿐만 아니라 키보드 동작, 포커스 관리 및 ARIA 의미 체계를 확인해야 합니다.
  • 규정 준수는 보관되는 일회성 감사가 아니라 제품 수명주기와 연결된 지속적인 프로세스입니다.

”웹 접근성 특성”의 실제 의미

“특성(characteristics)“이라는 용어는 두 가지 방식으로 사용되며 이를 구분하는 것이 좋습니다. 첫 번째는 규범적인 의미입니다. WCAG는 성공 기준을 인지 가능, 작동 가능, 이해 가능, 견고함이라는 네 가지 원칙 또는 특성으로 구성하며, 영어 약자로 POUR라고 합니다. 두 번째는 실무적인 의미입니다. 개발자가 어떤 컴포넌트가 “접근성 특성이 좋다”고 말할 때는 보통 구체적인 동작 세트(키보드 탐색, 올바른 ARIA 역할, 충분한 대비, 대체 텍스트 등)를 의미합니다. 이 두 가지 관점 모두 필요합니다. 전자는 평가 프레임워크를 제공하고, 후자는 구현 가능한 세부 사항을 제공합니다.

2023년 W3C에서 발표한 WCAG 2.2는 네 가지 원칙을 유지하면서 타겟 크기 최소화(2.5.8) 및 도움말 일관성(3.2.6)과 같은 기준을 추가했습니다. 레벨 A는 최소 기준을 그룹화하고, AA는 대부분의 사이트에 가장 관련성이 높은 기준을 추가하며, AAA는 지향점이며 전체적으로 요구되는 경우는 드뭅니다. 스페인이나 라틴 아메리카를 대상으로 하는 XHTML/CSS 사이트의 현실적인 목표는 AA입니다. 이는 유럽 조화 표준 EN 301 549 및 공공 부문 사이트 접근성에 관한 지침(EU) 2016/2102가 참조하는 수준이기 때문입니다.

Las cuatro características WCAG, una por una

인지 가능

인지 가능 특성은 사용자가 감각에 관계없이 정보를 인식할 수 있는 형태로 제공될 것을 요구합니다. 실무적으로는 비텍스트 콘텐츠에 대한 텍스트 대안(1.1.1), 멀티미디어에 대한 자막 및 전사(1.2.x), 위치나 색상에만 의존하지 않는 시맨틱 구조(1.3.1), 일반 텍스트 4.5:1 및 큰 텍스트 3:1의 최소 대비(1.4.3), 가로 스크롤 없이 200% 확대해도 읽기 쉬운 콘텐츠(1.4.10)로 구현됩니다. 오래된 XHTML 사이트에서 자주 발생하는 오류는 레이아웃용 테이블이나 텍스트 이미지를 사용하는 것입니다. 이는 읽기 순서와 확장성이 상실되어 인지 가능성을 해칩니다.

작동 가능

작동 가능 특성은 모든 인터페이스 구성 요소가 키보드 및 보조 기술로 작동함을 보장합니다. 핵심 기준은 완전한 키보드 접근성(2.1.1), 포커스 트랩 부재(2.1.2), 조정 가능한 시간(2.2.1), 움직이는 콘텐츠를 일시 중지하는 메커니즘(2.2.2), 건너뛰기 링크 및 설명적인 페이지 제목을 통한 탐색(2.4.1, 2.4.2), 논리적인 포커스 순서(2.4.3) 및 충분한 타겟 크기(2.5.8)입니다. 대부분의 드롭다운 메뉴, 모달, 캐러셀이 여기서 실패합니다. 포커스를 캡처한 후 돌려주지 않거나, 키보드 대응 없이 마우스 이벤트(onmouseover)에만 의존하기 때문입니다.

이해 가능

이해 가능 특성은 콘텐츠와 인터페이스 작동 방식이 이해될 수 있어야 함을 다룹니다. 여기에는 lang 속성으로 선언된 페이지 언어(3.1.1), 양식의 레이블 및 입력 도움말(3.3.2), 오류 식별 및 설명(3.3.1, 3.3.3), 페이지 간 일관된 탐색(3.2.3), 그리고 WCAG 2.2의 도움말 일관성(3.2.6)이 포함됩니다. 필드를 빨간색으로 표시하지만 무엇이 잘못되었는지 설명하지 않는 양식은 장애가 없는 사람에게 시각적으로 명확하더라도 이 특성을 충족하지 않는 것입니다.

관련 항목: — 무료로 계획을 세우는 위젯 de empezar hoy mismo.

로부스타

견고함 특성은 현재 및 미래의 사용자 에이전트를 포함하여 광범위한 환경에서 콘텐츠가 작동할 것을 요구합니다. 핵심 기준은 올바른 구문 분석(4.1.1, WCAG 2.2에서는 폐지되었으나 XHTML에서는 여전히 중요)과 인터페이스 구성 요소의 이름, 역할, 값(4.1.2)입니다. 실무적으로는 유효한 HTML을 작성하고, 가능한 한 네이티브 요소를 사용하며, ARIA는 대안이 없을 때만 사용하는 것을 의미합니다. 이는 “네이티브 HTML 요소가 이미 기능을 수행한다면 ARIA를 사용하지 말라”는 ARIA의 첫 번째 규칙을 따르는 것입니다.

비교표: 도구와 위젯을 평가하고 문자를 확인하세요.

Característica위젯이나 도구를 비교해보세요세날 데 알람
인지 가능일반 대체 텍스트, 대조 대조, 색상 의존 없음이미지만 확인하고 구조와 대비를 무시하고
작동 가능Navegación por teclado, gestión de foco, 죄의 트램파스탈출을 원하지 않으면 탈출을 선택하세요
이해가능Etiquetas, mensajes de error, 관용구 선언Marca errores sin texto explicativo
로부스타HTML 실행, ARIA 수정 역할, 다양한 탐색 기능Usa div con onclick en lugar de button

이 테이블은 선택 사항에 대한 결정 기준 목록을 작성합니다. 단일 큐브의 기둥이 “인식 가능”하다는 사실은 기본 필터에 포함되어 있지 않으며 인증서가 없습니다.

Herramientas y su relación con las características

axe DevTools, WAVE, Lighthouse와 같은 자동 평가 도구는 주로 인지 가능 및 견고함 특성과 관련된 문제(대체 텍스트 누락, 대비 부족, 잘못된 ARIA 속성, 헤딩 계층 구조 등)를 감지합니다. 이러한 도구의 커버리지는 설계상 부분적입니다. 대체 텍스트가 설명적인지, 포커스 순서가 논리적인지, 오류 메시지가 이해 가능한지는 판단할 수 없습니다. axe에 대한 Deque의 문서와 WebAIM의 자동 평가 가이드는 어떤 도구도 인간의 검토를 대체할 수 없다는 점에 동의합니다.

볼만한 가치가 있는 곳: — Accesibilidad gestionada: 자동화와 인간의 개정 결합.

수동 테스트에서는 도구에서 볼 수 없는 내용을 다룹니다. 최소한의 절차에는 Tab 및 Shift+Tab만으로 전체 페이지 탐색, 포커스가 항상 표시되는지 확인, 스크린 리더(NVDA 또는 VoiceOver)로 테스트, 200%로 확대하고 겹치는 것이 없는지 확인, 콘텐츠 순서가 올바른지 확인하기 위해 CSS 비활성화가 포함됩니다. 이 마지막 단계는 어떤 도구도 지적하지 않는 이해할 수 있는 특성의 문제점을 드러냅니다.

Cómo elegir según eltipo de proyecto

스페인의 기관 또는 공공 부문 사이트는 규정상 AA 수준을 목표로 하고 준수 여부를 문서화해야 합니다. 개인 블로그는 대부분의 실제 장벽을 해결하는 인지 가능 및 작동 가능 특성을 우선시할 수 있습니다. 대화형 컴포넌트가 많은 복잡한 웹 애플리케이션은 견고함과 작동 가능성에 투자해야 합니다. 맞춤형 위젯이 주요 오류의 원인이 되기 때문입니다. 결정 기준은 “얼마나 많은 특성을 충족하는가”가 아니라 “내 사용자와 법적 의무에 어떤 특성이 결정적인가”가 되어야 합니다.

프레임워크 및 구성 요소 라이브러리의 경우 실제 평가에는 구성 요소를 채택하기 전에 키보드로 테스트하는 작업이 포함됩니다. 화살표에 반응하지 않는 사용자 정의 “선택”, 포커스를 올바르게 트랩하지 않는 모달 또는 마우스 오버 시에만 나타나는 도구 설명은 라이브러리가 조작성보다 모양을 우선시한다는 신호입니다. W3C ARIA Authoring Practices Guide 문서는 각 위젯의 예상 패턴을 설명하고 비교 기준을 제공합니다.

오류 해석 시 오류가 발생했습니다.

첫 번째 오류는 네 가지 특성을 이분법적인 체크리스트로 취급하는 것입니다. 준수 여부는 누적적이고 맥락적입니다. 사이트가 40개 기준을 충족하더라도, 단 하나의 기준 실패가 사용자의 접근을 완전히 차단할 수 있습니다. 두 번째 오류는 스크립트로 사이트를 수정해 준다는 “오버레이” 또는 접근성 위젯을 신뢰하는 것입니다. 이러한 제품은 기본 HTML을 수정하지 않으며, 장애인 단체와 커뮤니티로부터 비판을 받아왔습니다. 세 번째 오류는 단 한 번만 감사하는 것입니다. 콘텐츠는 변경되고 컴포넌트는 업데이트되며 준수 상태는 저하됩니다. 접근성은 매 배포마다 테스트가 이루어지는 개발 수명 주기에 통합된 프로세스여야 합니다.

자주 묻는 질문

WCAG에 따른 웹 접근성의 네 가지 특성은 무엇인가요?

WCAG는 기준을 인지 가능, 작동 가능, 이해 가능, 견고함(POUR라고 함)이라는 네 가지 원칙으로 구성합니다. 각 원칙은 검증 가능한 성공 기준을 레벨 A, AA 및 AAA로 그룹화합니다. 이 구조는 WCAG 2.2에서 유지되며 모든 사이트나 구성 요소를 평가하기 위한 기초입니다.

내 사이트는 어떤 WCAG 준수 수준을 충족해야 하나요?

Para la mayoría de sitios, el nivel AA es el objetivo práctico y el que reference la legislación Europea a través del estándar EN 301 549. El nivel A cubre lo mínimo y el AAA es difícil de alcanzar en su totalidad. Si tu sitio es del Sector público en la UE, el AA es exigible.

관련 항목: — La certificación profesional que acredita tu experiencia en accesibilidad.

자동 도구만으로 접근성 특성을 충족하기에 충분한가요?

아니요. Las herramientas automáticas discoveran una parte de los Problemas, sobre todo de contrastie, texto alternativo y ARIA mal formado, pero no pueden evaluar si un texto alternativo es adecuado o si el orden de foco tiene sentido. La revisión manual con teclado y lector de Pantalla es imprescindible para unaconfidad real.

¿ Qué diferencia hay entre accesibilidad y usabilidad?

접근성은 장애인이 콘텐츠를 인식하고, 운영하고, 이해하고, 사용할 수 있도록 보장합니다. 유용성은 모든 사용자에게 효율적이고 만족스러운 경험을 보장하는 것을 추구합니다. 중복됩니다. 일반적으로 접근 가능한 사이트가 더 유용하지만, 사용 가능한 사이트가 반드시 접근 가능한 것은 아닙니다.

접근성 위젯이나 오버레이가 사이트를 자동으로 수정해 주나요?

구조, 의미에 초점을 맞춰 HTML 하위 항목에 문제가 있는 경우 정정할 수 없습니다. La comunidad de accesibilidad y diversos informes los hancuestionado porque pueden dar una falsa sensación de Confidad. La solución pasa por corregir el código y los componentes, no por superponer un script.

쇼핑하는 경우: — 48시간 동안 WCAG에 대한 IA의 중첩.

기존 XHTML/CSS 사이트의 접근성을 어떻게 개선하기 시작해야 하나요?

Empieza por lo que más Impacto Tiene: HTML válido y semántico, texto alternativo en imágenes, contrast e suficiente, navegación completa por teclado y etiquetas en formarios. 자동 감사와 실제 매뉴얼을 보완하는 감사를 실시합니다. Documenta los criterios cubiertos y reite el proceso en cada cambio 관련 항목입니다.

자주 묻는 질문

¿ Cuáles son las cuatro características de la accesibilidad web según las WCAG?

WCAG는 기준을 인지 가능, 작동 가능, 이해 가능, 견고함(POUR라고 함)이라는 네 가지 원칙으로 구성합니다. 각 원칙은 검증 가능한 성공 기준을 레벨 A, AA 및 AAA로 그룹화합니다. 이 구조는 WCAG 2.2에서 유지되며 모든 사이트나 구성 요소를 평가하기 위한 기초입니다.

¿ Q는 WCAG 규정을 준수하는 데 적합합니까?

Para la mayoría de sitios, el nivel AA es el objetivo práctico y el que reference la legislación Europea a través del estándar EN 301 549. El nivel A cubre lo mínimo y el AAA es difícil de alcanzar en su totalidad. Si tu sitio es del Sector público en la UE, el AA es exigible.

¿ Las herramientas automáticas bastan para cumplir las características de accesibilidad?

아니요. Las herramientas automáticas discoveran una parte de los Problemas, sobre todo de contrastie, texto alternativo y ARIA mal formado, pero no pueden evaluar si un texto alternativo es adecuado o si el orden de foco tiene sentido. La revisión manual con teclado y lector de Pantalla es imprescindible para unaconfidad real.

¿ Qué diferencia hay entre accesibilidad y usabilidad?

접근성은 장애인이 콘텐츠를 인식하고, 운영하고, 이해하고, 사용할 수 있도록 보장합니다. 유용성은 모든 사용자에게 효율적이고 만족스러운 경험을 보장하는 것을 추구합니다. 중복됩니다. 일반적으로 접근 가능한 사이트가 더 유용하지만, 사용 가능한 사이트가 반드시 접근 가능한 것은 아닙니다.

¿ 위젯이 없거나 자동으로 액세스할 수 있는 오버레이가 있습니까?

구조, 의미에 초점을 맞춰 HTML 하위 항목에 문제가 있는 경우 정정할 수 없습니다. La comunidad de accesibilidad y diversos informes los hancuestionado porque pueden dar una falsa sensación de Confidad. La solución pasa por corregir el código y los componentes, no por superponer un script.

XHTML/CSS가 존재하는 사이트에 액세스할 수 있는 방법이 있습니까?

Empieza por lo que más Impacto Tiene: HTML válido y semántico, texto alternativo en imágenes, contrast e suficiente, navegación completa por teclado y etiquetas en formarios. 자동 감사와 실제 매뉴얼을 보완하는 감사를 실시합니다. Documenta los criterios cubiertos y reite el proceso en cada cambio 관련 항목입니다.


¿ Cumplir WCAG가 코드를 작성하고 있습니까?

48시간 동안 WCAG에 대한 IA의 중첩