Diferencia entre revisiones de «Principio 4/4.1 Compatible/4.1.1-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''4.1.1-A. Código bien formado''' ==
{{CriterioWCAG
|id_wcag_criterio=4.1.1
|id_wcag_subcriterio=4.1.1-A
|wcag_titulo_criterio=4.1.1-A. Código bien formado
|wcag_nivel=A
|wcag_version=2.0 (Eliminado en 2.2)
|wcag_principio=4_Robusto
|wcag_principio_url=Principio_4
|wcag_pauta=4.1_Procesamiento
|wcag_pauta_url=Principio_4/4.1_Procesamiento
|wcag_grupo=Estructura_del_codigo
|wcag_subgrupo=Código_bien_formado


<!-- Análisis interno: Este criterio impacta principalmente a: Personas con discapacidad visual total y usuarios de tecnologías de asistencia (lectores de pantalla). Problema grave: Si el código tiene errores de sintaxis o no está bien formado, los lectores de pantalla no pueden interpretar correctamente el contenido ni el orden de lectura. Gravedad: Barrera grave, ya que impide la comprensión completa del contenido y la navegación accesible. -->
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>


<!-- criterio 4.1.1-A -->
|wcag_lista_discapacidades=
<html>
[[Categoría:Discapacidad visual total]]
<article class="wcag-card">
  <section class="wcag-info">
    <ul>
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
      <li><span class="label">Versión:</span><span class="value">2.0 (Eliminado en WCAG 2.2)</span></li>
      <li><span class="label">Principio:</span><span class="value">4. Robusto</span></li>
      <li><span class="label">Pauta:</span><span class="value">4.1 Procesamiento</span></li>
      <li><span class="label">Categoría:</span><span class="value">Estructura del código</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Código bien formado</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_texto_criterioOAW=
    <p>Usuarios más afectados</p>
El código no debe tener errores de sintaxis y debe estar bien formado de forma que pueda ser procesado de forma automática sin ambigüedades
    <ul>
 
      <li>
|wcag_descripcion_resumida=
        <img src="/images/4/4d/Sinvision.png" alt="Icono discapacidad visual total" class="icono-discapacidad" />  
Garantiza que el marcado sea válido y semánticamente correcto, evitando ambigüedades y errores que impidan a los agentes de usuario y tecnologías de asistencia interpretar el contenido. Requiere etiquetas completas, anidamiento adecuado, atributos únicos y valores correctamente definidos.
        Personas con discapacidad visual total – <span class="gravedad">Barrera grave</span>
 
      </li>
|wcag_objetivo=
    </ul>
Asegurar que el contenido pueda ser procesado e interpretado por navegadores, lectores de pantalla y herramientas futuras, evitando errores de estructura que rompan la accesibilidad o la experiencia de usuario.
   </section>
 
</article>
|wcag_importancia=
Aunque eliminado en WCAG 2.2, sigue siendo esencial para la fiabilidad técnica. 
 
El código mal formado puede impedir que lectores de pantalla comprendan la estructura y provoquen errores de navegación, lectura incorrecta o pérdida de contenido accesible.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G134 G134: Validating Web pages]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H74 H74: Ensuring that opening and closing tags are used according to specification]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H93 H93: Ensuring that id attributes are unique on a Web page]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H94 H94: Ensuring that elements do not contain duplicate attributes]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H75 H75: Ensuring that Web pages are well-formed]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F70 F70: Failure due to incorrect use of start and end tags or attribute markup]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F77 F77: Failure due to duplicate values of type ID]</span></li>
</ul>
 
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<li>Validar HTML y CSS con herramientas automáticas</li>
<li>Verificar anidamiento y cierre de etiquetas</li>
<li>Evitar atributos duplicados</li>
<li>Garantizar <code>id</code> únicos en la página</li>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
Usar el [https://validator.w3.org/nu/ Validador de HTML - W3C]
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Insertar la URL de la página y pulsar <strong>“Check”</strong>.
</li>
 
<li><span class="paso-badge">Paso 2.</span>
Pulsar en el botón <strong>“Message Filtering”</strong> para visualizar los errores agrupados por tipo.
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Comprobar que no existen errores de los siguientes tipos:
<ul>
<li>a. Apertura y cierre de etiquetas.</li>
<li>b. Identificadores únicos.</li>
<li>c. Relaciones uno a uno (etiquetas y controles de formulario, <code>accesskey</code> únicos).</li>
<li>d. Atributos repetidos en el mismo elemento.</li>
<li>e. Valores de atributos sin entrecomillar.</li>
</ul>
</li>
</ol>
 
 
 
|wcag_resultado_evaluacion=
El código es válido, está correctamente estructurado y no contiene errores de marcado.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
 
<pre class="wcag-codigo-html">
<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="utf-8">
  <title>Ejemplo</title>
</head>
<body>
  <h1>Título correcto</h1>
  <p>Párrafo bien cerrado.</p>
</body>
</html>
</html>
</pre>
</div>
|wcag_otras_herramientas_evaluacion=
<ul>
<li>'''Validador HTML''': usar herramientas como W3C HTML Validator para detectar errores de sintaxis, etiquetas mal cerradas, atributos duplicados o elementos anidados incorrectamente.</li>
<li>'''Inspección del navegador''': revisar la consola de DevTools para identificar errores de marcado que afecten la interpretación del contenido (DOM roto, atributos inválidos).</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) comprobar que la navegación y jerarquía del contenido son consistentes; errores de código pueden afectar el árbol accesible.</li>
<li>'''Pruebas automáticas''': usar linters (HTMLHint, ESLint para JSX, Prettier) para asegurar consistencia y corrección sintáctica en HTML y componentes.</li>
</ul>
}}

Revisión actual - 11:03 5 nov 2025

4.1.1-A. Código bien formado

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • El código no debe tener errores de sintaxis y debe estar bien formado de forma que pueda ser procesado de forma automática sin ambigüedades

Comprensión del criterio

Descripción resumida

Garantiza que el marcado sea válido y semánticamente correcto, evitando ambigüedades y errores que impidan a los agentes de usuario y tecnologías de asistencia interpretar el contenido. Requiere etiquetas completas, anidamiento adecuado, atributos únicos y valores correctamente definidos.

Objetivo

Asegurar que el contenido pueda ser procesado e interpretado por navegadores, lectores de pantalla y herramientas futuras, evitando errores de estructura que rompan la accesibilidad o la experiencia de usuario.

Importancia de cumplir el criterio

Aunque eliminado en WCAG 2.2, sigue siendo esencial para la fiabilidad técnica. El código mal formado puede impedir que lectores de pantalla comprendan la estructura y provoquen errores de navegación, lectura incorrecta o pérdida de contenido accesible.

Referencias WCAG

Recursos de apoyo

Consejos
  • Validar HTML y CSS con herramientas automáticas
  • Verificar anidamiento y cierre de etiquetas
  • Evitar atributos duplicados
  • Garantizar id únicos en la página

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usar el Validador de HTML - W3C
  1. Paso 1. Insertar la URL de la página y pulsar “Check”.
  2. Paso 2. Pulsar en el botón “Message Filtering” para visualizar los errores agrupados por tipo.
  3. Paso 3. Comprobar que no existen errores de los siguientes tipos:
    • a. Apertura y cierre de etiquetas.
    • b. Identificadores únicos.
    • c. Relaciones uno a uno (etiquetas y controles de formulario, accesskey únicos).
    • d. Atributos repetidos en el mismo elemento.
    • e. Valores de atributos sin entrecomillar.

Resultado esperado

El código es válido, está correctamente estructurado y no contiene errores de marcado.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ejemplo</title>
</head>
<body>
  <h1>Título correcto</h1>
  <p>Párrafo bien cerrado.</p>
</body>
</html>

Otras herramientas de evaluación

  • Validador HTML: usar herramientas como W3C HTML Validator para detectar errores de sintaxis, etiquetas mal cerradas, atributos duplicados o elementos anidados incorrectamente.
  • Inspección del navegador: revisar la consola de DevTools para identificar errores de marcado que afecten la interpretación del contenido (DOM roto, atributos inválidos).
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) comprobar que la navegación y jerarquía del contenido son consistentes; errores de código pueden afectar el árbol accesible.
  • Pruebas automáticas: usar linters (HTMLHint, ESLint para JSX, Prettier) para asegurar consistencia y corrección sintáctica en HTML y componentes.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 4.1.1-A. Código bien formado

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_4/4.1_Compatible/4.1.1-A&oldid=3455»