Diferencia entre revisiones de «Plantilla:Actividad WCAG»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
<includeonly>
<noinclude>
<div class="wcag-actividad" style="border:1px solid #ccc; padding:1em; margin:1em 0; background:#fafafa;">
Este formulario permite al alumnado documentar y analizar un criterio WCAG 2.2 con ejemplos prácticos.
</noinclude>
 
<!-- ========================================================= -->
<!-- BLOQUE PRINCIPAL DE LA PLANTILLA Actividad_WCAG -->
<!-- ========================================================= -->
{{{for template|Actividad_WCAG}}}
 
== 1. Información básica ==
 
'''Id del criterio:'''
{{{field|id|mandatory|input type=dropdown|values=
1.1.1 - Contenido no textual (Nivel: A),
1.2.1 - Solo audio o vídeo grabado (Nivel: A),
1.2.2 - Subtítulos (grabado) (Nivel: A),
1.2.3 - Audiodescripción o alternativa multimedia (Nivel: A),
1.2.4 - Subtítulos (en directo) (Nivel: AA),
1.2.5 - Audiodescripción (grabada) (Nivel: AA),
1.3.1 - Información y relaciones (Nivel: A),
1.3.2 - Secuencia significativa (Nivel: A),
1.3.3 - Características sensoriales (Nivel: A),
1.3.4 - Orientación (Nivel: AA),
1.3.5 - Identificación del propósito del campo (Nivel: AA),
1.4.1 - Uso del color (Nivel: A),
1.4.2 - Control del audio (Nivel: A),
1.4.3 - Contraste (mínimo) (Nivel: AA),
1.4.4 - Redimensionar texto (Nivel: AA),
1.4.5 - Imágenes de texto (Nivel: AA),
1.4.10 - Reflujo (Nivel: AA),
1.4.11 - Contraste no textual (Nivel: AA),
1.4.12 - Espaciado del texto (Nivel: AA),
1.4.13 - Contenido en hover o focus (Nivel: AA),
2.1.1 - Teclado (Nivel: A),
2.1.2 - Sin trampa de teclado (Nivel: A),
2.1.4 - Atajos del teclado (Nivel: A),
2.2.1 - Tiempo ajustable (Nivel: A),
2.2.2 - Pausar, detener, ocultar (Nivel: A),
2.3.1 - Tres destellos o menos (Nivel: A),
2.4.1 - Saltar bloques (Nivel: A),
2.4.2 - Titulado de página (Nivel: A),
2.4.3 - Orden de enfoque (Nivel: A),
2.4.4 - Propósito de los enlaces (en contexto) (Nivel: A),
2.4.5 - Múltiples vías (Nivel: AA),
2.4.6 - Encabezados y etiquetas (Nivel: AA),
2.4.7 - Foco visible (Nivel: AA),
2.4.11 - Foco no oculto (mínimo) (Nivel: AA),
2.5.1 - Gestos con puntero (Nivel: A),
2.5.2 - Cancelación del puntero (Nivel: A),
2.5.3 - Etiqueta en el nombre (Nivel: A),
2.5.4 - Activación por movimiento (Nivel: A),
2.5.7 - Arrastre accesible (Nivel: AA),
2.5.8 - Tamaño mínimo de interacción (Nivel: AA),
3.1.1 - Idioma de la página (Nivel: A),
3.1.2 - Idioma de las partes (Nivel: AA),
3.2.1 - Al recibir el foco (Nivel: A),
3.2.2 - Al recibir una entrada (Nivel: A),
3.2.3 - Navegación consistente (Nivel: AA),
3.2.4 - Identificación consistente (Nivel: AA),
3.3.1 - Identificación de errores (Nivel: A),
3.3.2 - Etiquetas o instrucciones (Nivel: A),
3.3.3 - Sugerencia ante errores (Nivel: AA),
3.3.4 - Prevención de errores (Nivel: AA),
4.1.1 - Procesamiento (Nivel: A),
4.1.2 - Nombre - función - valor (Nivel: A),
4.1.3 - Mensajes de estado (Nivel: AA)
}}}
 
'''Título del subcriterio:'''
{{{field|titulo|input type=text|mandatory|placeholder=Ejemplo: 1.1.1-A. Alternativa textual breve obligatoria}}}
 
'''Enlace directo al subcriterio en la wiki:'''
{{{field|enlace|input type=text|placeholder=Ejemplo: [[Principio_1/1.1_Texto_Alternativo/1.1.1-A]]}}}


<!-- ===================================================== -->
[[Página_principal|Consultar el índice completo de criterios WCAG]]
<!-- 1. INFORMACIÓN BÁSICA -->
<!-- ===================================================== -->
== Criterio ==
<div><b>Criterio:</b> {{{id|}}}</div>
<div><b>Título del subcriterio:</b> {{{titulo|}}}</div>
<div><b>Enlace:</b> {{{enlace|}}}</div>


----
----


<!-- ===================================================== -->
== 2. Ejemplos prácticos ==
 
<!-- ========================================================= -->
<!-- 2.1. EJEMPLO NO ACCESIBLE -->
<!-- 2.1. EJEMPLO NO ACCESIBLE -->
<!-- ===================================================== -->
<!-- ========================================================= -->
== Ejemplo NO accesible ==


{{#if: {{{noa_barrera_evidencia_img|}}} |
=== 2.1. Ejemplo NO Accesible ===
  <div><b>Imagen:</b><br>[[File:{{{noa_barrera_evidencia_img}}}|600px]]</div>
<div class="accessibility-collapsible-group">
}}


{{#if: {{{noa_barrera_evidencia_html|}}} |
<div class="mw-collapsible mw-collapsed">
  <div><b>Código HTML:</b>
<h4>1. Imagen</h4>
  <pre style="background:#f0f0f0; padding:0.5em;">{{{noa_barrera_evidencia_html}}}</pre></div>
<div class="mw-collapsible-content">
}}
📤 [[Especial:SubirArchivo|Haz clic aquí para subir tu imagen o PDF de evidencia]] 
{{{field|noa_barrera_evidencia_img|input type=upload|allowed file types=png,jpg,jpeg,gif,svg,pdf|size=60}}}
</div></div>


{{#if: {{{noa_barrera_evidencia_url|}}} |
<div class="mw-collapsible mw-collapsed">
  <div><b>URL:</b> [{{{noa_barrera_evidencia_url}}} Ver página]</div>
<h4>2. Código HTML</h4>
}}
<div class="mw-collapsible-content">
{{{field|noa_barrera_evidencia_html|input type=textarea|rows=10|placeholder=Pega aquí el código no accesible}}}
</div></div>


<div><b>Explicación del problema:</b><br>{{{noa_barrera_explicacion|}}}</div>
<div class="mw-collapsible mw-collapsed">
<h4>3. URL</h4>
<div class="mw-collapsible-content">
{{{field|noa_barrera_evidencia_url|input type=text|size=100|placeholder=https://www.unawebconlabarrera.com}}}
</div></div>
 
'''Explicación del problema detectado:'''
{{{field|noa_barrera_explicacion|input type=textarea|rows=5|style=width:100%|placeholder=Explica qué problema tiene el código, imagen o URL que has incluido.}}}
 
'''Usuarios afectados:'''
<div class="user-block">
{{{for template|Usuario_Afectado|multiple}}}
<div class="user-item" style="margin-left:1em; background:#f9f9f9; border:1px solid #ddd; padding:0.5em; margin-bottom:0.5em;">
* Tipo de barrera: {{{field|noa_user_barrera|input type=dropdown|values=Visual,Auditiva,Cognitiva,Motriz,General}}}<br>
* Gravedad: {{{field|noa_user_gravedad|input type=dropdown|values=Leve,Moderada,Grave}}}<br>
* Descripción: {{{field|noa_user_descripcion|input type=textarea|rows=2|placeholder=Describe la dificultad o barrera.}}}
</div>
{{{end template}}}
</div>
</div> <!-- cierre del bloque NOA -->


----
----


<!-- ===================================================== -->
<!-- ========================================================= -->
<!-- 2.2. EJEMPLO ACCESIBLE -->
<!-- 2.2. EJEMPLO ACCESIBLE -->
<!-- ===================================================== -->
<!-- ========================================================= -->
== Ejemplo ACCESIBLE ==


{{#if: {{{acc_barrera_evidencia_img|}}} |
=== 2.2. Ejemplo Accesible ===
  <div><b>Imagen:</b><br>[[File:{{{acc_barrera_evidencia_img}}}|600px]]</div>
<div class="accessibility-collapsible-group">
}}


{{#if: {{{acc_barrera_evidencia_html|}}} |
<div class="mw-collapsible mw-collapsed">
  <div><b>Código HTML:</b>
<h4>1. Imagen</h4>
  <pre style="background:#eef; padding:0.5em;">{{{acc_barrera_evidencia_html}}}</pre></div>
<div class="mw-collapsible-content">
}}
📤 [[Especial:SubirArchivo|Haz clic aquí para subir tu imagen o PDF de evidencia]] 
{{{field|acc_barrera_evidencia_img|input type=upload|allowed file types=png,jpg,jpeg,gif,svg,pdf|size=60}}}
</div></div>


{{#if: {{{acc_barrera_evidencia_url|}}} |
<div class="mw-collapsible mw-collapsed">
  <div><b>URL:</b> [{{{acc_barrera_evidencia_url}}} Ver página]</div>
<h4>2. Código HTML</h4>
}}
<div class="mw-collapsible-content">
{{{field|acc_barrera_evidencia_html|input type=textarea|rows=10|placeholder=Pega aquí el código accesible}}}
</div></div>


<div><b>Explicación de la solución:</b><br>{{{acc_barrera_explicacion|}}}</div>
<div class="mw-collapsible mw-collapsed">
<h4>3. URL</h4>
<div class="mw-collapsible-content">
{{{field|acc_barrera_evidencia_url|input type=text|size=100|placeholder=https://www.unawebaccesible.com}}}
</div></div>
 
'''Explicación de la solución aplicada:'''
{{{field|acc_barrera_explicacion|input type=textarea|rows=8|style=width:100%|placeholder=Explica cómo se solucionó la barrera.}}}
</div>


----
----


<!-- ===================================================== -->
== 3. Aporte personal ==
<!-- 3. APORTE PERSONAL -->
{{{field|proceso|input type=textarea|rows=6|style=width:100%|placeholder=Describe cómo generaste los ejemplos.}}}
<!-- ===================================================== -->
{{{field|herramientas|input type=textarea|rows=4|style=width:100%|placeholder=Indica las herramientas utilizadas.}}}
== Aporte personal ==
{{{field|referencias|input type=textarea|rows=4|style=width:100%|placeholder=Incluye las referencias más útiles.}}}
<div><b>Proceso de creación:</b><br>{{{proceso|}}}</div>
<div><b>Herramientas usadas:</b><br>{{{herramientas|}}}</div>
<div><b>Referencias:</b><br>{{{referencias|}}}</div>


----
----


<!-- ===================================================== -->
== 4. Autoevaluación del aprendizaje ==
<!-- 4. AUTOEVALUACIÓN -->
<div class="pf-instruccion">
<!-- ===================================================== -->
Selecciona una puntuación del 1 al 5 en cada caso.<br><small>1 = nivel más bajo · 5 = nivel más alto</small>
== Autoevaluación ==
</div>
<table class="wikitable" style="width:100%;">
<tr><th>Pregunta</th><th>Valor</th></tr>
<tr><td>Entendimiento</td><td>{{{eval_entendimiento|}}}</td></tr>
<tr><td>Dificultad NOA</td><td>{{{eval_noa_dificultad|}}}</td></tr>
<tr><td>Dificultad ACC</td><td>{{{eval_acc_dificultad|}}}</td></tr>
<tr><td>Seguridad</td><td>{{{eval_seguridad|}}}</td></tr>
<tr><td>Utilidad</td><td>{{{eval_utilidad|}}}</td></tr>
<tr><td>Aplicación</td><td>{{{eval_aplicacion|}}}</td></tr>
<tr><td>Explicación</td><td>{{{eval_explicacion|}}}</td></tr>
<tr><td>Observaciones</td><td>{{{eval_observaciones|}}}</td></tr>
</table>


----
<div class="eval-row">
4.1. ¿Qué tan fácil te resultó entender el criterio? 
{{{field|eval_entendimiento|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota">1 = No lo entendí casi nada | 5 = Lo comprendí con claridad</div>
</div>
 
<div class="eval-row">
4.2. ¿Qué tan difícil fue crear el ejemplo no accesible (NOA)? 
{{{field|eval_noa_dificultad|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota">1 = Muy fácil | 5 = Muy difícil</div>
</div>
 
<div class="eval-row">
4.3. ¿Qué tan difícil fue crear el ejemplo accesible (ACC)? 
{{{field|eval_acc_dificultad|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota">1 = Muy fácil | 5 = Muy difícil</div>
</div>
 
<div class="eval-row">
4.4. ¿Qué seguridad tienes de que tus ejemplos son correctos? 
{{{field|eval_seguridad|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota">1 = No estoy seguro | 5 = Totalmente seguro</div>
</div>
 
<div class="eval-row">
4.5. ¿En qué medida comprendes para qué sirve este criterio en la práctica? 
{{{field|eval_utilidad|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota">1 = No entiendo su utilidad | 5 = Puedo explicar claramente por qué es útil</div>
</div>
 
<div class="eval-row">
4.6. ¿Podrías aplicar este criterio en otro proyecto o web distinta? 
{{{field|eval_aplicacion|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota">1 = No sabría hacerlo | 5 = Podría hacerlo sin ayuda</div>
</div>


<!-- ===================================================== -->
<div class="eval-row">
<!-- 5. USUARIOS AFECTADOS -->
4.7. Explica este criterio a un compañero:
<!-- ===================================================== -->
{{{field|eval_explicacion|input type=textarea|rows=3|style=width:100%|placeholder=Resume el criterio con tus propias palabras.}}}
== Usuarios afectados ==
{{#if: {{{noa_user_barrera|}}} |
<div class="usuarios-afectados">
  {{#subobject:
    |noa_user_barrera={{{noa_user_barrera|}}}
    |noa_user_gravedad={{{noa_user_gravedad|}}}
    |noa_user_descripcion={{{noa_user_descripcion|}}}
  }}
</div>
</div>
}}


{{#ask:
<div class="eval-row">
[[{{PAGENAME}}]]
4.8. Observaciones personales:
|?noa_user_barrera=Tipo de barrera
{{{field|eval_observaciones|input type=textarea|rows=5|style=width:100%|placeholder=Qué aprendiste, qué te costó más, qué te resultó útil.}}}
|?noa_user_gravedad=Gravedad
|?noa_user_descripcion=Descripción
|format=template
|template=Usuario_Afectado
|limit=50
}}
</div>
</div>
</includeonly>


<noinclude>
<!-- ========================================================= -->
Plantilla principal usada por el formulario [[Formulario:Actividad_WCAG]].
<!-- CIERRE DEL BLOQUE PRINCIPAL -->
Muestra todos los datos del alumno y los usuarios afectados.
<!-- ========================================================= -->
</noinclude>
{{{end template}}}

Revisión del 11:56 25 oct 2025

Este formulario permite al alumnado documentar y analizar un criterio WCAG 2.2 con ejemplos prácticos.


Actividad_WCAG

1. Información básica

Id del criterio: id

Título del subcriterio: titulo

Enlace directo al subcriterio en la wiki: enlace

Consultar el índice completo de criterios WCAG

2. Ejemplos prácticos

2.1. Ejemplo NO Accesible

1. Imagen

📤 Haz clic aquí para subir tu imagen o PDF de evidencia noa_barrera_evidencia_img

2. Código HTML

noa_barrera_evidencia_html

3. URL

noa_barrera_evidencia_url

Explicación del problema detectado: noa_barrera_explicacion

Usuarios afectados:

Usuario_Afectado

  • Tipo de barrera: noa_user_barrera
  • Gravedad: noa_user_gravedad
  • Descripción: noa_user_descripcion

{{{end template}}}


2.2. Ejemplo Accesible

1. Imagen

📤 Haz clic aquí para subir tu imagen o PDF de evidencia acc_barrera_evidencia_img

2. Código HTML

acc_barrera_evidencia_html

3. URL

acc_barrera_evidencia_url

Explicación de la solución aplicada: acc_barrera_explicacion

3. Aporte personal

proceso herramientas referencias

4. Autoevaluación del aprendizaje

Selecciona una puntuación del 1 al 5 en cada caso.
1 = nivel más bajo · 5 = nivel más alto

4.1. ¿Qué tan fácil te resultó entender el criterio? eval_entendimiento

1 = No lo entendí casi nada | 5 = Lo comprendí con claridad

4.2. ¿Qué tan difícil fue crear el ejemplo no accesible (NOA)? eval_noa_dificultad

1 = Muy fácil | 5 = Muy difícil

4.3. ¿Qué tan difícil fue crear el ejemplo accesible (ACC)? eval_acc_dificultad

1 = Muy fácil | 5 = Muy difícil

4.4. ¿Qué seguridad tienes de que tus ejemplos son correctos? eval_seguridad

1 = No estoy seguro | 5 = Totalmente seguro

4.5. ¿En qué medida comprendes para qué sirve este criterio en la práctica? eval_utilidad

1 = No entiendo su utilidad | 5 = Puedo explicar claramente por qué es útil

4.6. ¿Podrías aplicar este criterio en otro proyecto o web distinta? eval_aplicacion

1 = No sabría hacerlo | 5 = Podría hacerlo sin ayuda

4.7. Explica este criterio a un compañero: eval_explicacion

4.8. Observaciones personales: eval_observaciones

{{{end template}}}

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