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

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

Xhtml의 유효성을 검사하는 방법은 무엇입니까?

XHTML의 유효성을 검사한다는 것은 문서가 XML 구문과 선언된 DTD 또는 스키마라는 두 가지 규칙 계층을 준수하는지 확인하는 것을 의미합니다. XHTML 1.0은 HTML 4.01을 XML로 재구성한 것이므로, XHTML 1.0 Strict에서 <a target="_blank">가 나타나는 경우처럼 문서의 형식은 올바르지만(well-formed) 유효하지(invalid) 않을 수 있습니다.

XHTML 유효성 검사는 문서가 다음 두 가지 규칙 계층을 동시에 준수하는지 확인하는 것입니다.

  1. XML 구문 규칙: 올바르게 중첩된 태그, 따옴표로 묶인 속성, 모든 요소의 필수 닫기(<br />와 같은 빈 요소 포함), 단일 루트 요소, 일관되게 선언된 인코딩 등.
  2. DTD 규칙 또는 선언된 스키마: 어떤 요소와 속성이 존재하는지, 어떤 컨텍스트에서 나타날 수 있는지, 어떤 값이 허용되는지. 여기에는 XHTML 1.0(Strict, Transitional, Frameset), XHTML 1.1, XHTML Basic 및 XHTML Modularization의 클래식 DTD가 포함됩니다.

문서는 XML 형식이 올바르더라도(well-formed) 여전히 유효하지 않을 수 있습니다. 예를 들어 XHTML 1.0 Strict에서 <a target="_blank">를 사용하는 경우, 구문은 완벽하지만 target 속성이 해당 DTD에 존재하지 않습니다. 잘 구성된(well-formed) 것과 유효한(valid) 것 사이의 이러한 구별은 누군가가 오류를 보고 그 이유를 이해하지 못할 때 혼란을 일으키는 가장 큰 원인입니다.

XHTML 1.0은 W3C에서 정의한 HTML 4.01을 XML로 재구성한 것임을 기억하는 것이 좋습니다. 오늘날 그것의 실질적인 가치는 두 가지입니다. 여전히 application/xhtml+xml 또는 text/html로 제공되는 레거시 프로젝트에 사용되며, 깔끔한 마크업을 작성하기 위한 정신적 훈련 역할을 합니다. XHTML 유효성 검사 방법에 대한 완전한 규범적 컨텍스트를 원하신다면 W3C의 XHTML 1.0 사양이 기본 소스입니다.

추천하는 유효성 검사기 (및 사용 시점)

단 하나의 “정답”인 유효성 검사기는 없습니다. 선택은 조각(fragment), 프로덕션 페이지, 전체 사이트 또는 이미 XHTML5인 문서의 유효성을 검사하는지에 따라 달라집니다.

도구검증 대상권장 용도주요 제한 사항
W3C Markup Validation Service (validator.w3.org)XHTML 1.0/1.1, HTML4, HTML5URL, 파일 또는 직접 입력을 통한 일회성 검증최신 “Nu Html Checker”는 HTML5를 우선시하며, 이전 DTD는 수동 선택이 필요함
Nu Html Checker (vnu)HTML5 및 XHTML5신규 프로젝트, 로컬 및 CI 검증XHTML 1.x의 클래식 DTD를 검증하지 않음
로컬 검증기 (vnu.jar, tidy)설정에 따라 다름자동화, pre-commit, 파이프라인Java 또는 바이너리 설치 및 초기 설정 필요
xmllintXML Well-formedness 및 DTD/XSD 유효성 검사순수 XML 계층 확인스키마 외의 HTML 특정 규칙은 알지 못함
브라우저 / IDE 확장 프로그램실시간 마크업 검사작성 중 즉각적인 피드백엔진이 오래되었거나 불완전한 경우가 많음

W3C Markup Validation Service

XHTML 유효성 검사 방법을 찾는 이들에게 여전히 출발점이 되는 도구입니다. URI로 검증, 파일 업로드로 검증, 직접 입력으로 검증의 세 가지 모드를 지원합니다. 클래식 XHTML의 경우 Document Type 드롭다운 메뉴가 핵심입니다. 문서가 DOCTYPE을 통해 자체 DTD를 선언하면 검증기가 이를 존중하지만, 그렇지 않은 경우 수동으로 지정해야 합니다.

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

많은 이들이 모르는 세부 사항이 있습니다. 최신 W3C 검증기는 HTML5와 XHTML5를 이해하지만 이전 DTD의 우선순위를 낮게 처리하는 Nu Html Checker에 의존한다는 점입니다. XHTML 1.0 Strict의 경우 여전히 작동하지만, 결과가 느슨한 해석이 아니라 예상한 DTD를 반영하는지 확인하는 것이 좋습니다.

Nu Html Checker (vnu)

W3C가 내부적으로 사용하는 검증기입니다. 웹 서비스, JAR 실행 파일, Docker 이미지 형태로 제공됩니다. 가장 큰 장점은 로컬 및 지속적 통합(CI) 환경에서 실행할 수 있다는 점이며, 이는 대규모 사이트를 유지 관리할 때 필수적입니다. application/xhtml+xml로 제공되는 XHTML의 경우, vnu는 관대한 HTML 검증기가 통과시켰을 중첩 및 속성 오류를 감지해냅니다.

xmllint

XSLT 템플릿으로 XHTML을 생성하는 경우처럼 순수 XML 계층이 중요하다면 xmllint가 대체 불가능한 도구입니다. --noout --valid documento.xhtml 옵션을 사용하면 참조된 DTD에 대해 well-formedness와 유효성을 검사합니다. 빠르고 스크립트 작성이 가능하며 네트워크에 의존하지 않습니다.

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

에디터 내 검증

VS Code 확장 프로그램, IDE 플러그인 및 명령줄 도구는 즉각적인 피드백을 제공합니다. 편리하지만 표준 업데이트가 늦는 경향이 있습니다. 이를 유일한 검증 수단이 아닌, 첫 번째 방어선으로 사용하십시오.

XHTML 유효성 검사 단계별 방법

1. DOCTYPE 및 인코딩을 올바르게 선언하십시오

DOCTYPE은 어떤 규칙으로 검증할지를 결정합니다. XHTML 1.0 Strict의 경우:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
  <meta http-equiv="Content-Type"
        content="application/xhtml+xml; charset=UTF-8" />
  <title>Ejemplo válido</title>
</head>

여기서 흔히 발생하는 두 가지 오류는 xmlns 속성(XHTML에서 필수)을 누락하는 것과 meta 태그에 선언한 인코딩이 실제 파일과 일치하지 않는 것입니다. 검증기가 두 가지 모두 감지하지만, 두 번째 오류는 때때로 깨진 문자로만 나타납니다.

2. 유효성(validity)보다 형식(well-formedness)을 먼저 확인하십시오

DTD와 씨름하기 전에 XML 형식이 올바른지 확인하세요. xmllint --noout archivo.xhtml을 실행하면 몇 초 만에 알 수 있습니다. 여기서 실패하면 어떤 DTD 검증기도 도움이 되지 않습니다. 먼저 태그를 닫고, 중첩을 수정하고, 엔터티(&amp;, &lt;, &gt;)를 이스케이프 처리하십시오.

3. DTD를 기준으로 검증하십시오

형식이 올바른 문서를 W3C 검증기나 vnu에 통과시키십시오. 오류의 개수뿐만 아니라 유형을 검토하십시오. 단 하나의 중첩 오류가 첫 번째 오류를 수정하면 사라질 수많은 2차 오류를 생성할 수 있습니다.

4. 홈페이지만이 아닌 사이트 전체를 검증하십시오

메인 페이지만 검증하고 나머지도 괜찮을 것이라고 가정하는 것은 흔한 실수입니다. 템플릿, 컴포넌트 및 동적으로 생성된 페이지에서 잘못된 마크업이 도입되는 경우가 많습니다. 스크립트를 사용하여 주요 URL을 탐색하고 각 응답에 대해 vnu를 실행하여 자동화하십시오.

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

5. 검증을 워크플로우에 통합하십시오

수동 검증은 확장성이 없습니다. 새로운 오류가 발견되면 실패하도록 파이프라인(pre-commit 훅, 빌드 작업 또는 CI 작업)에 검증 단계를 추가하십시오. 이렇게 하면 잘못된 마크업이 프로덕션 환경에 배포되는 것을 막을 수 있습니다.

오류 해석: 반복해서 보게 될 오류들

  • “end tag for X omitted, but OMITTED end tags are not allowed”: <li>, <p> 또는 <td>를 닫지 않았을 때 발생하는 전형적인 오류입니다. XHTML에서는 모든 태그를 닫아야 합니다.
  • “there is no attribute X”: 해당 속성이 DTD에 존재하지 않습니다. 일반적인 사례: 일부 요소의 target, name 속성, XHTML 1.0의 data-* 속성(클래식 DTD에는 없음).
  • “element X undefined”: DTD에서 고려하지 않는 요소를 사용한 경우입니다. 주로 HTML5 마크업을 XHTML 1.0 문서로 복사했을 때 발생합니다.
  • “character data is not allowed here”: DTD가 요소만 예상하는 위치에 텍스트 콘텐츠가 있거나, 이스케이프 처리되지 않은 &가 있는 경우입니다.
  • “reference to entity X for which no system identifier could be generated”: XML에 정의되지 않은 명명된 HTML 엔터티(예: 선언되지 않은 &nbsp;)를 사용한 경우입니다. 순수 XHTML에서는 &#160;를 사용하거나 엔터티를 선언하십시오.

XHTML 유효성 검사의 황금률은 위에서 아래로 수정하는 것입니다. 첫 번째 오류가 보통 원인이며, 이후의 오류들은 그 결과인 경우가 많습니다.

XHTML5: 규칙을 바꾸는 미묘한 차이

HTML5 구문에 따라 직렬화된 XHTML5를 제공하는 경우 규칙이 바뀝니다. 더 이상 DTD가 없으며, 적합성은 WHATWG HTML 사양 및 W3C HTML 사양에 정의됩니다. 이때 올바른 검증기는 클래식 DTD 검증기가 아니라 Nu Html Checker입니다.

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

XHTML 유효성 검사와 관련하여 주의해야 할 실제 차이점은 다음과 같습니다.

  • data-* 속성은 XHTML5에서는 유효하지만, XHTML 1.0에서는 유효하지 않습니다.
  • DOCTYPE이 <!DOCTYPE html>로 단순화되었습니다.
  • 검증은 HTML5의 *적합성 검사기(conformance checker)*를 기준으로 수행되며, 이는 어떤 점에서는 더 관대하고 어떤 점(예: 특정 구식 요소 사용)에서는 더 엄격합니다.

XHTML 1.0과 XHTML5 사이의 선택은 단순한 기술적 문제가 아닙니다. 신규 프로젝트라면 vnu 검증을 사용하는 XHTML5가 합리적인 경로입니다. DTD 기반의 레거시 시스템을 유지 관리한다면 XHTML 1.0을 유지하고 해당 DTD를 기준으로 검증하십시오.

유효성 검사와 접근성: 서로 다른 두 계층

유효한 문서가 자동으로 접근 가능하다는 믿음은 흔한 오류입니다. 그렇지 않습니다. 유효성 검사는 구문 및 스키마 준수 여부를 확인하는 것이며, 접근성은 인식, 조작성, 보조 기술과의 호환성을 다루는 W3C의 WCAG를 기준으로 평가됩니다.

그럼에도 불구하고 실제 겹치는 부분이 있습니다. 잘못된 마크업은 보통 부실한 구조(잘못 중첩된 제목, 깨진 목록, 레이블이 없는 양식 등)를 의미하며, 이는 접근성에 영향을 줍니다. XHTML 및 기타 문서의 유효성을 검사하는 합리적인 전략은 먼저 유효성을 검사(구조적 노이즈 제거)하고, 그 후 axe, Lighthouse 또는 수동 검토와 같은 도구로 접근성을 감사하는 것입니다. 유효성 검사는 필요조건이지만 충분조건은 아닙니다.

XHTML 유효성 검사 시 자주 하는 실수

XHTML 유효성 검사 방법을 배울 때 다음과 같은 일반적인 실수를 피하십시오.

  • 홈페이지만 검증함: 문제가 되는 마크업은 보통 내부 템플릿에 있습니다.
  • 인코딩 무시: 잘못 선언된 charset은 유령 오류(ghost errors)를 생성합니다.
  • well-formed와 valid를 혼동함: 이들은 서로 다른 계층입니다. 순서대로 해결하십시오.
  • 잘못된 검증기 사용: XHTML5는 vnu, XHTML 1.x는 DTD 검증기를 사용하십시오.
  • 첫 번째 오류를 읽지 않고 연쇄 오류를 수정함: 시간 낭비이며 증상만 고치는 꼴이 됩니다.
  • 자동화 부재: 수동 검증은 두 번째 스프린트까지 살아남지 못합니다.
  • 유효함 = 접근 가능하다고 가정함: 서로 다른 목적을 가진 서로 다른 표준입니다.

핵심 요약

  • XHTML 유효성 검사는 XML well-formedness와 선언된 DTD 또는 스키마 준수라는 두 가지 계층으로 이루어집니다.
  • W3C Markup Validation Service와 **Nu Html Checker (vnu)**가 XHTML 유효성 검사의 표준 도구이며, xmllint는 순수 XML 계층을 담당합니다.
  • XHTML 1.0/1.1은 DTD 검증을 사용하고, XHTML5는 vnu를 사용하며 클래식 DTD는 무시하십시오.
  • 오류는 위에서 아래로 수정하십시오. 첫 번째 오류가 보통 이후의 오류를 유발합니다.
  • 파이프라인에 검증을 자동화하십시오. 수동 검토는 확장성이 없습니다.
  • 유효함이 곧 접근 가능함을 의미하지는 않습니다. 이들은 동등한 것이 아니라 상호 보완적인 표준입니다.

출처 및 추가 읽을거리

  • XHTML — Wikipedia: Extensible HyperText Markup Language (XHTML)은 널리 사용되는 HyperText Markup 버전을 미러링하거나 확장하는 XML 마크업 언어 제품군의 일부입니다…
  • XHTML Basic — Wikipedia: XHTML Basic은 초기 휴대폰, PDA, 호출기, 셋톱박스와 같이 컴퓨팅 성능이 제한된 단순한 사용자 에이전트를 위해 설계된 XML 기반 마크업 언어입니다…

자주 묻는 질문

잘 구성된(well-formed) XHTML과 유효한(valid) XHTML의 차이점은 무엇인가요?

잘 구성된 문서는 닫힌 태그, 올바른 중첩, 따옴표로 묶인 속성 등 XML의 구문 규칙을 따릅니다. 유효한 문서는 여기에 더해 자신이 선언한 DTD 또는 스키마를 준수하여, 해당 컨텍스트에서 허용된 요소와 속성만 사용합니다. 예를 들어 XHTML 1.0 Strict에 존재하지 않는 속성을 사용했다면, 형식은 올바르지만(well-formed) 유효하지 않은(invalid) 문서가 됩니다.

2024년에도 XHTML 유효성 검사가 의미가 있나요?

네, 두 가지 이유가 있습니다. 첫째, 많은 레거시 프로젝트가 여전히 XHTML을 제공하며, XML 모드에서 깨지지 않으려면 유효한 상태를 유지해야 합니다. 둘째, 유효성 검사는 접근성과 유지보수에 영향을 주는 구조적 오류를 찾아내는 훈련이 됩니다. 신규 프로젝트라면 HTML5나 XHTML5를 사용하겠지만, 검증하는 습관 자체는 여전히 가치가 있습니다.

XHTML5에는 어떤 검증기를 사용해야 하나요?

웹 서비스, 실행 가능한 JAR 및 Docker 이미지로 제공되는 Nu Html Checker (vnu)를 사용하십시오. 이는 최신 W3C Markup Validation Service가 사용하는 것과 동일한 엔진이며, HTML5 구문과 그 XHTML 직렬화 방식을 이해합니다. XHTML5에 클래식 DTD 검증기를 사용하지 마십시오. data-* 속성이나 기타 HTML5 기능을 인식하지 못합니다.

W3C 검증기가 이해할 수 없는 오류를 내뱉는 이유는 무엇인가요?

많은 오류가 이전 오류의 결과물이기 때문입니다. 잘못된 중첩 하나가 수십 개의 2차 메시지를 생성할 수 있습니다. 올바른 전략은 첫 번째 오류를 수정하고, 다시 검증하고, 이를 반복하는 것입니다. 또한 검증기가 DOCTYPE에 선언된 DTD를 적용하기 때문에, 해당 DTD가 예상과 다르다면 오류가 임의적으로 보일 수 있습니다.

명령줄(CLI)에서 XHTML 유효성을 검사할 수 있나요?

예. CLI를 통해 XHTML의 유효성을 검사하는 방법이 궁금하다면 xmllint --noout --valid archive.xhtml을 사용하여 DTD에 대해 올바른 형식과 유효성을 확인합니다. HTML5/XHTML5의 경우 vnu.jar archive.xhtml도 동일한 작업을 수행합니다. 두 옵션 모두 수동 검증으로는 한계가 있는 빌드 스크립트, 사전 커밋 후크 또는 지속적인 통합 작업에 통합하는 데 이상적입니다.

유효한 XHTML 사이트는 자동으로 접근성이 보장됩니까?

아니요. 유효성 검사는 구문 및 스키마 적합성을 확인합니다. 접근성은 대비, 키보드 탐색, 대체 텍스트 또는 의미 구조와 같은 측면을 다루는 WCAG에 대해 평가됩니다. 문서는 완벽하게 유효하지만 여전히 접근 불가능한 상태로 남아 있을 수 있습니다. 먼저 유효성을 검사하고 그 다음에 접근성을 감사하십시오. 이는 보완적인 계층입니다.

자주 묻는 질문

XHTML 형식과 XHTML 형식이 어떻게 다른가요?

잘 구성된 문서는 닫힌 태그, 올바른 중첩, 따옴표로 묶인 속성 등 XML의 구문 규칙을 따릅니다. 또한 유효한 문서는 선언된 DTD 또는 스키마를 존중합니다. 즉, 해당 컨텍스트에서 허용되는 요소와 속성만 사용합니다. 예를 들어 XHTML 1.0 Strict에 존재하지 않는 속성을 사용하는 경우 형식은 올바르지만 유효하지 않은 문서가 있을 수 있습니다.

¿ Sigue teniendo sentido validar XHTML en 2024?

그렇습니다. 두 가지 이유가 있습니다. 첫째, 많은 레거시 프로젝트는 계속해서 XHTML을 제공하고 XML 모드에서 중단되지 않도록 유효한 상태를 유지해야 합니다. 둘째, 검증은 접근성과 유지 관리에 영향을 미치는 구조적 오류를 감지하는 분야입니다. 새로운 프로젝트라면 HTML5나 XHTML5를 사용할 수도 있지만 유효성을 검사하는 습관은 여전히 ​​중요합니다.

XHTML5를 사용하여 유효성 검사를 받으셨나요?

웹 서비스, 실행 가능한 JAR 및 Docker 이미지로 사용 가능한 Nu Html Checker(vnu). 이는 최신 W3C 마크업 검증 서비스가 HTML5 구문 및 XHTML 직렬화를 사용하고 이해하는 것과 동일한 엔진입니다. XHTML5에는 기존 DTD 유효성 검사기를 사용하지 마십시오. 데이터 속성이나 기타 HTML5 기능을 인식하지 못합니다.

W3C 유효성 검사기에 오류가 있습니까?

많은 오류가 이전 오류의 결과이기 때문입니다. 잘못된 중첩으로 인해 수십 개의 보조 메시지가 생성될 수 있습니다. 올바른 전략은 첫 번째 오류를 수정하고 다시 검증하고 반복하는 것입니다. 또한 유효성 검사기가 DOCTYPE에 선언된 DTD를 적용하는 경우도 있습니다. 해당 DTD가 예상한 것과 다르면 오류가 임의적으로 보일 것입니다.

¿ Puedo validar XHTML desde la línea de comandos?

예. CLI를 통해 XHTML의 유효성을 검사하는 방법이 궁금하다면 xmllint --noout --valid archive.xhtml을 사용하여 DTD에 대해 올바른 형식과 유효성을 확인하세요. HTML5/XHTML5의 경우 vnu.jar archive.xhtml도 동일한 작업을 수행합니다. 두 옵션 모두 수동 검증이 확장되지 않는 빌드 스크립트, 사전 커밋 후크 또는 지속적인 통합 작업에 통합하는 데 이상적입니다.

¿ XHTML이 자동으로 액세스 가능합니까?

아니요. 유효성 검사는 구문 및 스키마 적합성을 확인합니다. 접근성은 대비, 키보드 탐색, 대체 텍스트 또는 의미 구조와 같은 측면을 다루는 WCAG에 대해 평가됩니다. 문서는 완벽하게 유효하지만 여전히 액세스할 수 없는 상태로 남아 있을 수 있습니다. 먼저 접근성을 검증하고 그 후에 접근성을 감사합니다. 이는 보완적인 계층입니다.


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

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