Diferencia entre revisiones de «Formulario:ActividadWCAG»

← Edición anterior

VisualWikitexto

Revisión actual - 13:07 6 nov 2025

ActividadWCAG

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

1. Información básica

1.1. Id del criterio:
Selecciona el criterio concreto
id_criterio

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

1.3. Indica tu universidad:
Selecciona el acrónimo de tu universidad
id_universidad

1.4. Indica el curso académico:
Selecciona el curso académico actual
curso_academico

1.5. Enlace directo al subcriterio en la wiki: Incluye el enlace al subcriterio directo 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. Ejemplo NO Accesible

2.1.1. Evidencia (Imagen/Enlace o código)

2.1.1.a Imagen/Enlace 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 (se abre en una pestaña nueva) e incluirla en el cuadro de texto.

2 Enlace 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

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 enlace 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. Ejemplo Accesible

2.2.1. Evidencia (Imagen/Enlace o código)

2.2.1.a Imagen/Enlace 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 (se abre en una pestaña nueva) e incluirla en el cuadro de texto.

2. Enlace 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

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

Explica porque la evidencia que se ha incluido es un ejemplo accesible.

{{{end template}}}

Anónimo

Buscar

Diferencia entre revisiones de «Formulario:ActividadWCAG»

Espacios de nombres

Más

Acciones de página

Revisión actual - 13:07 6 nov 2025

Sumario

1. Información básica

2. Ejemplos prácticos

2.1. Ejemplo NO Accesible

2.2. Ejemplo Accesible

Navegación

Navegación

Herramientas wiki

Herramientas wiki

@@ Línea 1: / Línea 1: @@
+{{{for template|ActividadWCAG|target namespace=ActividadWCAG|autocomplete on category=ActividadWCAG|unique}}}
+{{#set:Autor página={{CURRENTUSER}}}}
 <noinclude>
 Este formulario permite al alumnado documentar y analizar un criterio WCAG 2.2 con ejemplos prácticos.
 </noinclude>
+== 1. Información básica ==
+<section class="pf-instruccion">
-{{{for template|ActividadWCAG}}}
+'''1.1. Id del criterio:''' <br>
+'' Selecciona el criterio concreto''<br>
-== 1. Información básica ==
-Selecionar el criterio concreto:
-'''Id del criterio:'''
 {{{field|id_criterio|mandatory|input type=dropdown|values=
 .1.1 - Contenido no textual (Nivel: A),
@@ Línea 64: / Línea 65: @@
 }}}
-'''Id del subcriterio:'''
-Incluir la identificación del subcriterio:
+'''1.2. Id del subcriterio:''' <br>
+''Selecciona el código que identifica el subcriterio'' <br>
 {{{field|id_subcriterio|mandatory|input type=dropdown|values=
 .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,
@@ Línea 76: / Línea 78: @@
 .2.1-A,2.2.1-B,2.2.1-C,2.2.2-A,2.2.2-B,
 .3.1-A,
-.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,
+.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-A,
 .5.1-A,2.5.2-A,2.5.3-A,2.5.4-A,2.5.7-A,2.5.8-A,
 .1.1-A,3.1.2-A,
@@ Línea 85: / Línea 87: @@
+'''1.3. Indica tu universidad:'''  <br>
+''Selecciona el acrónimo de tu universidad''  <br>
+{{{field|id_universidad|mandatory|input type=dropdown|values= UdL, UFV, UPSA}}}
+'''1.4. Indica el curso académico:'''  <br>
+''Selecciona el curso académico actual''  <br>
+{{{field|curso_academico|mandatory|input type=dropdown|values= 2025-26, 2026-27, 2027-28}}}
+'''1.5. Enlace directo al subcriterio en la wiki:'''
-'''Enlace directo al subcriterio en la wiki:'''
+'' Incluye el enlace al subcriterio directo''
 {{{field|enlace|input type=textarea|rows=2|placeholder=Ejemplo: [[Principio_1/1.1_Texto_Alternativo/1.1.1-A]]}}}
+''Puedes [[Página_principal|consultar el índice completo de la wiki WCAG y seleccionar tu subcriterio concreto]]''
+</section>
-[[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:
+Introduce la información respecto a cada ejemplo (accesible y no accesible). Tienes dos opciones:
-* 1. Incluir una captura de imagen de una web y el enlace de donde se ha obtenido el ejemplo
+* a. 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
+* b. Incluir un código HTML propio representando el ejemplo
-=== 2.1. Ejemplo NO Accesible ===
+=== 2.1. Ejemplo NO Accesible===
-<div class="accessibility-collapsible-group">
+<section class="fondo-rojo">
+<strong>2.1.1. Evidencia (Imagen/Enlace o código)</strong>
+<div class="borde-evidencias">
 <div class="mw-collapsible mw-collapsed">
-<h4>1. Imagen</h4>
+<strong>2.1.1.a Imagen/Enlace no accesible </strong>
 <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í:
+<div class="pf-instruccion" role="note" aria-label="Instrucción para subir imagen no accesible">
+📤 <b>Sube tu imagen de evidencia no accesible</b><br>
+Puedes <b>hacer clic en “Subir archivo”</b> o <b>seleccionar un archivo ya existente</b>  en la wiki <br>
+Al subir el fichero, usa un nombre identificativo, por ejemplo:<br>
+ 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>
-''' 1. Incluir la dirección o nombre de la imagen:'''
+</div>
-{{{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'''.
+'''1. Subir la imagen de la evidencia:'''
-{{{field|noa_barrera_evidencia_url|input type=text|size=100}}}
+{{{field|noa_barrera_evidencia_img
+|input type=upload
+|uploadable
+|allowed file types=png,jpg,jpeg,gif,svg,pdf
+|size=100
+|placeholder=Selecciona o arrastra tu archivo aquí
+}}}
+<br>
+También puedes 🗂️
+<html>
+<a href="https://www.wikiwcag.udl.cat/index.php/Especial:ListaIm%C3%A1genes " target="_blank" rel="noopener">
+Seleccionar una imagen existente en la wiki <span class="sr-only">(se abre en una pestaña nueva)</span>
+</a> </html> e incluirla en el cuadro de texto.
+'''2 Enlace de la web donde se detectó el problema:'''
+{{{field|noa_barrera_evidencia_url
+|input type=text
+|size=100
+|placeholder=Ejemplo: https://www.unawebconlabarrera.com
+}}}
 ''Por ejemplo: https://www.unawebconlabarrera.com''
@@ Línea 133: / Línea 162: @@
 <div class="mw-collapsible mw-collapsed">
-<h4>2. Código HTML</h4>
+<strong>2.1.1.b. Código HTML no accesible</strong>
 <div class="mw-collapsible-content">
+<div class="pf-instruccion">
+'''Incluir código HTML:'''
+NOTA: Incluye el codigo entre etiquetas ''' &lt;nowiki&gt; y &lt;/nowiki&gt;'''
+</div>
+{{{field|noa_barrera_evidencia_html
+|input type=textarea|
+rows=12|
+placeholder=
+Pega aquí un fragmento de código HTML. INCLÚYELO ENTRE ETIQUETAS nowiki
+}}}
-Incluir código HTML:
+</div>
-'''IMPORTANTE: incluir el código HTML entre dos etiequetas <nowiki> </nowiki> para que no sea interpretado por la wiki.'''
+</div>
-{{{field|noa_barrera_evidencia_html|input type=textarea|rows=12|placeholder=Pega aquí un fragmento de código o URL si corresponde}}}
-''Incluye el código HTML que represente el problema''
 </div>
 </div>
@@ Línea 145: / Línea 182: @@
+'''2.1.2. Explicación del problema detectado:'''
+{{{field|noa_barrera_explicacion
+|input type=textarea
+|rows=15
+|style=width:100%
+|placeholder=Describe qué problema presenta el código, imagen o enlace que has incluido.
+}}}
+''Explica qué problema tiene el código, imagen o enlace que has incluido.''
+'''2.1.3. Personas afectadas y barreras:'''
+{{{field|noa_barrera_usuarios
+|input type=textarea
+|rows=15
-'''Explicación del problema detectado:'''
+|style=width:100%
-{{{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.}}}
+|placeholder=Indica qué tipo de usuarios se ven afectados y qué barrera les genera.
-''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 -->
+</section>
-----
+=== 2.2. Ejemplo Accesible ===
+<section class="fondo-verde">
-=== 2.1. Ejemplo Accesible ===
+<strong>2.2.1. Evidencia (Imagen/Enlace o código)</strong>
-<div class="accessibility-collapsible-group">
+<div class="borde-evidencias">
 <div class="mw-collapsible mw-collapsed">
-<h4>1. Imagen</h4>
+<strong>2.2.1.a Imagen/Enlace Accesible </strong>
 <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í:
+<div class="pf-instruccion" role="note" aria-label="Instrucción para subir imagen accesible">
+📤 <b>Sube tu imagen de evidencia accesible</b><br>
+Puedes <b>hacer clic en “Subir archivo”</b> o <b>seleccionar un archivo ya existente</b>  en la wiki <br>
+Al subir el fichero, usa un nombre identificativo, por ejemplo:<br>
+ 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>
+</div>
-'''1. Incluir URL de la imagen:'''
+'''1. Subir la imagen de la evidencia:'''
-{{{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}}}
+{{{field|acc_barrera_evidencia_img
-''Ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg''
+|input type=upload
+|uploadable
+|allowed file types=png,jpg,jpeg,gif,svg,pdf
+|size=100
+|placeholder=Selecciona o arrastra tu archivo aquí
+}}}
+<br>
+También puedes 🗂️
+<html>
+<a href="https://www.wikiwcag.udl.cat/index.php/Especial:ListaIm%C3%A1genes"  target="_blank" rel="noopener">
+Seleccionar una imagen existente en la wiki <span class="sr-only">(se abre en una pestaña nueva)</span>
+</a> </html> e incluirla en el cuadro de texto.
-'''2. Incluye la dirección web (URL) de donde se ha obtenido el problema'''
+'''2. Enlace de la web donde se observó la evidencia:'''
-{{{field|acc_barrera_evidencia_url|input type=text|size=100}}}
+{{{field|acc_barrera_evidencia_url
+|input type=text
+|size=100
+|placeholder=Ejemplo: https://www.unawebconlabarrera.com
+}}}
 ''Por ejemplo: https://www.unawebconlabarrera.com''
@@ Línea 195: / Línea 258: @@
 <div class="mw-collapsible mw-collapsed">
-<h4>2. Código HTML</h4>
+<strong>2.2.1.b. Código HTML accesible</strong>
 <div class="mw-collapsible-content">
+<div class="pf-instruccion">
-Incluir código HTML:
+'''Incluir código HTML:'''
-'''IMPORTANTE: incluir el código HTML entre dos etiequetas <nowiki> </nowiki> para que no sea interpretado por la wiki.'''
+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 o URL si corresponde}}}
-</div>
 </div>
+{{{field|acc_barrera_evidencia_html
+|input type=textarea|
+rows=12|
+placeholder=
+Pega aquí un fragmento de código HTML. INCLÚYELO ENTRE ETIQUETAS nowiki
+}}}
+</div> <!-- cierre de mw-collapsible-content -->
+</div> <!-- cierre de mw-collapsible -->
+</div> <!-- cierre de pf-instruccion -->
+</div> <!-- cierre de contenedor general accesible -->
+'''2.2.2. Explicación de la solución:'''
+{{{field|acc_barrera_explicacion
+|input type=textarea
+|rows=10
+|style=width:100%
+|placeholder=Describe qué elementos del ejemplo son accesibles y por qué.
-'''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 }}}
+Explica porque la evidencia que se ha incluido es un ejemplo accesible.
-Si has incluido varios elementos (imagen y enlace, código HTML) explicar que aspectos de accesibilidad presenta cada uno.
+</div>
-</div> <!-- cierre del bloque ACC -->
+</section>
 ----
+<!--
 == 3. Aporte personal ==
-''' Proceso de creación:'''
+''' 3.1. 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.''
@@ Línea 225: / Línea 296: @@
-''' Herramientas usadas:'''
+''' 3.2. Herramientas usadas:'''
 {{{field|herramientas|input type=textarea|rows=10}}}
 '' Indica herramientas de evaluación, editores, IA o validadores que usaste.''
-''' Referencias complementarias:'''
+''' 3.3. 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''
@@ Línea 285: / Línea 356: @@
 {{{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}}}

Anónimo

Buscar

Diferencia entre revisiones de «Formulario:ActividadWCAG»

Revisión actual - 13:07 6 nov 2025

1. Información básica

2. Ejemplos prácticos

2.1. Ejemplo NO Accesible

2.2. Ejemplo Accesible

Navegación

Herramientas wiki

Herramientas de página