Diferencia entre revisiones de «Plantilla:CriterioWCAG»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
202526UFV20 (discusión | contribs.)
alumnos
10 ediciones
Etiqueta: Revertido
(No se muestran 109 ediciones intermedias de 3 usuarios)
Línea 1: Línea 1:
<includeonly>
<includeonly>
== '''{{{wcag_titulo_criterio}}} ''' ==
== '''{{{wcag_titulo_criterio}}} ''' ==
{{#set: wcag_categoria=CriteriosWCAG }}
<div style="display:none">
{{#set: id_wcag_criterio={{{id_wcag_criterio}}} }}
[[wcag_principio::{{{wcag_principio}}}]]
{{#set: id_wcag_subcriterio={{{id_wcag_subcriterio}}} }}
[[wcag_pauta::{{{wcag_pauta}}}]]
{{#set: wcag_titulo_criterio={{{wcag_titulo_criterio}}} }}
</div>
 
{{#set: wcag_principio={{{wcag_principio}}} }}
{{#set: wcag_pauta={{{wcag_pauta}}} }}
 


<div class="wcag-card">
<div class="wcag-card">
<div class="wcag-info">
<div class="wcag-info">
<ul>
<ul>
Línea 17: Línea 12:
<li><span class="label">Versión:</span> <span class="value">[[wcag_version::{{{wcag_version}}}]]</span></li>
<li><span class="label">Versión:</span> <span class="value">[[wcag_version::{{{wcag_version}}}]]</span></li>
<li><span class="label">Principio:</span> <span class="value">
<li><span class="label">Principio:</span> <span class="value">
[[wcag_principio::{{{wcag_principio}}}]]
[[{{{wcag_principio_url}}}|{{{wcag_principio}}}]]
</span></li>
</span></li>
<li><span class="label">Pauta:</span> <span class="value">
<li><span class="label">Pauta:</span> <span class="value">
[[wcag_pauta::{{{wcag_pauta}}}]]
[[{{{wcag_pauta_url}}}|{{{wcag_pauta}}}]]
</span></li>
</span></li>
<li><span class="label">Grupo:</span> <span class="value">[[wcag_grupo::{{{wcag_grupo}}}]]</span></li>
<li><span class="label">Grupo:</span> <span class="value">[[wcag_grupo::{{{wcag_grupo}}}]]</span></li>
Línea 26: Línea 21:
</ul>
</ul>
</div>
</div>
{{#set: TieneCriterioWCAG=Principio_{{{wcag_principio}}}/{{{wcag_pauta}}}/{{{id_wcag_criterio}}} }}
<div class="wcag-users">
<div class="wcag-users">
'''Discapacidades afectadas'''
'''Discapacidades afectadas'''
Línea 36: Línea 28:
</ul>
</ul>
</div>
</div>
<div class="wcag-infocriterio">
<div class="wcag-infocriterio">
'''Enunciado del criterio según Observatorio de Accesibilidad Web'''
'''Enunciado del criterio (Observatorio de Accesibilidad Web)'''
<ul>
<ul>
<li>{{{wcag_texto_criterioOAW}}} </li>
<li>{{{wcag_texto_criterioOAW}}} </li>
Línea 44: Línea 35:
</div>
</div>
</div>
</div>
{{{wcag_lista_discapacidades}}}
{{{wcag_lista_discapacidades}}}


Línea 66: Línea 56:
==== Tipo de evaluación ====
==== Tipo de evaluación ====
<div class="wcag-info-criterio">Evaluación '''[[:Categoría:{{{wcag_tipo_evaluacion}}}|{{{wcag_tipo_evaluacion}}}]]'''</div>
<div class="wcag-info-criterio">Evaluación '''[[:Categoría:{{{wcag_tipo_evaluacion}}}|{{{wcag_tipo_evaluacion}}}]]'''</div>
{{#set: wcag_tipo_evaluacion={{{wcag_tipo_evaluacion}}} }}
 
==== Procedimiento de evaluación ====
==== Procedimiento de evaluación ====
<div class="wcag-info-criterio">{{{wcag_pasos_evaluacion}}}</div>
<div class="wcag-info-criterio">{{{wcag_pasos_evaluacion}}}</div>
Línea 73: Línea 63:
<div class="wcag-info-criterio">{{{wcag_resultado_evaluacion}}}</div>
<div class="wcag-info-criterio">{{{wcag_resultado_evaluacion}}}</div>


==== Ejemplo ====  
==== Ejemplo ilustrativo ====
<div class="wcag-info-criterio">{{{wcag_ejemplo_evaluacion}}}</div>
<div class="wcag-info-criterio">{{{wcag_ejemplo_evaluacion}}}</div>


==== Otras herramientas de evaluación ====
==== Otras herramientas de evaluación ====
<div class="wcag-info-criterio">{{{wcag_otras_herramientas_evaluacion}}}</div>
<div class="wcag-info-criterio">{{{wcag_otras_herramientas_evaluacion}}}</div>


=== Lista de ejemplos accesibles y no accesibles de este subcriterio ===
{{#tag:categorytree|{{{id_wcag_criterio}}}|mode=pages|depth=1}}




== Ejemplos del alumnado ==


{{#set: id_wcag_subcriterio= }}
<div style="display:none">
<!-- BLOQUE DE PROPIEDADES SEMÁNTICAS (antes del ASK) -->
{{#set: wcag_categoria=CriteriosWCAG }}
{{#set: id_wcag_criterio={{{id_wcag_criterio}}} }}
{{#set: id_wcag_subcriterio={{{id_wcag_subcriterio}}} }}
{{#set: wcag_titulo_criterio={{{wcag_titulo_criterio}}} }}
{{#set: wcag_principio={{{wcag_principio}}} }}
{{#set: wcag_pauta={{{wcag_pauta}}} }}
{{#set: wcag_nivel={{{wcag_nivel}}} }}
{{#set: wcag_version={{{wcag_version}}} }}
{{#set: wcag_grupo={{{wcag_grupo}}} }}
{{#set: wcag_subgrupo={{{wcag_subgrupo}}} }}
{{#set: wcag_tipo_evaluacion={{{wcag_tipo_evaluacion}}} }}
{{#set: Tiene ejemplos de alumnado para criterio={{id_wcag_subcriterio}} }}
{{#set: TieneCriterioWCAG=Principio_{{{wcag_principio}}}/{{{wcag_pauta}}}/{{{id_wcag_criterio}}} }}


{{#ask: [[id_wcag_subcriterio::{{{id_wcag_subcriterio}}}]]
</div>
|?id_wcag_criterio=ID criterio
|?Autor=Autor
|format=table
|headers=show
|mainlabel=Página del ejemplo
|limit=50
|sort=Fecha
|order=desc
|searchlabel=Ver más ejemplos…
}}


=== Ejemplos accesibles y no accesibles creados por alumnos ===
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Reserva - NO 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: 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>
<html lang="es">
<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 ==
A continuación se muestran comentarios sobre el criterio '''{{{wcag_titulo_criterio}}}'''
A continuación se muestran comentarios sobre el criterio '''{{{wcag_titulo_criterio}}}'''
<comments />
<comments />
[[Category:CriteriosWCAG]]
[[Category:{{{wcag_principio}}}]]
[[Category:{{{wcag_pauta}}}]]
[[Category:{{{id_wcag_criterio}}}]]
</includeonly>
</includeonly>




<noinclude>
<noinclude>
== Documentación de la plantilla ==
== Documentación de la plantilla ==
Esta plantilla muestra la información completa y semánticamente etiquetada de un **criterio WCAG 2.2**, incluyendo nivel, versión, principio, pauta, grupo, subgrupo, descripción, ejemplos y evaluación.
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 principales ===
* <code>id_wcag_criterio</code> → Identificador corto del criterio (ej. 1.1.1)
* <code>id_wcag_subcriterio</code> → Identificador interno o subcriterio (ej. 1.1.1-A)
* <code>wcag_titulo_criterio</code> → Título completo (ej. 1.1.1-A. Imágenes con texto alternativo)
* <code>wcag_nivel</code> → Nivel de conformidad (A, AA, AAA)
* <code>wcag_version</code> → Versión WCAG (2.0 / 2.1 / 2.2)
* <code>wcag_principio</code> → Nombre o número del principio (ej. 1. Perceptible)
* <code>wcag_pauta</code> → Nombre o número de la pauta (ej. 1.1 Contenido no textual)
* <code>wcag_grupo</code> → Clasificación principal o grupo temático (ej. Medios)
* <code>wcag_subgrupo</code> → Subgrupo específica (ej. Imágenes)
 
=== Parámetros sobre el contenido ===
* <code>wcag_discapacidades</code> → Lista HTML de discapacidades afectadas (se muestra como lista visual)
* <code>wcag_lista_discapacidades</code> → Categorías relacionadas o plantillas de discapacidad
* <code>wcag_texto_criterioOAW</code> → Enunciado oficial según el Observatorio de Accesibilidad Web
 
=== Parámetros de comprensión ===
* <code>wcag_descripcion_resumida</code> → Breve descripción del criterio
* <code>wcag_objetivo</code> → Objetivo principal del criterio
* <code>wcag_importancia</code> → Razones por las que es importante cumplirlo
* <code>wcag_referencias</code> → Referencias y enlaces a documentación WCAG/W3C
* <code>wcag_recursos</code> → Recursos o herramientas de apoyo recomendadas


=== Parámetros de evaluación ===
=== Parámetros ===
* <code>wcag_tipo_evaluacion</code> → Tipo de evaluación (Manual, Semiautomática o Automática)
* <code>wcag_pasos_evaluacion</code> → Procedimiento o pasos para la evaluación
* <code>wcag_resultado_evaluacion</code> → Resultado esperado tras la verificación
* <code>wcag_ejemplo_evaluacion</code> → Ejemplo ilustrativo o caso de aplicación
* <code>wcag_otras_herramientas_evaluacion</code> → Otras herramientas o métodos de apoyo
 
=== Propiedades semánticas principales ===
Esta plantilla genera las siguientes propiedades de **Semantic MediaWiki (SMW)**:
* <code>id_wcag_criterio</code> 
* <code>wcag_nivel</code> 
* <code>wcag_version</code> 
* <code>wcag_principio</code> 
* <code>wcag_pauta</code> 
* <code>wcag_grupo</code> 
* <code>wcag_subgrupo</code> 
* <code>wcag_texto_criterioOAW</code> 
* <code>wcag_descripcion_resumida</code> 
* <code>wcag_objetivo</code> 
* <code>wcag_importancia</code> 
* <code>wcag_referencias</code> 
* <code>wcag_recursos</code> 
* <code>wcag_tipo_evaluacion</code> 
* <code>wcag_pasos_evaluacion</code> 
* <code>wcag_resultado_evaluacion</code> 
* <code>wcag_ejemplo_evaluacion</code> 
* <code>wcag_otras_herramientas_evaluacion</code> 
* <code>TieneCriterioWCAG</code> → relación con su página de principio/pauta (formato: <code>Principio_X/Y/Z</code>)


{| class="wikitable"
! Parámetro !! Descripción
|-
| <code>id_wcag_criterio</code> || Código del criterio (ej. 1.3.1)
|-
| <code>id_wcag_subcriterio</code> || Subcriterio (ej. 1.3.1-A)
|-
| <code>wcag_titulo_criterio</code> || Título del criterio
|-
| <code>wcag_principio</code> || Nombre del principio (ej. 1. Perceptible)
|-
| <code>wcag_principio_url</code> || Página interna del principio
|-
| <code>wcag_pauta</code> || Nombre de la pauta
|-
| <code>wcag_pauta_url</code> || Página interna de la pauta
|-
| <code>wcag_nivel</code> || Nivel (A, AA, AAA)
|-
| <code>wcag_version</code> || Versión de WCAG (2.0/2.1/2.2)
|-
| <code>wcag_grupo</code> || Grupo temático del criterio
|-
| <code>wcag_subgrupo</code> || Subgrupo temático
|-
| <code>wcag_discapacidades</code> || Lista de discapacidades afectadas (en <code><li></code>)
|-
| <code>wcag_texto_criterioOAW</code> || Texto del criterio (Observatorio de Accesibilidad Web)
|-
| <code>wcag_descripcion_resumida</code> || Descripción breve del criterio
|-
| <code>wcag_objetivo</code> || Objetivo del criterio
|-
| <code>wcag_importancia</code> || Razón por la que es importante cumplirlo
|-
| <code>wcag_referencias</code> || Enlaces a documentación WCAG/WAI
|-
| <code>wcag_recursos</code> || Recursos útiles para aprender el criterio
|-
| <code>wcag_tipo_evaluacion</code> || Manual / Semiautomática / Automática
|-
| <code>wcag_pasos_evaluacion</code> || Procedimiento para evaluarlo
|-
| <code>wcag_resultado_evaluacion</code> || Qué debe ocurrir para cumplirlo
|-
| <code>wcag_ejemplo_evaluacion</code> || Ejemplo ilustrativo
|-
| <code>wcag_otras_herramientas_evaluacion</code> || Herramientas opcionales
|-
| <code>wcag_lista_discapacidades</code> || Texto detallado sobre impacto en usuarios
|}
=== Ejemplo de uso ===
=== Ejemplo de uso ===
<pre>
<pre>
{{CriterioWCAG
{{CriterioWCAG
|id_wcag_criterio=1.1.1
|id_wcag_criterio=1.3.1
|id_wcag_subcriterio=1.1.1-A
|id_wcag_subcriterio=1.3.1-A
|wcag_titulo_criterio=1.1.1-A Imágenes con texto alternativo
|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_nivel=A
|wcag_version=2.2
|wcag_version=2.2
|wcag_principio=1. Perceptible
|wcag_grupo=Estructura
|wcag_pauta=1.1 Contenido no textual
|wcag_subgrupo=Relaciones semánticas
|wcag_grupo=Medios
|wcag_discapacidades=<li>Visual</li><li>Cognitiva</li>
|wcag_subgrupo=Imágenes
|wcag_texto_criterioOAW=La información, estructura y relaciones se transmiten por medios programáticos o disponibles en el texto.
|wcag_discapacidades=<li>Visual</li><li>Baja visión</li>
|wcag_descripcion_resumida=El contenido debe mantener la estructura lógica y semántica.
|wcag_lista_discapacidades=[[Categoría:Visual]][[Categoría:Baja visión]]
|wcag_objetivo=Facilitar que lectores de pantalla y usuarios comprendan la estructura.
|wcag_texto_criterioOAW=Todo contenido no textual debe tener una alternativa textual que proporcione información equivalente.
|wcag_importancia=Sin estructura semántica, el contenido puede ser incomprensible.
|wcag_descripcion_resumida=Proporcionar texto alternativo para todas las imágenes y gráficos informativos.
|wcag_referencias=Enlace a WCAG y técnica H49, etc.
|wcag_objetivo=Permitir que los usuarios comprendan el contenido visual mediante texto.
|wcag_recursos=Tutorial W3C, guías EN 301 549, ejemplos OAW
|wcag_importancia=Sin texto alternativo, los usuarios con discapacidad visual pierden información clave.
|wcag_referencias=[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html W3C: Non-text Content]
|wcag_recursos=[https://observatorioweb.gob.es Observatorio de Accesibilidad Web]
|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Manual
|wcag_pasos_evaluacion=Comprobar que todas las imágenes tienen atributo alt adecuado y significativo.
|wcag_pasos_evaluacion=Revisar HTML y navegación por teclado/lector
|wcag_resultado_evaluacion=Todas las imágenes relevantes cuentan con descripción alternativa adecuada.
|wcag_resultado_evaluacion=La estructura es comprensible y programáticamente reconocible
|wcag_ejemplo_evaluacion=Ejemplo correcto: <code>&lt;img src="logo.png" alt="Logo de la universidad"&gt;</code>
|wcag_ejemplo_evaluacion=Encabezados, listas, tablas semánticas correctas
|wcag_otras_herramientas_evaluacion=WAVE, axe DevTools, Siteimprove Accessibility Checker
|wcag_otras_herramientas_evaluacion=Wave, Axe, navegador
|wcag_lista_discapacidades=Lista ampliada explicativa
}}
}}
</pre>
</pre>
</noinclude>
</noinclude>

Revisión del 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»