Diferencia entre revisiones de «Plantilla:CriterioWCAG»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
202526UFV20 (discusión | contribs.)
alumnos
10 ediciones
 
Línea 92: Línea 92:


=== Ejemplos accesibles y no accesibles creados por alumnos ===
=== Ejemplos accesibles y no accesibles creados por alumnos ===
{{#ask:
<!DOCTYPE html>
[[Tiene subcriterio::{{{id_wcag_subcriterio|}}}]]
<html lang="es">
|?Modification date#F[d/m/Y]=Última modificación
<head>
|format=table
    <meta charset="UTF-8">
|headers=plain
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
|searchlabel=Ver más…
    <title>Formulario de Reserva - NO Accesible 3.3.2-C</title>
|sort=Modification date
    <style>
|order=descending
        * {
}}
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 2rem;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
       
        .container {
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            max-width: 500px;
            width: 100%;
        }
       
        .alert {
            background-color: #e74c3c;
            color: white;
            padding: 1rem;
            margin-bottom: 2rem;
            border-radius: 5px;
            text-align: center;
        }
       
        h1 {
            color: #2c3e50;
            margin-bottom: 1.5rem;
            text-align: center;
        }
       
        input, select, textarea {
            width: 100%;
            padding: 0.8rem;
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
       
        input:focus, select:focus, textarea:focus {
            outline: 2px solid #667eea;
            outline-offset: 2px;
        }
       
        button {
            width: 100%;
            padding: 1rem;
            background-color: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            font-weight: bold;
        }
       
        button:hover {
            background-color: #5568d3;
        }
       
        .warning-box {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 1rem;
            margin-top: 2rem;
        }
       
        .warning-box ul {
            margin-left: 1.5rem;
            margin-top: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="alert">
            <strong>⚠️ PROBLEMA 3.3.2-C:</strong> Este formulario NO tiene etiquetas ni instrucciones claras
        </div>
       
        <h1>Reserva de Hotel</h1>
       
        <form>
            <input type="text" placeholder="Nombre">
           
            <input type="text" placeholder="Apellido">
           
            <input type="text">
           
            <input type="text" placeholder="Teléfono">
           
            <select>
                <option value="">Selecciona</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4+</option>
            </select>
           
            <input type="text" placeholder="DD/MM/AAAA">
           
            <input type="text" placeholder="DD/MM/AAAA">
           
            <select>
                <option value="">Opciones</option>
                <option value="simple">Simple</option>
                <option value="doble">Doble</option>
                <option value="suite">Suite</option>
            </select>
           
            <input type="text" placeholder="Código">
           
            <textarea rows="4" placeholder="Comentarios"></textarea>
           
            <button type="submit">Reservar</button>
        </form>
       
        <div class="warning-box">
            <strong>⚠️ Problemas de este formulario:</strong>
            <ul>
                <li>No hay etiquetas <code>&lt;label&gt;</code> para ningún campo</li>
                <li>Algunos placeholders son ambiguos ("Código" - ¿qué código?)</li>
                <li>No se indica qué campos son obligatorios</li>
                <li>No hay instrucciones sobre el formato esperado</li>
                <li>El select dice "Selecciona" pero ¿seleccionar qué?</li>
                <li>Un campo no tiene ni placeholder ni etiqueta (campo de email)</li>
                <li>No hay indicación de formato de fecha específico</li>
                <li>No se explica para qué sirve cada campo</li>
            </ul>
        </div>
    </div>
</body>
</html>


<!--
<!DOCTYPE html>
|?id_universidad=Universidad
<html lang="es">
|?curso_academico=Curso académico
<head>
-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Reserva - ACCESIBLE 3.3.2-C</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 2rem;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
       
        .container {
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            max-width: 600px;
            width: 100%;
        }
       
        .alert {
            background-color: #27ae60;
            color: white;
            padding: 1rem;
            margin-bottom: 2rem;
            border-radius: 5px;
            text-align: center;
        }
       
        h1 {
            color: #2c3e50;
            margin-bottom: 0.5rem;
            text-align: center;
        }
       
        .form-intro {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 2rem;
            font-size: 0.95rem;
        }
       
        .required-note {
            background-color: #e8f4f8;
            padding: 0.8rem;
            border-radius: 5px;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
            color: #2c3e50;
        }
       
        .required {
            color: #e74c3c;
            font-weight: bold;
        }
       
        .field {
            margin-bottom: 1.5rem;
        }
       
        label {
            display: block;
            margin-bottom: 0.4rem;
            color: #2c3e50;
            font-weight: 600;
        }
       
        .field-instruction {
            font-size: 0.85rem;
            color: #7f8c8d;
            margin-bottom: 0.4rem;
            font-style: italic;
        }
       
        input, select, textarea {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
       
        input:focus, select:focus, textarea:focus {
            outline: 2px solid #667eea;
            outline-offset: 2px;
            border-color: #667eea;
        }
       
        .input-with-icon {
            position: relative;
        }
       
        .input-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #7f8c8d;
        }
       
        button {
            width: 100%;
            padding: 1rem;
            background-color: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            font-weight: bold;
            margin-top: 1rem;
        }
       
        button:hover {
            background-color: #5568d3;
        }
       
        .success-box {
            background-color: #d4edda;
            border-left: 4px solid #28a745;
            padding: 1rem;
            margin-top: 2rem;
        }
       
        .success-box ul {
            margin-left: 1.5rem;
            margin-top: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="alert">
            <strong>✅ ACCESIBLE 3.3.2-C:</strong> Este formulario tiene etiquetas e instrucciones claras
        </div>
       
        <h1>Reserva de Hotel</h1>
        <p class="form-intro">Complete el siguiente formulario para reservar su estadía</p>
       
        <div class="required-note">
            <strong>Nota:</strong> Los campos marcados con <span class="required">*</span> son obligatorios
        </div>
       
        <form>
            <div class="field">
                <label for="nombre">Nombre <span class="required" aria-label="obligatorio">*</span></label>
                <p class="field-instruction">Ingrese su nombre tal como aparece en su documento de identidad</p>
                <input type="text" id="nombre" name="nombre" required aria-required="true" placeholder="Ej: Juan">
            </div>
           
            <div class="field">
                <label for="apellido">Apellido <span class="required" aria-label="obligatorio">*</span></label>
                <input type="text" id="apellido" name="apellido" required aria-required="true" placeholder="Ej: García">
            </div>
           
            <div class="field">
                <label for="email">Correo Electrónico <span class="required" aria-label="obligatorio">*</span></label>
                <p class="field-instruction">Enviaremos la confirmación de reserva a este correo</p>
                <input type="email" id="email" name="email" required aria-required="true" placeholder="ejemplo@correo.com" aria-describedby="email-help">
            </div>
           
            <div class="field">
                <label for="telefono">Teléfono de Contacto <span class="required" aria-label="obligatorio">*</span></label>
                <p class="field-instruction">Incluya el código de país (Ej: +34 para España)</p>
                <input type="tel" id="telefono" name="telefono" required aria-required="true" placeholder="+34 912345678">
            </div>
           
            <div class="field">
                <label for="huespedes">Número de Huéspedes <span class="required" aria-label="obligatorio">*</span></label>
                <p class="field-instruction">¿Cuántas personas se alojarán?</p>
                <select id="huespedes" name="huespedes" required aria-required="true">
                    <option value="">Seleccione una opción</option>
                    <option value="1">1 persona</option>
                    <option value="2">2 personas</option>
                    <option value="3">3 personas</option>
                    <option value="4">4 o más personas</option>
                </select>
            </div>
           
            <div class="field">
                <label for="fecha-entrada">Fecha de Entrada <span class="required" aria-label="obligatorio">*</span></label>
                <p class="field-instruction">Formato: DD/MM/AAAA (Ej: 15/02/2025)</p>
                <input type="date" id="fecha-entrada" name="fecha-entrada" required aria-required="true">
            </div>
           
            <div class="field">
                <label for="fecha-salida">Fecha de Salida <span class="required" aria-label="obligatorio">*</span></label>
                <p class="field-instruction">Formato: DD/MM/AAAA (Ej: 20/02/2025)</p>
                <input type="date" id="fecha-salida" name="fecha-salida" required aria-required="true">
            </div>
           
            <div class="field">
                <label for="tipo-habitacion">Tipo de Habitación <span class="required" aria-label="obligatorio">*</span></label>
                <p class="field-instruction">Seleccione el tipo de habitación que prefiere</p>
                <select id="tipo-habitacion" name="tipo-habitacion" required aria-required="true">
                    <option value="">Seleccione una opción</option>
                    <option value="simple">Habitación Simple (1 cama individual)</option>
                    <option value="doble">Habitación Doble (1 cama doble o 2 individuales)</option>
                    <option value="suite">Suite (habitación con sala de estar)</option>
                </select>
            </div>
           
            <div class="field">
                <label for="codigo-descuento">Código de Descuento (Opcional)</label>
                <p class="field-instruction">Si tiene un código promocional, ingréselo aquí</p>
                <input type="text" id="codigo-descuento" name="codigo-descuento" placeholder="Ej: VERANO2025" aria-describedby="codigo-help">
            </div>
           
            <div class="field">
                <label for="comentarios">Solicitudes Especiales (Opcional)</label>
                <p class="field-instruction">Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)</p>
                <textarea id="comentarios" name="comentarios" rows="4" placeholder="Ej: Necesito una habitación en planta baja por movilidad reducida"></textarea>
            </div>
           
            <button type="submit">Confirmar Reserva</button>
        </form>
       
        <div class="success-box">
            <strong>✅ Implementación correcta:</strong>
            <ul>
                <li>Cada campo tiene una etiqueta <code>&lt;label&gt;</code> clara asociada</li>
                <li>Los campos obligatorios están claramente marcados con <span class="required">*</span></li>
                <li>Hay instrucciones específicas sobre formato y contenido esperado</li>
                <li>Los selectores tienen opciones descriptivas, no ambiguas</li>
                <li>Se explica el propósito de cada campo cuando no es obvio</li>
                <li>Se proporcionan ejemplos en los placeholders</li>
                <li>Hay una nota inicial explicando la convención de campos obligatorios</li>
                <li>Se usan atributos ARIA apropiados (aria-required, aria-describedby)</li>
            </ul>
        </div>
    </div>
</body>
</html>


== Comentarios ==
== Comentarios ==

Revisión actual - 21:48 11 ene 2026



Documentación de la plantilla

Esta plantilla muestra toda la información de un **criterio WCAG 2.2**, incluyendo nivel, versión, principio, pauta, grupo, importancia, ejemplo de evaluación y relación con actividades del alumnado.

Parámetros

Parámetro Descripción
id_wcag_criterio Código del criterio (ej. 1.3.1)
id_wcag_subcriterio Subcriterio (ej. 1.3.1-A)
wcag_titulo_criterio Título del criterio
wcag_principio Nombre del principio (ej. 1. Perceptible)
wcag_principio_url Página interna del principio
wcag_pauta Nombre de la pauta
wcag_pauta_url Página interna de la pauta
wcag_nivel Nivel (A, AA, AAA)
wcag_version Versión de WCAG (2.0/2.1/2.2)
wcag_grupo Grupo temático del criterio
wcag_subgrupo Subgrupo temático
wcag_discapacidades Lista de discapacidades afectadas (en
  • )
    • wcag_texto_criterioOAW Texto del criterio (Observatorio de Accesibilidad Web)
    wcag_descripcion_resumida Descripción breve del criterio
    wcag_objetivo Objetivo del criterio
    wcag_importancia Razón por la que es importante cumplirlo
    wcag_referencias Enlaces a documentación WCAG/WAI
    wcag_recursos Recursos útiles para aprender el criterio
    wcag_tipo_evaluacion Manual / Semiautomática / Automática
    wcag_pasos_evaluacion Procedimiento para evaluarlo
    wcag_resultado_evaluacion Qué debe ocurrir para cumplirlo
    wcag_ejemplo_evaluacion Ejemplo ilustrativo
    wcag_otras_herramientas_evaluacion Herramientas opcionales
    wcag_lista_discapacidades Texto detallado sobre impacto en usuarios

    Ejemplo de uso

    {{CriterioWCAG
|id_wcag_criterio=1.3.1
|id_wcag_subcriterio=1.3.1-A
|wcag_titulo_criterio=Información y relaciones
|wcag_principio=1. Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.3 Adaptable
|wcag_pauta_url=Pauta_1.3
|wcag_nivel=A
|wcag_version=2.2
|wcag_grupo=Estructura
|wcag_subgrupo=Relaciones semánticas
|wcag_discapacidades=<li>Visual</li><li>Cognitiva</li>
|wcag_texto_criterioOAW=La información, estructura y relaciones se transmiten por medios programáticos o disponibles en el texto.
|wcag_descripcion_resumida=El contenido debe mantener la estructura lógica y semántica.
|wcag_objetivo=Facilitar que lectores de pantalla y usuarios comprendan la estructura.
|wcag_importancia=Sin estructura semántica, el contenido puede ser incomprensible.
|wcag_referencias=Enlace a WCAG y técnica H49, etc.
|wcag_recursos=Tutorial W3C, guías EN 301 549, ejemplos OAW
|wcag_tipo_evaluacion=Manual
|wcag_pasos_evaluacion=Revisar HTML y navegación por teclado/lector
|wcag_resultado_evaluacion=La estructura es comprensible y programáticamente reconocible
|wcag_ejemplo_evaluacion=Encabezados, listas, tablas semánticas correctas
|wcag_otras_herramientas_evaluacion=Wave, Axe, navegador
|wcag_lista_discapacidades=Lista ampliada explicativa
}}


    Obtenido de «https://wikiwcag.udl.cat/index.php?title=Plantilla:CriterioWCAG&oldid=4308»