Diferencia entre revisiones de «Formulario:ActividadWCAG»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 84 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
{{{for template|ActividadWCAG|target namespace=ActividadWCAG|autocomplete on category=ActividadWCAG|unique}}}
{{#set:Autor página={{CURRENTUSER}}}}
<noinclude>
<noinclude>
Este formulario permite al alumnado documentar y analizar un criterio WCAG 2.2 con ejemplos prácticos.
Este formulario permite al alumnado documentar y analizar un criterio WCAG 2.2 con ejemplos prácticos.
</noinclude>
</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 ==
'''1.1. Id del criterio:'''
{{{field|id_criterio|mandatory|input type=dropdown|values=
{{{field|id_criterio|mandatory|input type=dropdown|values=
1.1.1 - Contenido no textual (Nivel: A),
1.1.1 - Contenido no textual (Nivel: A),
Línea 62: Línea 64:
4.1.3 - Mensajes de estado (Nivel: AA)
4.1.3 - Mensajes de estado (Nivel: AA)
}}}
}}}
'' Selecciona el criterio concreto''




'''1.2. Id 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=
{{{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.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.2.1-A,2.2.1-B,2.2.1-C,2.2.2-A,2.2.2-B,
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.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.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,
2.5.1-A,2.5.2-A,2.5.3-A,2.5.4-A,2.5.7-A,2.5.8-A,
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.1.1-A,3.1.2-A,
Línea 83: Línea 85:
4.1.1-A,4.1.2-A,4.1.3-A
4.1.1-A,4.1.2-A,4.1.3-A
}}}
}}}
''Selecciona el código que identifica el subcriterio''




'''1.3. Enlace directo al subcriterio en la wiki:'''  
'''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:'''
'' 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]]}}}
{{{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]]''
''Puedes [[Página_principal|consultar el índice completo de la wiki WCAG y seleccionar tu subcriterio concreto]]''
 
</section>
----
----


Línea 98: Línea 107:
* b. Incluir un código HTML propio representando el ejemplo
* b. Incluir un código HTML propio representando el ejemplo


=== 2.1. Ejemplo NO Accesible===
<section class="fondo-rojo">


'''Incluye el ejemplo:'''
<strong>2.1.1. Evidencia (Imagen/Enlace o código)</strong>
<div class="pf-instruccion">
<div class="borde-evidencias">
 
<h3> 2.1. Ejemplo NO Accesible </h3>
<div class="accessibility-collapsible-group">
 
<div class="mw-collapsible mw-collapsed">
<div class="mw-collapsible mw-collapsed">
<p>2.1.a. Imagen</p>
<strong>2.1.1.a Imagen/Enlace no accesible </strong>
<div class="mw-collapsible-content">
<div class="mw-collapsible-content">


<div style="margin-left:1em;">
<div style="margin-left:1em;">
'''1. Incluir la imagen:'''


{{{field|
<div class="pf-instruccion" role="note" aria-label="Instrucción para subir imagen no accesible">
noa_barrera_evidencia_img|
📤 <b>Sube tu imagen de evidencia no accesible</b><br>
placeholder=Ejemplo: Archivo:2025_26_UdL_1.1.1-A_NOA.jpg|
Puedes <b>hacer clic en “Subir archivo”</b> o <b>seleccionar un archivo ya existente</b>  en la wiki <br>
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.
 
Al subir el fichero, usa un nombre identificativo, por ejemplo:<br>
    
    
  Cada fichero tiene una nomenclatura:
  Cada fichero tiene una nomenclatura:
Línea 129: Línea 132:
  Por ejemplo: <code>Archivo:2025_26_UdL_1.1.1-A_NOA.jpg</code>
  Por ejemplo: <code>Archivo:2025_26_UdL_1.1.1-A_NOA.jpg</code>


</div>
'''1. Subir la imagen de la evidencia:'''
{{{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. Incluye la dirección web (URL) origen del problema'''.
 
{{{field|noa_barrera_evidencia_url|input type=text|size=200}}}
'''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''
''Por ejemplo: https://www.unawebconlabarrera.com''


Línea 138: Línea 162:


<div class="mw-collapsible mw-collapsed">
<div class="mw-collapsible mw-collapsed">
<p>2.1.b. Código HTML</p>
<strong>2.1.1.b. Código HTML no accesible</strong>
<div class="mw-collapsible-content">
<div class="mw-collapsible-content">
 
<div class="pf-instruccion">
'''1. Incluir código HTML:'''
'''Incluir código HTML:'''
''' NOTA: Incluye el codigo entre etiquetas &lt;nowiki&gt; y &lt;/nowiki&gt;'''
NOTA: Incluye el codigo entre etiquetas ''' &lt;nowiki&gt; y &lt;/nowiki&gt;'''
</div>
{{{field|noa_barrera_evidencia_html
{{{field|noa_barrera_evidencia_html
|input type=textarea|
|input type=textarea|
Línea 150: Línea 175:
}}}
}}}


 
</div>
</div>
</div>
</div>
</div>
Línea 157: 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
'''Explicación del problema detectado:'''
|input type=textarea
{{{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.}}}
|rows=15
''Si has incluido varios elementos (imagen y enlace, código HTML) explicar que problema hay en cada uno.''
|style=width:100%
 
|placeholder=Indica qué tipo de usuarios se ven afectados y qué barrera les genera.
'''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.''
''Explica qué problema tiene los usuarios que se enfrentan con este problema.''


</div> <!-- cierre del bloque NOA -->
</section>
</div>
----
<div class="pf-instruccion">


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


<strong>2.2.1. Evidencia (Imagen/Enlace o código)</strong>
<div class="borde-evidencias">
<div class="mw-collapsible mw-collapsed">
<div class="mw-collapsible mw-collapsed">
<p>2.2.a. Imagen</p>
<strong>2.2.1.a Imagen/Enlace Accesible </strong>
<div class="mw-collapsible-content">
<div class="mw-collapsible-content">


<div style="margin-left:1em;">
<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.
<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:
  Cada fichero tiene una nomenclatura:
Línea 200: Línea 229:
  Por ejemplo: <code>Archivo:2025_26_UdL_1.1.1-A_ACC.jpg</code>
  Por ejemplo: <code>Archivo:2025_26_UdL_1.1.1-A_ACC.jpg</code>


</div>
'''1. Subir la imagen de la evidencia:'''
{{{field|acc_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. Incluye la dirección web (URL) de donde se ha obtenido el ejemplo'''.
'''2. Enlace de la web donde se observó la evidencia:'''
{{{field|noa_barrera_evidencia_url|input type=text|size=200}}}
{{{field|acc_barrera_evidencia_url
|input type=text
|size=100
|placeholder=Ejemplo: https://www.unawebconlabarrera.com
}}}
''Por ejemplo: https://www.unawebconlabarrera.com''
''Por ejemplo: https://www.unawebconlabarrera.com''


</div>
</div>
</div>
</div>


<div class="mw-collapsible mw-collapsed">
<div class="mw-collapsible mw-collapsed">
<p>2.2.b. Código HTML</p>
<strong>2.2.1.b. Código HTML accesible</strong>
<div class="mw-collapsible-content">
<div class="mw-collapsible-content">
 
<div class="pf-instruccion">
'''1. Incluir código HTML:'''
'''Incluir código HTML:'''
''' NOTA: Incluye el codigo entre etiquetas &lt;nowiki&gt; y &lt;/nowiki&gt;'''
NOTA: Incluye el codigo entre etiquetas '''&lt;nowiki&gt; y &lt;/nowiki&gt;'''
{{{field|
</div>
acc_barrera_evidencia_html|
{{{field|acc_barrera_evidencia_html
input type=textarea|
|input type=textarea|
rows=12|
rows=12|
placeholder= Pega aquí un fragmento de código HTML. INCLUYELO ENTRE ETIQUETAS nowiki
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é.
}}}
Explica porque la evidencia que se ha incluido es un ejemplo accesible.
</div>
</div>
</div>
</section>
</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 ==
== 3. Aporte personal ==
''' Proceso de creación:'''
''' 3.1. Proceso de creación:'''
{{{field|proceso|input type=textarea|rows=10}}}
{{{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.''
'' Explica como has generado los ejemplos. Analiza brevemente tu metodología: investigación, creación propia, IA, etc.''
Línea 248: Línea 296:




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




''' Referencias complementarias:'''
''' 3.3. Referencias complementarias:'''
{{{field|referencias|input type=textarea|rows=10}}}
{{{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''
''Incluye solo las que te hayan ayudado realmente a entender el criterio o crear el ejemplo. Indica una herramienta por cada fila''
Línea 308: 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.}}}
{{{field|eval_observaciones|input type=textarea|rows=5|style=width:100%|placeholder=Qué aprendiste, qué te costó más, qué te resultó útil.}}}
</div>
</div>
-->


{{{end template}}}
{{{end template}}}

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}}}

Obtenido de «https://wikiwcag.udl.cat/index.php?title=Formulario:ActividadWCAG&oldid=3763»