Diferencia entre revisiones de «Formulario:ActividadWCAG»

De WCAG Wiki
Sin resumen de edición
Sin resumen de edición
Línea 253: Línea 253:
</div>
</div>


'''3. Explicación de la solución:'''
'''2.2.2. Explicación de la solución:'''
{{{field|acc_barrera_explicacion
{{{field|acc_barrera_explicacion
|input type=textarea
|input type=textarea
Línea 266: Línea 266:




*******
<h3> 2.1. Ejemplo NO Accesible </h3>
<div class="accessibility-collapsible-group">
<div class="mw-collapsible mw-collapsed">
<strong>2.1.a. Imagen</strong>
<div class="mw-collapsible-content">
<div style="margin-left:1em;">
'''1. Incluir la imagen:'''
📸 Sube aquí tu imagen o PDF de evidencia. 
Puedes arrastrar el archivo directamente o hacer clic en “Subir archivo”.
{{{field|
noa_barrera_evidencia_img|
placeholder=Ejemplo: Archivo:2025_26_UdL_1.1.1-A_NOA.jpg|
input type=upload|
allowed file types=png,jpg,jpeg,gif,svg,pdf|
size=200|
uploadable}}} 📤
o 🗂️ [[Especial:ListaImágenes|Haz clic aquí para seleccionar una imagen existente en la wiki]] e incluyelo en el cuadro de texto.
 
Cada fichero tiene una nomenclatura:
* Curso de creación: '''2025_26_'''
* Universidad: '''UdL'''
* Identificador del subcriterio: '''1.1.1-A'''
* No accesible: '''NOA'''
Por ejemplo: <code>Archivo:2025_26_UdL_1.1.1-A_NOA.jpg</code>
'''2. Incluye la dirección web (URL) origen del problema'''.
{{{field|noa_barrera_evidencia_url|input type=text|size=200}}}
''Por ejemplo: https://www.unawebconlabarrera.com''
</div>
</div>
<div class="mw-collapsible mw-collapsed">
<strong>2.1.b. Código HTML</strong>
<div class="mw-collapsible-content">
'''1. Incluir código HTML:'''
''' NOTA: Incluye el codigo entre etiquetas &lt;nowiki&gt; y &lt;/nowiki&gt;'''
{{{field|noa_barrera_evidencia_html
|input type=textarea|
rows=12|
placeholder=
Pega aquí un fragmento de código HTML. INCLÚYELO ENTRE ETIQUETAS nowiki
}}}
</div>
</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 -->
</div>
----
<div class="pf-instruccion">
=== 2.2. Ejemplo Accesible ===
<div class="accessibility-collapsible-group">
<div class="mw-collapsible mw-collapsed">
<strong>2.2.a. Imagen</strong>
<div class="mw-collapsible-content">
<div style="margin-left:1em;">
'''1. Incluir 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=200|
uploadable}}} 📤
o 🗂️ [[Especial:ListaImágenes|Haz clic aquí para seleccionar una imagen existente en la wiki]] e inclúyelo en el cuadro de texto.
 
Cada fichero tiene una nomenclatura:
* Curso de creación: '''2025_26_'''
* Universidad: '''UdL'''
* Identificador del subcriterio: '''1.1.1-A'''
* No accesible: '''ACC'''
Por ejemplo: <code>Archivo:2025_26_UdL_1.1.1-A_ACC.jpg</code>
'''2. Incluye la dirección web (URL) de donde se ha obtenido el ejemplo'''.
{{{field|noa_barrera_evidencia_url|input type=text|size=200}}}
''Por ejemplo: https://www.unawebconlabarrera.com''
</div>
</div>
<div class="mw-collapsible mw-collapsed">
<strong>2.2.b. Código HTML</strong>
<div class="mw-collapsible-content">
'''1. Incluir código HTML:'''
''' NOTA: Incluye el codigo entre etiquetas &lt;nowiki&gt; y &lt;/nowiki&gt;'''
{{{field|
acc_barrera_evidencia_html|
input type=textarea|
rows=12|
placeholder= Pega aquí un fragmento de código HTML. INCLUYELO ENTRE ETIQUETAS nowiki
}}}
</div>
</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 -->
</div>





Revisión del 06:07 31 oct 2025

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


ActividadWCAG

1. Información básica

1.1. Id del criterio: id_criterio Selecciona el criterio concreto


1.2. Id del subcriterio: id_subcriterio Selecciona el código que identifica el subcriterio


1.3. Enlace directo al subcriterio en la wiki:

enlace Puedes consultar el índice completo de la wiki WCAG y seleccionar tu subcriterio concreto


2. Ejemplos prácticos

Introduce la información respecto a cada ejemplo (accesible y no accesible). Tienes dos opciones:

  • a. Incluir una captura de imagen de una web y el enlace de donde se ha obtenido el ejemplo.
  • b. Incluir un código HTML propio representando el ejemplo


2.1.Evidencia (NO ACCESIBLE)

2.1.1.a Imagen/URL no accesible

📤 Sube tu imagen de evidencia no accesible
Puedes hacer clic en “Subir archivo” o seleccionar un archivo ya existente en la wiki


Al subir el fichero, usa un nombre identificativo, por ejemplo:

Cada fichero tiene una nomenclatura:
* Curso de creación: 2025_26_
* Universidad: UdL
* Identificador del subcriterio: 1.1.1-A
* No accesible: NOA
Por ejemplo: Archivo:2025_26_UdL_1.1.1-A_NOA.jpg

1. Subir la imagen de la evidencia: noa_barrera_evidencia_img


También puedes 🗂️ Seleccionar una imagen existente en la wiki e incluirla en el cuadro de texto.


1.2 URL de la web donde se detectó el problema: noa_barrera_evidencia_url

Por ejemplo: https://www.unawebconlabarrera.com

2.1.1.b. Código HTML no accesible

<div class="pf-instruccion" Incluir código HTML: NOTA: Incluye el codigo entre etiquetas <nowiki> y </nowiki> noa_barrera_evidencia_html



2.1.2. Explicación del problema detectado: noa_barrera_explicacion

Explica qué problema tiene el código, imagen o URL que has incluido.


2.1.3. Personas afectadas y barreras: noa_barrera_usuarios

Explica qué problema tiene los usuarios que se enfrentan con este problema.


2.2. Evidencia (ACCESIBLE)

2.2.1.a Imagen/URL Accesible

📤 Sube tu imagen de evidencia accesible
Puedes hacer clic en “Subir archivo” o seleccionar un archivo ya existente en la wiki


Al subir el fichero, usa un nombre identificativo, por ejemplo:

Cada fichero tiene una nomenclatura:
* Curso de creación: 2025_26_
* Universidad: UdL
* Identificador del subcriterio: 1.1.1-A
* No accesible: ACC
Por ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg

1. Subir la imagen de la evidencia: acc_barrera_evidencia_img


También puedes 🗂️ Seleccionar una imagen existente en la wiki e incluirla en el cuadro de texto.


2. URL de la web donde se observó la evidencia: acc_barrera_evidencia_url

Por ejemplo: https://www.unawebconlabarrera.com

2.2.1.b. Código HTML accesible

<div class="pf-instruccion" Incluir código HTML: NOTA: Incluye el codigo entre etiquetas <nowiki> y </nowiki> acc_barrera_evidencia_html


2.2.2. Explicación de la solución: acc_barrera_explicacion





3. Aporte personal

Proceso de creación: proceso Explica como has generado los ejemplos. Analiza brevemente tu metodología: investigación, creación propia, IA, etc.


Herramientas usadas: herramientas Indica herramientas de evaluación, editores, IA o validadores que usaste.


Referencias complementarias: referencias 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

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

4.1. ¿Fue fácil o difícil entender el criterio? eval_entendimiento

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

4.2. ¿Fue fácil o difícil crear el ejemplo no accesible (NOA)? eval_noa_dificultad

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

4.3. ¿Fue fácil o difícil 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}}}