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

De WCAG Wiki
VisualWikitexto
202526UPSA20 (discusión | contribs.)
alumnos
25 ediciones
Creación de ejemplos práctico (ACC y NOA) para el criterio 1.4.4-A Redimensionar texto - Javier Pozo (UPSA)
 
202526UFV20 (discusión | contribs.)
alumnos
10 ediciones
Sin resumen de edición
 
(No se muestra una edición intermedia de otro usuario)
Línea 1: Línea 1:
{{ActividadWCAG
{{ActividadWCAG
|id_criterio=1.4.4 - Redimensionar texto (Nivel: AA)
|id_criterio=1.3.1 - Información y relaciones (Nivel: A)
|id_subcriterio=1.4.4-A
|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.4_Distinguible/1.4.4-A
|enlace=https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-E
|noa_barrera_evidencia_img=2025 26 UPSA 1.4.4-A 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://xarxaempren.gencat.cat/es/inici/index.html">https://xarxaempren.gencat.cat/es/inici/index.html</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>
 
<html lang="es">
  <div style="width: 200px; height: 50px; overflow: hidden; border: 1px solid red;">
<head>
  <p>Oferta especial: Compra ahora y recibe un 50% de descuento en todos los productos de la tienda online    antes del domingo.</p>
    <meta charset="UTF-8">
  </div>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Formulario - NO Accesible 1.3.1-E</title>
</nowiki>
    <style>
|noa_barrera_explicacion=El contenedor tiene una altura fija (height: 50px) y la propiedad overflow: hidden. Cuando el usuario aumenta el tamaño del texto, este necesita más espacio vertical, desborda la caja y es ocultado/cortado por el navegador.
        * {
|noa_barrera_usuarios=Afectados: usuarios con baja visión (cataratas, presbicia, glaucoma) que usan ampliación de texto.
            margin: 0;
 
            padding: 0;
Barrera: pérdida total de información crítica, ya que el final de las frases desaparece y es imposible de leer o recuperar.
            box-sizing: border-box;
|acc_barrera_evidencia_img=2025 26 UPSA 1.4.4-A ACC.png
        }
|acc_barrera_evidencia_url=<a rel="nofollow" class="external free" href="https://www.gov.uk/">https://www.gov.uk/</a>
       
|acc_barrera_evidencia_html=<nowiki>
        body {
 
            font-family: Arial, sans-serif;
  <div style="width: 200px; min-height: 50px; border: 1px solid green;">
            padding: 2rem;
  <p>Oferta especial: Compra ahora y recibe un 50% de descuento en todos los productos de la tienda online antes del domingo.</p>
            background-color: #f5f5f5;
  </div>
        }
 
       
 
        .container {
</nowiki>
            max-width: 600px;
|acc_barrera_explicacion=Se cambia height por min-height y se elimina overflow: hidden. Esto permite que la caja tenga un tamaño inicial, pero si el texto crece (zoom), la caja se estira verticalmente para acomodarlo todo.
            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: #e74c3c;
            color: white;
            padding: 1rem;
            margin-bottom: 2rem;
            border-radius: 5px;
        }
       
        .title {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #2c3e50;
        }
       
        .subtitle {
            font-size: 1.2rem;
            font-weight: bold;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            color: #34495e;
        }
       
        .field {
            margin-bottom: 1.5rem;
        }
       
        .label-text {
            display: block;
            margin-bottom: 0.3rem;
            color: #2c3e50;
        }
       
        .required {
            color: #e74c3c;
            font-weight: bold;
        }
       
        .input-field {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
       
        .description {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-top: 0.3rem;
        }
       
        .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;
        }
       
        .info-box {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            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>⚠️ 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»