Diferencia entre revisiones de «2526UPSA.1.3.1-E-001»

De WCAG Wiki
← Edición anterior
VisualWikitexto
202526UPSA20 (discusión | contribs.)
alumnos
25 ediciones
Creación de ejemplos práctico (ACC y NOA) para el criterio 1.3.1-E - Evitar Listas Decorativas - Javier Pozo (UPSA)
202526UFV20 (discusión | contribs.)
alumnos
10 ediciones
Sin resumen de edición
 
Línea 2: Línea 2:
|id_criterio=1.3.1 - Información y relaciones (Nivel: A)
|id_criterio=1.3.1 - Información y relaciones (Nivel: A)
|id_subcriterio=1.3.1-E
|id_subcriterio=1.3.1-E
|id_universidad=UPSA
|id_universidad=UFV
|curso_academico=2025-26
|curso_academico=2025-26
|enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-E
|enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-E
|noa_barrera_evidencia_img=2025 26 UPSA 1.3.1-E NOA.png
|noa_barrera_evidencia_img=2025 26 UPSA 1.3.1-E NOA.png 2025 26 UFV 1.3.1-E NOA.png
|noa_barrera_evidencia_url=<a rel="nofollow" class="external free" href="https://www.fundacionsbs.com/patronato/"> https://www.fundacionsbs.com/patronato/ </a>
|noa_barrera_evidencia_url=<a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-No-Accesible.html"> https://www.fundacionsbs.com/patronato/ </a>
|noa_barrera_evidencia_html=<nowiki>
|noa_barrera_evidencia_html=<!DOCTYPE html>
  <div class="entry-content">
<html lang="es">
  <h2 class="h4">Presidenta</h2>
<head>
 
    <meta charset="UTF-8">
  <ul>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <li>Dña. Begoña Gómez del Rio. Consejera de Inclusión Social, Juventud, Familias e Igualdad.</li>
    <title>Formulario - NO Accesible 1.3.1-E</title>
  </ul>
    <style>
 
        * {
  <h2 class="h4">Vicepresidente</h2>
            margin: 0;
  <ul>
            padding: 0;
    <li>D. Gregorio Lanza Crespo. Director del Instituto Cántabro de Servicios Sociales.</li>
            box-sizing: border-box;
  </ul>
        }
</div>
       
 
        body {
<style>
            font-family: Arial, sans-serif;
  .entry-content {
            padding: 2rem;
    font-family: Arial, sans-serif;
            background-color: #f5f5f5;
    padding: 20px;
        }
  }
       
 
        .container {
  .h4 {
            max-width: 600px;
    color: #2c3e50;
            margin: 0 auto;
    font-size: 1.25rem;
            background-color: white;
    margin-bottom: 10px;
            padding: 2rem;
    border-bottom: 2px solid #2c3e50;  
            border-radius: 8px;
    width: fit-content;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
        }
 
       
  ul {
        .alert {
    list-style-type: disc;  
            background-color: #e74c3c;
    padding-left: 20px;
            color: white;
    margin-bottom: 20px;
            padding: 1rem;
  }
            margin-bottom: 2rem;
 
            border-radius: 5px;
  li {
        }
    font-size: 1rem;
       
    color: #333;
        .title {
  }
            font-size: 1.8rem;
</style>
            font-weight: bold;
 
            margin-bottom: 1rem;
</nowiki>
            color: #2c3e50;
|noa_barrera_explicacion=El incumplimiento del criterio 1.3.1-E en esta página se debe a una discrepancia entre la presentación visual y la estructura semántica del código. Al analizar el fragmento del Patronato, observamos que se han implementado múltiples etiquetas <ul> que contienen un único elemento de lista (<li>) cada una. Esta práctica se considera un uso incorrecto de las listas con fines meramente visuales o "decorativos", ya que el objetivo primordial de una lista es agrupar una serie de elementos relacionados entre sí.
        }
|noa_barrera_usuarios=Afectados: personas ciegas usuarias de lectores de pantalla (NVDA, JAWS).
       
 
        .subtitle {
Barrera: el software anuncia "Lista de 1 elemento", generando ruido cognitivo y confusión, ya que el usuario espera una enumeración y solo encuentra una frase continuada.
            font-size: 1.2rem;
|acc_barrera_evidencia_img=2025 26 UPSA 1.3.1-E ACC.png
            font-weight: bold;
|acc_barrera_evidencia_url=<a rel="nofollow" class="external free" href="https://es.wikipedia.org/wiki/Lista_de_clientes_de_Jeffrey_Epstein">https://es.wikipedia.org/wiki/Lista_de_clientes_de_Jeffrey_Epstein</a>
            margin-top: 1.5rem;
|acc_barrera_evidencia_html=<nowiki>
            margin-bottom: 0.5rem;
 
            color: #34495e;
  <div class="entry-content">
        }
    <p>Poco después de la dedicación, su amistad se rompió. Entre las razones que se han dado están:</p>
       
 
        .field {
    <ul>
            margin-bottom: 1.5rem;
      <li>
        }
         En el 2000, Ghislaine Maxwell... contrató como masajista a Virginia Giuffre...
       
        <sup class="reference">[46]</sup>
        .label-text {
      </li>
            display: block;
      <li>
            margin-bottom: 0.3rem;
        En 2004, Trump superó la oferta de Epstein por una mansión...
            color: #2c3e50;
        <sup class="reference">[50]</sup>
        }
      </li>
       
      <li>
        .required {
         En junio de 2007 Epstein fue acusado de delitos sexuales.
            color: #e74c3c;
         <sup class="reference">[52]</sup>
            font-weight: bold;
      </li>
        }
      <li>
       
         En octubre de 2007 Trump revocó la membresía de Epstein...
        .input-field {
        <sup class="reference">[53]</sup>
            width: 100%;
      </li>
            padding: 0.5rem;
    </ul>
            border: 1px solid #ddd;
</div>
            border-radius: 4px;
 
            font-size: 1rem;
<style>
        }
  .entry-content {
       
    font-family: 'serif', Times, serif;
        .description {
    line-height: 1.6;
            font-size: 0.9rem;
    max-width: 800px;
            color: #7f8c8d;
     color: #202122;
            margin-top: 0.3rem;
  }
        }
 
       
  ul {
         .button {
     list-style-type: disc;
            background-color: #3498db;
    padding-left: 2.5rem;
            color: white;
    margin-top: 0.5rem;
            padding: 0.8rem 2rem;
  }
            border: none;
 
            border-radius: 4px;
  li {
            font-size: 1rem;
    margin-bottom: 0.8rem;
            cursor: pointer;
    text-align: justify;
            margin-top: 1rem;
  }
        }
 
       
  .reference {
         .button:hover {
    font-size: 0.75rem;
            background-color: #2980b9;
    color: #0645ad;
         }
    vertical-align: super;
       
  }
         .info-box {
</style>
            background-color: #fff3cd;
 
            border-left: 4px solid #ffc107;
 
            padding: 1rem;
</nowiki>
            margin-top: 2rem;
|acc_barrera_explicacion=La implementación técnica observada en el ejemplo de Wikipedia cumple con el criterio 1.3.1-E al agrupar programáticamente todos los elementos relacionados bajo una única etiqueta de lista desordenada. A diferencia del caso no accesible, donde se fragmentaba el contenido en múltiples listas de un solo elemento por motivos puramente decorativos, aquí se mantiene la integridad semántica de la información. Esta estructura permite que los lectores de pantalla anuncien correctamente una "lista de cuatro elementos", proporcionando al usuario un contexto inmediato sobre la extensión del bloque informativo. Asimismo, el uso de una lista real facilita la navegación mediante comandos de teclado, permitiendo saltar entre hitos cronológicos de forma fluida.
        }
       
        .info-box ul {
            margin-left: 1.5rem;
            margin-top: 0.5rem;
        }
     </style>
</head>
<body>
     <div class="container">
        <div class="alert">
            <strong>⚠️ PROBLEMA DE ACCESIBILIDAD 1.3.1-E:</strong> Este formulario usa DIVs y SPANs sin semántica HTML correcta.
        </div>
       
        <div class="title">Registro de Usuario</div>
       
        <div class="subtitle">Información Personal</div>
       
        <div class="field">
            <span class="label-text">Nombre completo <span class="required">*</span></span>
            <input type="text" class="input-field" placeholder="Ingresa tu nombre completo">
            <div class="description">Campo obligatorio</div>
        </div>
       
        <div class="field">
            <span class="label-text">Correo electrónico <span class="required">*</span></span>
            <input type="text" class="input-field" placeholder="ejemplo@correo.com">
            <div class="description">Campo obligatorio. Usaremos este correo para contactarte.</div>
        </div>
       
        <div class="field">
            <span class="label-text">Teléfono</span>
            <input type="text" class="input-field" placeholder="912345678">
        </div>
       
        <div class="subtitle">Información de Cuenta</div>
       
        <div class="field">
            <span class="label-text">Nombre de usuario <span class="required">*</span></span>
            <input type="text" class="input-field" placeholder="usuario123">
            <div class="description">Mínimo 6 caracteres. Solo letras y números.</div>
        </div>
       
        <div class="field">
            <span class="label-text">Contraseña <span class="required">*</span></span>
            <input type="password" class="input-field">
            <div class="description">Mínimo 8 caracteres, debe incluir mayúsculas, minúsculas y números.</div>
        </div>
       
        <div class="field">
            <span class="label-text">Confirmar contraseña <span class="required">*</span></span>
            <input type="password" class="input-field">
        </div>
       
        <div class="subtitle">Preferencias</div>
       
        <div class="field">
            <span class="label-text">¿Deseas recibir nuestro boletín?</span>
            <div style="margin-top: 0.5rem;">
                <div style="margin-bottom: 0.5rem;">
                    <input type="radio" name="newsletter" id="si" value="si">
                    <span style="margin-left: 0.3rem;">Sí</span>
                </div>
                <div>
                    <input type="radio" name="newsletter" id="no" value="no">
                    <span style="margin-left: 0.3rem;">No</span>
                </div>
            </div>
        </div>
       
        <div class="field">
            <span class="label-text">Acepto los términos y condiciones <span class="required">*</span></span>
            <div style="margin-top: 0.5rem;">
                <input type="checkbox" id="terms">
                <span style="margin-left: 0.3rem;">He leído y acepto los términos</span>
            </div>
        </div>
       
        <div class="button">Registrarse</div>
       
        <div class="info-box">
            <strong>⚠️ Problemas de accesibilidad en este ejemplo:</strong>
            <ul>
                <li>Usa <code>&lt;div class="title"&gt;</code> en lugar de <code>&lt;h1&gt;</code></li>
                <li>Usa <code>&lt;div class="subtitle"&gt;</code> en lugar de <code>&lt;h2&gt;</code></li>
                <li>Usa <code>&lt;span class="label-text"&gt;</code> en lugar de <code>&lt;label&gt;</code></li>
                <li>No hay relación entre etiquetas e inputs (falta <code>for</code> y <code>id</code>)</li>
                <li>Usa <code>&lt;div class="button"&gt;</code> en lugar de <code>&lt;button&gt;</code></li>
                <li>No hay <code>&lt;form&gt;</code> agrupando los campos</li>
                <li>Los lectores de pantalla no pueden identificar la estructura</li>
            </ul>
        </div>
    </div>
</body>
</html>
|noa_barrera_explicacion=El formulario utiliza elementos div y span con clases CSS para simular
la estructura visual (títulos, subtítulos, etiquetas), pero sin
semántica HTML. Usa <div class="title"> en lugar de <h1>,
<span class="label-text"> en lugar de <label>, y <div class="button">
en lugar de <button>. No hay atributos "for" vinculando etiquetas con
inputs, ni <form> o <fieldset> agrupando campos relacionados.
|noa_barrera_usuarios=- Usuarios de lectores de pantalla no pueden identificar la jerarquía
  de títulos ni navegar por secciones.
- No se anuncia la relación entre etiquetas y campos de formulario.
- Usuarios de teclado tienen dificultad navegando sin estructura semántica.
- Tecnologías de asistencia no pueden interpretar correctamente la
  información y relaciones del contenido.
|acc_barrera_evidencia_img=2025 26 UPSA 1.3.1-E ACC.png 2025 26 UFV 1.3.1-E ACC.png
|acc_barrera_evidencia_url=<a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html">file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html</a>
|acc_barrera_evidencia_html=<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario - ACCESIBLE 1.3.1-E</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       
        body {
            font-family: Arial, sans-serif;
            padding: 2rem;
            background-color: #f5f5f5;
        }
       
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
       
        .alert {
            background-color: #27ae60;
            color: white;
            padding: 1rem;
            margin-bottom: 2rem;
            border-radius: 5px;
        }
       
        h1 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: #2c3e50;
        }
       
        h2 {
            font-size: 1.2rem;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            color: #34495e;
        }
       
        fieldset {
            border: none;
            padding: 0;
            margin-bottom: 1.5rem;
        }
       
        legend {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #34495e;
        }
       
        .field {
            margin-bottom: 1.5rem;
        }
       
        label {
            display: block;
            margin-bottom: 0.3rem;
            color: #2c3e50;
            font-weight: 500;
        }
       
        .required {
            color: #e74c3c;
            font-weight: bold;
        }
       
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="password"] {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
       
        input:focus {
            outline: 2px solid #3498db;
            outline-offset: 2px;
        }
       
        .description {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-top: 0.3rem;
        }
       
        .radio-group,
        .checkbox-group {
            margin-top: 0.5rem;
        }
       
        .radio-option,
        .checkbox-option {
            margin-bottom: 0.5rem;
        }
       
        .radio-option input,
        .checkbox-option input {
            margin-right: 0.5rem;
        }
       
        .radio-option label,
        .checkbox-option label {
            display: inline;
            font-weight: normal;
        }
       
        button {
            background-color: #3498db;
            color: white;
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 1rem;
        }
       
        button:hover {
            background-color: #2980b9;
        }
       
        button:focus {
            outline: 2px solid #2c3e50;
            outline-offset: 2px;
        }
       
        .info-box {
            background-color: #d4edda;
            border-left: 4px solid #28a745;
            padding: 1rem;
            margin-top: 2rem;
        }
       
        .info-box ul {
            margin-left: 1.5rem;
            margin-top: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="alert">
            <strong>✅ ACCESIBLE 1.3.1-E:</strong> Este formulario usa HTML semántico correcto con estructura clara.
        </div>
       
        <h1>Registro de Usuario</h1>
       
        <form action="#" method="post">
            <fieldset>
                <legend>Información Personal</legend>
               
                <div class="field">
                    <label for="nombre">Nombre completo <span class="required" aria-label="obligatorio">*</span></label>
                    <input type="text" id="nombre" name="nombre" required aria-required="true" placeholder="Ingresa tu nombre completo">
                    <p class="description">Campo obligatorio</p>
                </div>
               
                <div class="field">
                    <label for="email">Correo electrónico <span class="required" aria-label="obligatorio">*</span></label>
                    <input type="email" id="email" name="email" required aria-required="true" placeholder="ejemplo@correo.com" aria-describedby="email-desc">
                    <p class="description" id="email-desc">Campo obligatorio. Usaremos este correo para contactarte.</p>
                </div>
               
                <div class="field">
                    <label for="telefono">Teléfono</label>
                    <input type="tel" id="telefono" name="telefono" placeholder="912345678">
                </div>
            </fieldset>
           
            <fieldset>
                <legend>Información de Cuenta</legend>
               
                <div class="field">
                    <label for="usuario">Nombre de usuario <span class="required" aria-label="obligatorio">*</span></label>
                    <input type="text" id="usuario" name="usuario" required aria-required="true" placeholder="usuario123" aria-describedby="usuario-desc">
                    <p class="description" id="usuario-desc">Mínimo 6 caracteres. Solo letras y números.</p>
                </div>
               
                <div class="field">
                    <label for="password">Contraseña <span class="required" aria-label="obligatorio">*</span></label>
                    <input type="password" id="password" name="password" required aria-required="true" aria-describedby="password-desc">
                    <p class="description" id="password-desc">Mínimo 8 caracteres, debe incluir mayúsculas, minúsculas y números.</p>
                </div>
               
                <div class="field">
                    <label for="password2">Confirmar contraseña <span class="required" aria-label="obligatorio">*</span></label>
                    <input type="password" id="password2" name="password2" required aria-required="true">
                </div>
            </fieldset>
           
            <fieldset>
                <legend>Preferencias</legend>
               
                <div class="field">
                    <p id="newsletter-label">¿Deseas recibir nuestro boletín?</p>
                    <div class="radio-group" role="radiogroup" aria-labelledby="newsletter-label">
                        <div class="radio-option">
                            <input type="radio" id="newsletter-si" name="newsletter" value="si">
                            <label for="newsletter-si">Sí</label>
                        </div>
                        <div class="radio-option">
                            <input type="radio" id="newsletter-no" name="newsletter" value="no" checked>
                            <label for="newsletter-no">No</label>
                        </div>
                    </div>
                </div>
               
                <div class="field">
                    <div class="checkbox-group">
                        <div class="checkbox-option">
                            <input type="checkbox" id="terms" name="terms" required aria-required="true">
                            <label for="terms">Acepto los términos y condiciones <span class="required" aria-label="obligatorio">*</span></label>
                        </div>
                    </div>
                </div>
            </fieldset>
           
            <button type="submit">Registrarse</button>
        </form>
       
        <div class="info-box">
            <strong>✅ Implementación accesible correcta:</strong>
            <ul>
                <li>Usa <code>&lt;h1&gt;</code> para el título principal</li>
                <li>Usa <code>&lt;h2&gt;</code> o <code>&lt;legend&gt;</code> para subtítulos</li>
                <li>Usa <code>&lt;label&gt;</code> con atributo <code>for</code> vinculado a cada input</li>
                <li>Usa <code>&lt;form&gt;</code> y <code>&lt;fieldset&gt;</code> para agrupar campos relacionados</li>
                <li>Usa <code>&lt;button&gt;</code> en lugar de div</li>
                <li>Usa atributos ARIA cuando es necesario (<code>aria-required</code>, <code>aria-describedby</code>)</li>
                <li>Los lectores de pantalla pueden navegar la estructura correctamente</li>
                <li>La relación entre etiquetas y campos es clara programáticamente</li>
            </ul>
        </div>
    </div>
</body>
</html>
|acc_barrera_explicacion=Implementa correctamente HTML semántico usando <h1>, <h2>, <form>,
<fieldset>, <legend>, y <label> con atributo "for". Cada campo tiene
su etiqueta asociada mediante id. Usa atributos ARIA apropiados como
aria-required, aria-describedby y aria-labelledby para reforzar las
relaciones. La estructura es clara tanto visual como programáticamente.
}}
}}

Revisión actual - 21:33 11 ene 2026

Edición de la página como formulario

1. Información básica

Id del criterio: 1.3.1 - Información y relaciones (Nivel: A)
Título del subcriterio: 1.3.1-E
Universidad participante: UFV
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-E


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen
Archivo:2025 26 UPSA 1.3.1-E NOA.png 2025 26 UFV 1.3.1-E NOA.png

b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-No-Accesible.html"> https://www.fundacionsbs.com/patronato/ </a> <a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-No-Accesible.html"> https://www.fundacionsbs.com/patronato/ </a>]

2.1.2. Código HTML:

<!DOCTYPE html> Formulario - NO Accesible 1.3.1-E

⚠️ PROBLEMA DE ACCESIBILIDAD 1.3.1-E: Este formulario usa DIVs y SPANs sin semántica HTML correcta.
Registro de Usuario
Información Personal
Nombre completo *
Campo obligatorio
Correo electrónico *
Campo obligatorio. Usaremos este correo para contactarte.
Teléfono
Información de Cuenta
Nombre de usuario *
Mínimo 6 caracteres. Solo letras y números.
Contraseña *
Mínimo 8 caracteres, debe incluir mayúsculas, minúsculas y números.
Confirmar contraseña *
Preferencias
¿Deseas recibir nuestro boletín?
Sí
No
Acepto los términos y condiciones *
He leído y acepto los términos
Registrarse
⚠️ Problemas de accesibilidad en este ejemplo:
  • Usa <div class="title"> en lugar de <h1>
  • Usa <div class="subtitle"> en lugar de <h2>
  • Usa <span class="label-text"> en lugar de <label>
  • No hay relación entre etiquetas e inputs (falta for y id)
  • Usa <div class="button"> en lugar de <button>
  • No hay <form> agrupando los campos
  • Los lectores de pantalla no pueden identificar la estructura



Explicación del problema detectado:
El formulario utiliza elementos div y span con clases CSS para simular la estructura visual (títulos, subtítulos, etiquetas), pero sin

semántica HTML. Usa
en lugar de

, en lugar de <label>, y

en lugar de <button>. No hay atributos "for" vinculando etiquetas con inputs, ni <form> o <fieldset> agrupando campos relacionados.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
- Usuarios de lectores de pantalla no pueden identificar la jerarquía 

 de títulos ni navegar por secciones.

- No se anuncia la relación entre etiquetas y campos de formulario. - Usuarios de teclado tienen dificultad navegando sin estructura semántica. - Tecnologías de asistencia no pueden interpretar correctamente la 

 información y relaciones del contenido.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen
Archivo:2025 26 UPSA 1.3.1-E ACC.png 2025 26 UFV 1.3.1-E ACC.png
b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html">file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html</a> <a rel="nofollow" class="external free" href="file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html">file:///C:/Users/pupus/OneDrive%20-%20UFV/UNI/IPO/WCAG/1.3.1-E-Accesible.html</a>]


2.2.2 Código HTML:

<!DOCTYPE html> Formulario - ACCESIBLE 1.3.1-E

✅ ACCESIBLE 1.3.1-E: Este formulario usa HTML semántico correcto con estructura clara.

Registro de Usuario

Información Personal

Campo obligatorio

Campo obligatorio. Usaremos este correo para contactarte.

Información de Cuenta

Mínimo 6 caracteres. Solo letras y números.

Mínimo 8 caracteres, debe incluir mayúsculas, minúsculas y números.

Preferencias

¿Deseas recibir nuestro boletín?

✅ Implementación accesible correcta:
  • Usa <h1> para el título principal
  • Usa <h2> o <legend> para subtítulos
  • Usa <label> con atributo for vinculado a cada input
  • Usa <form> y <fieldset> para agrupar campos relacionados
  • Usa <button> en lugar de div
  • Usa atributos ARIA cuando es necesario (aria-required, aria-describedby)
  • Los lectores de pantalla pueden navegar la estructura correctamente
  • La relación entre etiquetas y campos es clara programáticamente



Explicación de la solución aplicada:

Implementa correctamente HTML semántico usando

,

, <form>, <fieldset>, <legend>, y <label> con atributo "for". Cada campo tiene su etiqueta asociada mediante id. Usa atributos ARIA apropiados como aria-required, aria-describedby y aria-labelledby para reforzar las relaciones. La estructura es clara tanto visual como programáticamente.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA.1.3.1-E-001&oldid=4300»