Diferencia entre revisiones de «Plantilla:Actividad WCAG»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Línea 3: Línea 3:
</noinclude>
</noinclude>


<!-- ========================================================= -->
<!-- BLOQUE PRINCIPAL DE LA PLANTILLA Actividad_WCAG -->
<!-- ========================================================= -->
{{{for template|Actividad_WCAG}}}
{{{for template|Actividad_WCAG}}}


== 1. Información básica ==
== 1. Información básica ==
'''Id del criterio:'''
'''Id del criterio:'''
{{{field|id|mandatory|input type=dropdown|values=
{{{field|id|mandatory|input type=dropdown|values=
Línea 68: Línea 64:


'''Título del subcriterio:'''
'''Título del subcriterio:'''
{{{field|titulo|input type=text|mandatory|placeholder=Ejemplo: 1.1.1-A. Alternativa textual breve obligatoria}}}
{{{field|titulo}}}
 
Por ejemplo:
* ''1.1.1-A. Alternativa textual breve obligatoria o 1.1.1-B. Actualización de alternativas textuales ''.
 
''' Tener en cuenta el identificador del subcriterio y la letra que lo acompaña'''
 


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


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


----
----
Línea 79: Línea 82:
== 2. Ejemplos prácticos ==
== 2. Ejemplos prácticos ==


<!-- ========================================================= -->
<!-- 2.1. EJEMPLO NO ACCESIBLE -->
<!-- ========================================================= -->


=== 2.1. Ejemplo NO Accesible ===
<div class="accessibility-card-error">
<div class="accessibility-collapsible-group">
'''EJEMPLO NO ACCESIBLE'''
 
* Captura o fragmento de código o URL:
''Es posible incluir solo la imagen del problema, el codigo HTML o una URL. O las tres opciones (siempre que sean la misma)''


<div class="mw-collapsible mw-collapsed">
1. IMAGEN
<h4>1. Imagen</h4>
<div style="margin-left:1em;">
<div class="mw-collapsible-content">
📤 [[Especial:SubirArchivo|Haz clic aquí para subir tu imagen o PDF de evidencia]]   
📤 [[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}}}
Una vez subida, copia el nombre del archivo.
</div></div>
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: '''NOA'''
** '''Ejemplo: 2025_26_UdL_1.1.1-A_NOA.jpg'''
(por ejemplo: <code>Archivo:2025_26_UdL_1.1.1-A_NOA.jpg</code>)


<div class="mw-collapsible mw-collapsed">
y pégalo aquí:
<h4>2. Código HTML</h4>
</div>
<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 class="mw-collapsible mw-collapsed">
Incluir URL de la imagen:
<h4>3. URL</h4>
{{{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|mandatory|size=60}}}
<div class="mw-collapsible-content">
''Ejemplo: Archivo:2025_26_UdL_1.1.1-A_NOA.jpg''
{{{field|noa_barrera_evidencia_url|input type=text|size=100|placeholder=https://www.unawebconlabarrera.com}}}
</div></div>


'''Explicación del problema detectado:'''
2. CÓDIGO HTML
{{{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:'''
Incluir código HTML NO ACCESIBLE:
{{{field|noa_barrera_evidencia_html|input type=textarea|rows=8|placeholder=Pega aquí un fragmento de código o URL si corresponde}}}


</div> <!-- cierre del bloque NOA -->
3. URL DE WEB CON EL EJEMPLO NO ACCESIBLE
{{{field|noa_barrera_evidencia_url|input type=textarea|rows=2|placeholder=Ejemplo: www.unawebconlabarrera.com}}}
 
 
 
 
* Explicación del problema detectado:
{{{field|noa_barrera_explicacion|input type=textarea}}}
''Explica que problema tiene el código o imagen que has incluido''
 
 
'''Usuarios afectados por este problema:'''
 
{{{for template|Usuario_Afectado|multiple}}}
 
* Tipo de barrera:
{{{field|noa_user_barrera|input type=dropdown|values=Visual,Auditiva,Cognitiva,Motriz,General}}}
 
* Impacto o gravedad:
{{{field|noa_user_gravedad|input type=dropdown|values=Leve,Moderada,Grave}}}
 
* Descripción del problema que puede experimentar el usuario:
{{{field|noa_user_descripcion|input type=textarea|rows=2|placeholder=Describe brevemente la dificultad o barrera que genera este criterio para este tipo de usuario.}}}
 
{{{end template}}}
</div>


----
----
<div class="accessibility-card">
'''EJEMPLO ACCESIBLE'''
* Captura o fragmento de código o URL:
''Es posible incluir solo la imagen del ejemplo accesible, el código HTML o una URL donde se implemente de forma correcta. O las tres opciones (siempre que sean la misma)''
1. IMAGEN
<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í:
</div>
Incluir URL 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|mandatory|size=60}}}
''Ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg''


<!-- ========================================================= -->
2. CÓDIGO HTML
<!-- 2.2. EJEMPLO ACCESIBLE -->
<!-- ========================================================= -->


=== 2.2. Ejemplo Accesible ===
Incluir código HTML:
<div class="accessibility-collapsible-group">
{{{field|acc_barrera_evidencia_html|input type=textarea|rows=8|placeholder=Pega aquí un fragmento de código o URL si corresponde}}}


<div class="mw-collapsible mw-collapsed">
3. URL DE WEB DONDE SUCEDE EL PROBLEMA
<h4>1. Imagen</h4>
{{{field|acc_barrera_evidencia_url|input type=textarea|rows=2|placeholder=Ejemplo: www.unawebconlabarrera.com}}}
<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>


<div class="mw-collapsible mw-collapsed">
{{{field|acc_evidencia_img|input type=upload|allowed file types=png,jpg,jpeg,gif,svg,pdf|mandatory|size=60}}}
<h4>2. Código HTML</h4>
{{{field|acc_evidencia_code|input type=textarea}}}
<div class="mw-collapsible-content">
'' rellena uno o los dos campos, según tengas imagen solo o código HTML ''
{{{field|acc_barrera_evidencia_html|input type=textarea|rows=10|placeholder=Pega aquí el código accesible}}}
</div></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:'''
* Explicación breve de cómo se ha implementado para solucionar la barrera:
{{{field|acc_barrera_explicacion|input type=textarea|rows=8|style=width:100%|placeholder=Explica cómo se solucionó la barrera.}}}
{{{field|acc_barrera_explicacion|input type=textarea|rows=8|placeholder=Explica qué cambios o técnicas se aplicaron para cumplir el criterio.}}}
''Explica porque es accesible el código o imagen que has incluido''
</div>
</div>


Línea 163: Línea 203:
''(Incluye solo las que te hayan ayudado realmente a entender el criterio o crear el ejemplo.)''
''(Incluye solo las que te hayan ayudado realmente a entender el criterio o crear el ejemplo.)''


----


== Autoevaluación del aprendizaje ==


<div class="pf-instruccion" style="background:#f8f9fa; border:1px solid #ccc; padding:0.6em; margin-bottom:1em;">
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>


----
* ¿Qué fácil te resultó entender el criterio?
{{{field|eval_entendimiento|input type=dropdown|values=1,2,3,4,5|default=3}}}
<div class="pf-nota"> 1 = No entendí casi nada | 5 = Lo comprendí con claridad</div>


== 4. Autoevaluación del aprendizaje ==
* ¿Qué difícil fue crear el ejemplo no accesible (NOA)?
<div class="pf-instruccion">
{{{field|eval_noa_dificultad|input type=dropdown|values=1,2,3,4,5|default=3}}}
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 class="pf-nota"> 1 = Muy fácil | 5 = Muy difícil</div>
</div>


<div class="eval-row">
* ¿Qué difícil fue crear el ejemplo accesible (ACC)?
4.1. ¿Qué tan fácil te resultó entender el criterio?
{{{field|eval_acc_dificultad|input type=dropdown|values=1,2,3,4,5|default=3}}}
{{{field|eval_entendimiento|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota"> 1 = Muy fácil | 5 = Muy difícil</div>
<div class="pf-nota">1 = No lo entendí casi nada | 5 = Lo comprendí con claridad</div>
</div>


<div class="eval-row">
* ¿Qué seguridad tienes de que tus ejemplos son correctos?
4.2. ¿Qué tan difícil fue crear el ejemplo no accesible (NOA)?
{{{field|eval_seguridad|input type=dropdown|values=1,2,3,4,5|default=3}}}
{{{field|eval_noa_dificultad|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota"> 1 = No estoy seguro | 5 = Totalmente seguro</div>
<div class="pf-nota">1 = Muy fácil | 5 = Muy difícil</div>
</div>


<div class="eval-row">
* ¿En qué medida comprendes para qué sirve este criterio en la práctica?
4.3. ¿Qué tan difícil fue crear el ejemplo accesible (ACC)?
{{{field|eval_utilidad|input type=dropdown|values=1,2,3,4,5|default=3}}}
{{{field|eval_acc_dificultad|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 class="pf-nota">1 = Muy fácil | 5 = Muy difícil</div>
</div>


<div class="eval-row">
* ¿Podrías aplicar este criterio en otro proyecto o web distinta?
4.4. ¿Qué seguridad tienes de que tus ejemplos son correctos?
{{{field|eval_aplicacion|input type=dropdown|values=1,2,3,4,5|default=3}}}
{{{field|eval_seguridad|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 class="pf-nota">1 = No estoy seguro | 5 = Totalmente seguro</div>
</div>


<div class="eval-row">
* Si tuvieras que explicarle este criterio a un compañero que no sabe de accesibilidad, ¿cómo lo harías en una frase?
4.5. ¿En qué medida comprendes para qué sirve este criterio en la práctica?
{{{field|eval_explicacion|input type=textarea|rows=2|placeholder=Redacta una frase que resuma el criterio con tus propias palabras.}}}
{{{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">
* Observaciones personales:
4.6. ¿Podrías aplicar este criterio en otro proyecto o web distinta? 
{{{field|eval_observaciones|input type=textarea|rows=3|placeholder=Qué aprendiste, qué te costó más, qué te sorprendió o te resultó útil.}}}
{{{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">
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>


<!-- ========================================================= -->
<!-- CIERRE DEL BLOQUE PRINCIPAL -->
<!-- ========================================================= -->
{{{end template}}}
{{{end template}}}

Revisión del 13:19 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

Por ejemplo:

  • 1.1.1-A. Alternativa textual breve obligatoria o 1.1.1-B. Actualización de alternativas textuales .

Tener en cuenta el identificador del subcriterio y la letra que lo acompaña


Enlace directo al subcriterio en la wiki: enlace

Consultar el índice completo de criterios WCAG


2. Ejemplos prácticos

EJEMPLO NO ACCESIBLE

  • Captura o fragmento de código o URL:

Es posible incluir solo la imagen del problema, el codigo HTML o una URL. O las tres opciones (siempre que sean la misma)

1. IMAGEN

📤 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: NOA
    • Ejemplo: 2025_26_UdL_1.1.1-A_NOA.jpg
(por ejemplo: Archivo:2025_26_UdL_1.1.1-A_NOA.jpg)

y pégalo aquí:

Incluir URL de la imagen: noa_barrera_evidencia_img Ejemplo: Archivo:2025_26_UdL_1.1.1-A_NOA.jpg

2. CÓDIGO HTML

Incluir código HTML NO ACCESIBLE: noa_barrera_evidencia_html

3. URL DE WEB CON EL EJEMPLO NO ACCESIBLE noa_barrera_evidencia_url



  • Explicación del problema detectado:

noa_barrera_explicacion Explica que problema tiene el código o imagen que has incluido


Usuarios afectados por este problema:

Usuario_Afectado

  • Tipo de barrera:

noa_user_barrera

  • Impacto o gravedad:

noa_user_gravedad

  • Descripción del problema que puede experimentar el usuario:

noa_user_descripcion

{{{end template}}}

EJEMPLO ACCESIBLE

  • Captura o fragmento de código o URL:

Es posible incluir solo la imagen del ejemplo accesible, el código HTML o una URL donde se implemente de forma correcta. O las tres opciones (siempre que sean la misma)

1. IMAGEN

📤 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: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg)

y pégalo aquí:

Incluir URL de la imagen: noa_barrera_evidencia_img Ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg

2. CÓDIGO HTML

Incluir código HTML: acc_barrera_evidencia_html

3. URL DE WEB DONDE SUCEDE EL PROBLEMA acc_barrera_evidencia_url

acc_evidencia_img acc_evidencia_code rellena uno o los dos campos, según tengas imagen solo o código HTML


  • Explicación breve de cómo se ha implementado para solucionar la barrera:

acc_barrera_explicacion Explica porque es accesible el código o imagen que has incluido

3. Aporte personal

Proceso de creación: proceso Explica como 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.)

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

  • ¿Qué fácil te resultó entender el criterio?

eval_entendimiento

1 = No entendí casi nada | 5 = Lo comprendí con claridad
  • ¿Qué difícil fue crear el ejemplo no accesible (NOA)?

eval_noa_dificultad

1 = Muy fácil | 5 = Muy difícil
  • ¿Qué difícil fue crear el ejemplo accesible (ACC)?

eval_acc_dificultad

1 = Muy fácil | 5 = Muy difícil
  • ¿Qué seguridad tienes de que tus ejemplos son correctos?

eval_seguridad

1 = No estoy seguro | 5 = Totalmente seguro
  • ¿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
  • ¿Podrías aplicar este criterio en otro proyecto o web distinta?

eval_aplicacion

1 = No sabría hacerlo | 5 = Podría hacerlo sin ayuda
  • Si tuvieras que explicarle este criterio a un compañero que no sabe de accesibilidad, ¿cómo lo harías en una frase?

eval_explicacion

  • Observaciones personales:

eval_observaciones


{{{end template}}}

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