Diferencia entre revisiones de «Plantilla:ActividadWCAG»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 101 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
<includeonly>
 
''' Edición de la página como formulario'''
''' Edición de la página como formulario'''
<div style="margin-top:1em;">
<div style="margin-top:1em;">
[{{FULLURL:{{FULLPAGENAME}}|action=formedit&form=ActividadWCAG}} <span style="background:#007acc; color:#fff; padding:0.4em 0.8em; border-radius:4px;">Editar con formulario</span>]
[{{FULLURL:{{FULLPAGENAME}}|action=formedit&form=ActividadWCAG}} <span style="background:#007acc; color:#fff; padding:0.4em 0.8em; border-radius:4px;">Editar con formulario</span>]
</div>
</div>
<div class="wcag-actividad" style="border:1px solid #ccc; padding:1em; background:#fafafa; margin:1.5em 0;">
<div class="wcag-actividad" style="border:1px solid #ccc; padding:1em; background:#fafafa; margin:1.5em 0;">
<!-- ===================================================== -->
<!-- ===================================================== -->
<!-- 1. INFORMACIÓN BÁSICA -->
<!-- 1. INFORMACIÓN BÁSICA -->
<!-- ===================================================== -->
<!-- ===================================================== -->
== 1. Información básica ==
== 1. Información básica ==
<section class="pf-instruccion">
<div><b>Id del criterio:</b> {{{id_criterio|}}}</div>
<div><b>Id del criterio:</b> {{{id_criterio|}}}</div>
<div><b>Título del subcriterio:</b> {{{id_subcriterio|}}}</div>
<div><b>Título del subcriterio:</b> {{{id_subcriterio|}}}</div>
<div><b>Universidad participante:</b> {{{id_universidad|}}}</div>
<div><b>Universidad participante:</b> {{{id_universidad|}}}</div>
<div><b>Curso académico:</b> {{{curso_academico|}}}</div>
<div><b>Curso académico:</b> {{{curso_academico|}}}</div>
<div style="display:none">[[Tiene subcriterio::{{{id_subcriterio|}}}]]</div>
<div style="display:none">[[Tiene subcriterio::{{{id_subcriterio|}}}]]</div>
<b>Enlace directo a la página del subcriterio en la wiki</b> {{{enlace|}}}


<!--<div><b>Enlace directo a la página del subcriterio en la wiki</b> {{{id_url|}}}
</section>
[[Categoría: {{{id_subcriterio|}}}]]
-->
----
----


Línea 33: Línea 28:


=== 2.1. Ejemplo NO accesible ===
=== 2.1. Ejemplo NO accesible ===
<div style="margin-left:1em;">
<section class="accessibility-card-error">  
 
<b>2.1.1. Evidencia en imagen y enlace:</b><br>
<b>2.1.1. Evidencia en imagen:</b><br>
<b> a) Imagen </b> <br>
<b> Imagen </b> <br>
{{#if: {{{noa_barrera_evidencia_img|}}} |
{{#if: {{{noa_barrera_evidencia_img|}}} |
   [[File:{{{noa_barrera_evidencia_img}}}|600px]]
   [[File:{{{noa_barrera_evidencia_img}}}|600px]]
| <i>No se ha subido ninguna imagen.</i> }}
| <i>No se ha subido ninguna imagen.</i> }}


<b>URL fuente de la imagen:</b> <br>
<b>b) Enlace de donde se ha obtenido la imagen:</b> <br>
{{#if: {{{noa_barrera_evidencia_url|}}} |
{{#if: {{{noa_barrera_evidencia_url|}}} |
[{{{noa_barrera_evidencia_url}}} {{{noa_barrera_evidencia_url}}}]
[{{{noa_barrera_evidencia_url}}} {{{noa_barrera_evidencia_url}}}]
|<i>No se ha indicado ninguna URL.</i> }}
|<i>No se ha indicado ningún enlace.</i>
 
}}
 
<br>


<b>2.1.2. Código HTML:</b> <br>
<b>2.1.2. Código HTML:</b> <br>
{{#if: {{{noa_barrera_evidencia_html|}}} |<div class="wcag-codigo-html" padding:0.7em; border:1px solid #ddd;">
{{#if: {{{noa_barrera_evidencia_html|}}} |
<div class="wcag-codigo-html" padding:0.7em; border:1px solid #ddd;">
<code style="white-space: pre-wrap; font-family: monospace; background:none; border:none; color:white">
<code style="white-space: pre-wrap; font-family: monospace; background:none; border:none; color:white">
{{{noa_barrera_evidencia_html}}}
{{{noa_barrera_evidencia_html}}}
Línea 58: Línea 51:


<br><br>
<br><br>
<b> Explicación del problema detectado:</b><br>
<b> Explicación del problema detectado:</b><br>
{{{noa_barrera_explicacion|<i>No se ha incluido explicación.</i>}}}
{{{noa_barrera_explicacion|<i>No se ha incluido explicación.</i>}}}
Línea 70: Línea 57:
{{{noa_barrera_usuarios|<i>No se ha incluido explicación.</i>}}}
{{{noa_barrera_usuarios|<i>No se ha incluido explicación.</i>}}}


</div>
</section>


----
----


=== 2.2. Ejemplo Accesible ===
=== 2.2. Ejemplo Accesible ===
<div style="margin-left:1em;">
<section class="accessibility-card">  


<b>2.2.1. Evidencia de imagen:</b><br>
<b>2.2.1. Evidencia de imagen:</b><br>
<b>Imagen </b> <br>
<b>a) Imagen </b> <br>
{{#if: {{{acc_barrera_evidencia_img|}}} |
{{#if: {{{acc_barrera_evidencia_img|}}} |
[[File:{{{acc_barrera_evidencia_img}}}|600px]]
[[File:{{{acc_barrera_evidencia_img}}}|600px]]
| <i>No se ha subido ninguna imagen.</i> }}
| <i>No se ha subido ninguna imagen.</i> }}
<br>
<br>
<b> URL fuente de la imagen </b>
<b>b) Enlace de donde se ha obtenido la imagen:</b> <br>
{{#if: {{{acc_barrera_evidencia_url|}}} |
{{#if: {{{acc_barrera_evidencia_url|}}} |
[{{{acc_barrera_evidencia_url}}} {{{acc_barrera_evidencia_url}}}]
[{{{acc_barrera_evidencia_url}}} {{{acc_barrera_evidencia_url}}}]
|<i>No se ha indicado ninguna URL.</i> }}
|<i>No se ha indicado ningún enlace.</i>
}}


<br>
<br>


<b>2.2.2 Código HTML:</b>
<b>2.2.2 Código HTML:</b>
{{#if: {{{acc_barrera_evidencia_html|}}} |<div class="wcag-codigo-html" padding:0.7em; border:1px solid #ddd;">
{{#if: {{{acc_barrera_evidencia_html|}}} |
<div class="wcag-codigo-html" padding:0.7em; border:1px solid #ddd;">
<code style="white-space: pre-wrap; font-family: monospace; background:none; border:none; color:white">
<code style="white-space: pre-wrap; font-family: monospace; background:none; border:none; color:white">
{{{acc_barrera_evidencia_html}}}
{{{acc_barrera_evidencia_html}}}
Línea 97: Línea 86:
</div>
</div>
| <div><i>No se ha proporcionado código.</i></div> }}
| <div><i>No se ha proporcionado código.</i></div> }}
<br><br>
<br><br>


Línea 105: Línea 91:
{{{acc_barrera_explicacion|<i>No se ha incluido explicación.</i>}}}
{{{acc_barrera_explicacion|<i>No se ha incluido explicación.</i>}}}


</div>
</section>


----
----
Línea 120: Línea 106:
</div>
</div>
-->
-->
----
 


<!-- ===================================================== -->
<!-- ===================================================== -->
Línea 153: Línea 139:
A continuación se muestran comentarios sobre el criterio '''{{{id_criterio|}}}'''
A continuación se muestran comentarios sobre el criterio '''{{{id_criterio|}}}'''
-->
-->
</div> <!-- cierre de wcag-actividad -->
</div> <!-- cierre de wcag-actividad -->


Línea 166: Línea 153:
  |id_universidad={{{id_universidad|}}}
  |id_universidad={{{id_universidad|}}}
  |curso_academico={{{curso_academico|}}}
  |curso_academico={{{curso_academico|}}}
|enlace={{{enlace|}}}
}}


|noa_barrera_evidencia_img={{{noa_barrera_evidencia_img|}}}
|noa_barrera_evidencia_url={{{noa_barrera_evidencia_url|}}}
|noa_barrera_explicacion={{{noa_barrera_explicacion|}}}
|noa_barrera_usuarios={{{noa_barrera_usuarios|}}}


|acc_barrera_evidencia_img={{{acc_barrera_evidencia_img|}}}
|acc_barrera_evidencia_url={{{acc_barrera_evidencia_url|}}}
|acc_barrera_explicacion={{{acc_barrera_explicacion|}}}
}}
[[Categoría:ActividadWCAG]]
[[Categoría:ActividadWCAG]]


Línea 182: Línea 162:


<noinclude>
<noinclude>
Plantilla para mostrar los datos del formulario [[Formulario:ActividadWCAG]].
== Documentación de la plantilla ActividadWCAG ==
Muestra directamente toda la información en pantalla (sin secciones colapsables).
 
Incluye evidencias, explicaciones, aporte personal y tabla de autoevaluación.
Esta plantilla muestra la información aportada por el alumnado al crear un **ejemplo práctico WCAG** con:
* Ejemplo NO accesible (NOA)
* Ejemplo accesible (ACC)
* Explicación de barreras y soluciones
* Evidencias (imagen, código, enlace)
* Relación con el criterio WCAG correspondiente (subcriterio)
 
=== Parámetros ===
 
{| class="wikitable"
! Parámetro !! Descripción
|-
| <code>id_criterio</code> || Código del criterio WCAG (ej. 1.3.1)
|-
| <code>id_subcriterio</code> || Código del subcriterio (ej. 1.3.1-A)
|-
| <code>id_universidad</code> || Universidad del estudiante (UdL, etc.)
|-
| <code>curso_academico</code> || Curso académico (ej. 2024-25)
|-
| <code>enlace</code> || Enlace directo a la página del subcriterio en la wiki
|-
| <code>noa_barrera_evidencia_img</code> || Imagen del ejemplo no accesible
|-
| <code>noa_barrera_evidencia_url</code> || URL fuente del ejemplo no accesible
|-
| <code>noa_barrera_evidencia_html</code> || Código HTML del ejemplo no accesible
|-
| <code>noa_barrera_explicacion</code> || Explicación del problema detectado
|-
| <code>noa_barrera_usuarios</code> || Personas afectadas y tipo de barrera
|-
| <code>acc_barrera_evidencia_img</code> || Imagen del ejemplo accesible
|-
| <code>acc_barrera_evidencia_url</code> || URL fuente del ejemplo accesible
|-
| <code>acc_barrera_evidencia_html</code> || Código HTML accesible
|-
| <code>acc_barrera_explicacion</code> || Explicación de la solución aplicada
|}
 
=== Ejemplo de uso ===
<pre>
{{ActividadWCAG
|id_criterio=1.3.1
|id_subcriterio=1.3.1-A
|id_universidad=UdL
|curso_academico=2024-25
|enlace=[[1.3.1-A]]
|noa_barrera_evidencia_img=ejemplo-noa.png
|noa_barrera_evidencia_url=https://example.com/noa
|noa_barrera_evidencia_html=&lt;div&gt;Texto en imagen sin alt&lt;/div&gt;
|noa_barrera_explicacion=La imagen contiene texto sin alternativa accesible.
|noa_barrera_usuarios=Personas con discapacidad visual y uso de lector de pantalla.
|acc_barrera_evidencia_img=ejemplo-acc.png
|acc_barrera_evidencia_url=https://example.com/acc
|acc_barrera_evidencia_html=&lt;p&gt;Texto visible accesible&lt;/p&gt;
|acc_barrera_explicacion=El texto está en HTML con contraste y etiquetas semánticas.
}}
</pre>
 
</noinclude>
</noinclude>

Revisión actual - 12:31 6 nov 2025

Edición de la página como formulario

1. Información básica

Id del criterio:
Título del subcriterio:
Universidad participante:
Curso académico:

Enlace directo a la página del subcriterio en la wiki


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen
No se ha subido ninguna imagen.

b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.

2.1.2. Código HTML:

No se ha proporcionado código.



Explicación del problema detectado:
No se ha incluido explicación.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
No se ha incluido explicación.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.


2.2.2 Código HTML:

No se ha proporcionado código.



Explicación de la solución aplicada:
No se ha incluido explicación.



</includeonly>


Documentación de la plantilla ActividadWCAG

Esta plantilla muestra la información aportada por el alumnado al crear un **ejemplo práctico WCAG** con:

  • Ejemplo NO accesible (NOA)
  • Ejemplo accesible (ACC)
  • Explicación de barreras y soluciones
  • Evidencias (imagen, código, enlace)
  • Relación con el criterio WCAG correspondiente (subcriterio)

Parámetros

Parámetro Descripción
id_criterio Código del criterio WCAG (ej. 1.3.1)
id_subcriterio Código del subcriterio (ej. 1.3.1-A)
id_universidad Universidad del estudiante (UdL, etc.)
curso_academico Curso académico (ej. 2024-25)
enlace Enlace directo a la página del subcriterio en la wiki
noa_barrera_evidencia_img Imagen del ejemplo no accesible
noa_barrera_evidencia_url URL fuente del ejemplo no accesible
noa_barrera_evidencia_html Código HTML del ejemplo no accesible
noa_barrera_explicacion Explicación del problema detectado
noa_barrera_usuarios Personas afectadas y tipo de barrera
acc_barrera_evidencia_img Imagen del ejemplo accesible
acc_barrera_evidencia_url URL fuente del ejemplo accesible
acc_barrera_evidencia_html Código HTML accesible
acc_barrera_explicacion Explicación de la solución aplicada

Ejemplo de uso

{{ActividadWCAG
|id_criterio=1.3.1
|id_subcriterio=1.3.1-A
|id_universidad=UdL
|curso_academico=2024-25
|enlace=[[1.3.1-A]]
|noa_barrera_evidencia_img=ejemplo-noa.png
|noa_barrera_evidencia_url=https://example.com/noa
|noa_barrera_evidencia_html=<div>Texto en imagen sin alt</div>
|noa_barrera_explicacion=La imagen contiene texto sin alternativa accesible.
|noa_barrera_usuarios=Personas con discapacidad visual y uso de lector de pantalla.
|acc_barrera_evidencia_img=ejemplo-acc.png
|acc_barrera_evidencia_url=https://example.com/acc
|acc_barrera_evidencia_html=<p>Texto visible accesible</p>
|acc_barrera_explicacion=El texto está en HTML con contraste y etiquetas semánticas.
}}


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