Ver el código de «Formulario:ActividadWCAG»

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

{{{for template|ActividadWCAG}}}

== 1. Información básica ==
Selecionar el criterio concreto:
'''Id del criterio:'''
{{{field|id_criterio|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)
}}}

'''Id del subcriterio:'''
Incluir la identificación del subcriterio:
{{{field|id_subcriterio|mandatory|input type=dropdown|values=
1.1.1-A,1.1.1-B,1.1.1-C,1.1.1-D,1.1.1-E,1.1.1-F,1.1.1-G,1.1.1-H,1.1.1-I,1.1.1-J,1.1.1-K,
1.2.1-A,1.2.1-B,1.2.2-A,1.2.3-A,1.2.4-A,
1.3.1-A,1.3.1-B,1.3.1-C,1.3.1-D,1.3.1-E,1.3.1-F,1.3.1-G,1.3.1-H,1.3.1-I,1.3.1-J,1.3.1-K,1.3.1-L,1.3.1-M,1.3.1-N,1.3.1-O,1.3.1-P,1.3.1-Q,
1.3.2-A,1.3.2-B,1.3.2-C,
1.3.3-A,1.3.4-A,1.3.5-A,
1.4.1-A,1.4.1-B,1.4.1-C,1.4.2-A,1.4.3-A,1.4.3-B,1.4.4-A,1.4.5-A,1.4.10-A,1.4.11-A,1.4.12-A,1.4.13-A,
2.1.1-A,2.1.2-A,2.1.4-A,
2.2.1-A,2.2.1-B,2.2.1-C,2.2.2-A,2.2.2-B,
2.3.1-A,
2.4.1-A,2.4.2-A,2.4.3-A,2.4.3-B,2.4.4-A,2.4.5-A,2.4.5-B,2.4.5-C,2.4.6-A,2.4.6-B,2.4.7-A,2.4.11-AA,
2.5.1-A,2.5.2-A,2.5.3-A,2.5.4-A,2.5.7-A,2.5.8-A,
3.1.1-A,3.1.2-A,
3.2.1-A,3.2.2-A,3.2.3-A,3.2.4-A,3.2.6-A,
3.3.1-A,3.3.1-B,3.3.2-A,3.3.2-B,3.3.2-C,3.3.2-D,3.3.3-A,3.3.4-A,3.3.7-A,3.3.8-A,
4.1.1-A,4.1.2-A,4.1.3-A
}}}





'''Enlace directo al subcriterio en la wiki:'''
{{{field|enlace|input type=textarea|rows=2|placeholder=Ejemplo: [[Principio_1/1.1_Texto_Alternativo/1.1.1-A]]}}}


[[Página_principal|Consultar el índice completo de criterios WCAG]]

----

== 2. Ejemplos prácticos ==
Introduce la información respecto a cada ejemplo. Tienes dos opciones: 
* 1. Incluir una captura de imagen de una web y el enlace de donde se ha obtenido el ejemplo
* 2. Incluir un código html propio representando el ejemplo

=== 2.1. Ejemplo NO Accesible ===
<div class="accessibility-collapsible-group">

<div class="mw-collapsible mw-collapsed">
<h4>2.1.1. Imagen</h4>
<div class="mw-collapsible-content">

<div style="margin-left:1em;">
📤 [[Especial:SubirArchivo|Haz clic aquí para subir tu imagen o PDF de evidencia]]  
Una vez subida, copia el nombre del archivo.
En el nombre de cada fichero se ha de incluir:
* Curso de creación: '''2025_26_'''
* Universidad: '''UdL'''
* Identificador del subcriterio: '''1.1.1-A'''
* Accesible o no accesible: '''ACC'''
** '''Ejemplo: 2025_26_UdL_1.1.1-A_ACC.jpg'''
 (por ejemplo: <code>Archivo:2025_26_UdL_1.1.1-A_ACC.jpg</code>) 

y pégalo aquí:

''' 1. Incluir la dirección o nombre de la imagen:'''
{{{field|noa_barrera_evidencia_img|placeholder=Ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg|input type=upload|allowed file types=png,jpg,jpeg,gif,svg,pdf|size=60}}}
''Ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg''

'''2. Incluye la dirección web (URL) de donde se ha obtenido el problema'''.
{{{field|noa_barrera_evidencia_url|input type=text|size=100}}}
''Por ejemplo: https://www.unawebconlabarrera.com''

</div>
</div>

<div class="mw-collapsible mw-collapsed">
<h4>2.1.2. Código HTML</h4>
<div class="mw-collapsible-content">

Incluir código HTML:
{{{field|noa_barrera_evidencia_html|input type=textarea|rows=12|placeholder=Pega aquí un fragmento de código HTML si corresponde}}}
''Incluye el código HTML que represente el problema''

{{#vardefine:noa_barrera_evidencia_html_nowiki| {{{noa_barrera_evidencia_html}}}}}


{{#vardefine:noa_barrera_evidencia_html_nowiki1| <nowiki>{{{noa_barrera_evidencia_html}}}</nowiki>}}

{{#vardefine:noa_barrera_evidencia_html_nowiki2|&lt;nowiki&gt;{{{noa_barrera_evidencia_html|}}}&lt;/nowiki&gt;}}


</div>
</div>









'''Explicación del problema detectado:'''
{{{field|noa_barrera_explicacion|input type=textarea|rows=14|style=width:100%|placeholder=Explica qué problema tiene el código, imagen o URL que has incluido.}}}
''Si has incluido varios elementos (imagen y enlace, código HTML) explicar que problema hay en cada uno.''

'''Indica a que personas con discapacidad afecta y explicación de las barreras que causa:'''
{{{field|noa_barrera_usuarios|input type=textarea|rows=14|style=width:100%|placeholder=Explica qué problema tiene los usuarios que se enfrentan con este problema.}}}
''Explica qué problema tiene los usuarios que se enfrentan con este problema.''

</div> <!-- cierre del bloque NOA -->

----

=== 2.2. Ejemplo Accesible ===
<div class="accessibility-collapsible-group">

<div class="mw-collapsible mw-collapsed">
<h4>2.2.1. Imagen</h4>
<div class="mw-collapsible-content">

<div style="margin-left:1em;">
📤 [[Especial:SubirArchivo|Haz clic aquí para subir tu imagen o PDF de evidencia]]  
Una vez subida, copia el nombre del archivo.
En el nombre de cada fichero se ha de incluir:
* Curso de creación: '''2025_26_'''
* Universidad: '''UdL'''
* Identificador del subcriterio: '''1.1.1-A'''
* Accesible o no accesible: '''ACC'''
** '''Ejemplo: 2025_26_UdL_1.1.1-A_ACC.jpg'''
 (por ejemplo: <code>Archivo:2025_26_UdL_1.1.1-A_ACC.jpg</code>) 

y pégalo aquí:

'''1. Incluir URL de la imagen:'''
{{{field|acc_barrera_evidencia_img|placeholder=Ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg|input type=upload|allowed file types=png,jpg,jpeg,gif,svg,pdf|size=60}}}
''Ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg''

'''2. Incluye la dirección web (URL) de donde se ha obtenido el problema'''
{{{field|acc_barrera_evidencia_url|input type=text|size=100}}}
''Por ejemplo: https://www.unawebconlabarrera.com''

</div>
</div>

<div class="mw-collapsible mw-collapsed">
<h4>2.2.2. Código HTML</h4>
<div class="mw-collapsible-content">

Incluir código HTML:
{{{field|acc_barrera_evidencia_html|input type=textarea|rows=12|placeholder=Pega aquí un fragmento de código HTML si corresponde}}}
</div>
</div>








'''Explicación de la solución:'''
{{{field|acc_barrera_explicacion|input type=textarea|rows=14|style=width:100%|placeholder=Explica como es el código, imagen o URL que has incluido y que aspectos tienes accesibles }}}
Si has incluido varios elementos (imagen y enlace, código HTML) explicar que aspectos de accesibilidad presenta cada uno.
</div> <!-- cierre del bloque ACC -->

----

== 3. Aporte personal ==
''' Proceso de creación:'''
{{{field|proceso|input type=textarea|rows=10}}}
'' Explica como has generado los ejemplos. Analiza brevemente tu metodología: investigación, creación propia, IA, etc.''



''' Herramientas usadas:'''
{{{field|herramientas|input type=textarea|rows=10}}}
'' Indica herramientas de evaluación, editores, IA o validadores que usaste.''


''' Referencias complementarias:'''
{{{field|referencias|input type=textarea|rows=10}}}
''Incluye solo las que te hayan ayudado realmente a entender el criterio o crear el ejemplo. Indica una herramienta por cada fila''
----

== 4. Autoevaluación del aprendizaje ==
<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>
</div>

<div class="eval-row">
4.1. ¿Fue fácil o difícil entender el criterio?  
{{{field|eval_entendimiento|input type=dropdown|values=1,2,3,4,5|}}}
<div class="pf-nota">1 = No entendí casi nada | 5 = Lo comprendí con claridad</div>
</div>

<div class="eval-row">
4.2. ¿Fue fácil o difícil crear el ejemplo no accesible (NOA)?  
{{{field|eval_noa_dificultad|input type=dropdown|values=1,2,3,4,5|}}}
<div class="pf-nota">1 = Muy fácil | 5 = Muy difícil</div>
</div>

<div class="eval-row">
4.3. ¿Fue fácil o difícil crear el ejemplo accesible (ACC)?  
{{{field|eval_acc_dificultad|input type=dropdown|values=1,2,3,4,5|}}}
<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|}}}
<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|}}}
<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|}}}
<div class="pf-nota">1 = No sabría hacerlo | 5 = Podría hacerlo sin ayuda</div>
</div>

<div class="eval-row">
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.}}}
</div>

<div class="eval-row">
4.8. Observaciones personales:  
{{{field|eval_observaciones|input type=textarea|rows=5|style=width:100%|placeholder=Qué aprendiste, qué te costó más, qué te resultó útil.}}}
</div>

{{{end template}}}