4.9: Validación de marcas
- Page ID
- 154673
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)Muchas herramientas de edición HTML tendrán la validación de marcado incorporada en ellas, por lo que puede probar la validez del código mientras lo crea, pero dado que la mayoría de los sitios son piezas ensambladas dinámicamente, estos validadores incorporados tienen una utilidad limitada. Es necesario validar el marcado después de que el código haya sido generado en una página web utilizando herramientas como el Validador HTML del W3C. Esta es una herramienta que debes agregar a tu Toolkit.
La Guía WCAG 2.0 que se ocupa de la validación de marcas es la Directriz 4.1.1. Tenga en cuenta que el análisis es un requisito de Nivel A, por lo que a pesar de que algún código “descuidado” puede sobrevivir sin afectar la accesibilidad, la validación de marcas debe realizarse para cumplir con WCAG 2.0. La pauta se reproduce a continuación para su referencia.
4.1.1 Análisis: En el contenido implementado usando lenguajes de marcado, los elementos tienen etiquetas de inicio y fin completas, los elementos se anidan de acuerdo a sus especificaciones, los elementos no contienen atributos duplicados y cualquier ID es único, excepto cuando las especificaciones permiten estas características. (Nivel A)
Nota: Las etiquetas inicial y final a las que les falta un carácter crítico en su formación, como un corchete de ángulo de cierre o una comilla de valor de atributo no coincidente, no están completas.
¿Por qué realizar la validación de marcas?
La validación de marcas garantiza que el HTML del contenido web esté bien formado y se use de una manera que cumpla con las especificaciones HTML. Es importante que HTML esté limpio y correctamente estructurado por las siguientes razones:
- Las tecnologías de asistencia, como los lectores de pantalla, generalmente se basan en el HTML para interpretar correctamente el contenido. Las tecnologías intentarán corregir los errores de marcado por sí mismas, pero hay algunos errores de marcado que dispararán las tecnologías de asistencia, como celdas de tabla que no están cerradas o identificadores duplicados utilizados en una página.
- El marcado limpio es una señal de trabajo de calidad, y validar HTML debería ser algo que los desarrolladores hagan de manera consistente.
- El marcado limpio garantiza que las barreras no se introduzcan inadvertidamente debido al código roto.
¿Cuándo Realizar la Validación de Marcado?
La validación de marcas debe realizarse lo antes posible en el proceso de auditoría de accesibilidad web. Puede ayudar a descartar barreras aparentes al probar contenido con tecnologías de asistencia, por lo que es útil validar el HTML antes de hacer cualquier prueba del lector de pantalla. Hablaremos más sobre las pruebas del lector de pantalla en la sección Pruebas de lector de pantalla.
Restricciones notables de la validación de marcas
En realidad puede ser difícil lograr una validación del 100%, y en ocasiones puede ser necesario dejar ir los errores de marcado. A continuación se presentan algunos ejemplos de situaciones que podrían requerir el juicio de un desarrollador y/o auditor.
ARIA en un documento XHTML: Es posible que los desarrolladores deseen usar ARIA en un documento XHTML, lo que fallará en la validación porque ARIA no forma parte de la especificación XHTML (es parte de HTML5). El uso de ARIA en XHTML puede mejorar la accesibilidad, por lo que como auditor puede optar por ignorar estos errores de validación.
Elementos HTML5: Si se están utilizando elementos HTML5 como nav para crear una barra de navegación, la validación producirá advertencias si se usa ARIA role="navigation” en ese elemento. Se supone que el elemento nav ya tiene un papel de navegación incorporado. En realidad, sin embargo, todavía hay un soporte inconsistente para el elemento nav, por lo que los desarrolladores a menudo agregarán role="navigation” como alternativa para tecnologías que no identifican a nav correctamente. Desde una perspectiva de accesibilidad, no hace daño tener los roles redundantes en los elementos HTML5.
Servicios externos: Otro problema común de validación ocurre cuando los desarrolladores utilizan servicios externos dentro del marcado que inyecta HTML de terceros en el código de un sitio. Los anuncios de Google de Adwords, por ejemplo, tienden a introducir errores de validación, aunque estos errores no tienen relación con la accesibilidad.
En todos los casos anteriores, se necesita juicio para decidir si el marcado inválido crea una barrera potencial o no, y si estos errores deben ser reportados en una auditoría de accesibilidad web. Dichos errores pueden hacer que un sitio falle en el Nivel A, lo que puede tener implicaciones legales en jurisdicciones que requieren el cumplimiento del Nivel A. También pueden tener implicaciones para los auditores que opten por ignorar estos errores y pasar un sitio en el Nivel A, a pesar de que el HTML no valida.
Cómo funcionan los validadores
Al igual que los verificadores de accesibilidad automatizados, es posible que el validador evalúe el marcado a través de URL, carga de archivos o pegando en HTML. Tenga en cuenta que el HTML debe ser un documento HTML completo, con todos los componentes necesarios incluyendo una declaración DOCTYPE, un elemento HTML de apertura, un elemento HEAD y Title, así como elementos BODY de apertura y cierre y un elemento HTML de cierre al final del documento.
Al ejecutar el validador hay una variedad de ajustes que se pueden ajustar, aunque los ajustes predeterminados suelen ser suficientes. Una opción que puede querer habilitar es “Mostrar fuente” que imprime el HTML de la página, lo que facilita identificar exactamente dónde ocurren los problemas en la página. Esta opción y otras se muestran en la captura de pantalla del Validador W3C que sigue. El Validador W3C también identificará algunos problemas de accesibilidad, como imágenes que faltan texto alt o el uso de ID duplicados dentro del contenido.
Figura: La pantalla de apertura del W3C Markup Validation Service, con varias opciones mostradas
Volver arriba