|
|
| Línea 92: |
Línea 92: |
|
| |
|
| === Ejemplos accesibles y no accesibles creados por alumnos === | | === Ejemplos accesibles y no accesibles creados por alumnos === |
| <!DOCTYPE html>
| | {{#ask: |
| <html lang="es">
| | [[Tiene subcriterio::{{{id_wcag_subcriterio|}}}]] |
| <head>
| | |?Modification date#F[d/m/Y]=Última modificación |
| <meta charset="UTF-8">
| | |format=table |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| | |headers=plain |
| <title>Formulario de Reserva - NO Accesible 3.3.2-C</title>
| | |searchlabel=Ver más… |
| <style>
| | |sort=Modification date |
| * {
| | |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><label></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> | | <!-- |
| <html lang="es">
| | |?id_universidad=Universidad |
| <head>
| | |?curso_academico=Curso académico |
| <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><label></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 == |
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
}}
