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 133 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>Enlace directo a la página del subcriterio en la wiki</b> {{{id_url|}}}  
<div><b>Universidad participante:</b> {{{id_universidad|}}}</div>
[[Categoría: {{{id_subcriterio|}}}]]
<div><b>Curso académico:</b> {{{curso_academico|}}}</div>
-->
<div style="display:none">[[Tiene subcriterio::{{{id_subcriterio|}}}]]</div>
<b>Enlace directo a la página del subcriterio en la wiki</b> {{{enlace|}}}
 
</section>
----
----


Línea 28: 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 53: 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 65: 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 92: 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 100: 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 107: Línea 98:
<!-- 3. APORTE PERSONAL -->
<!-- 3. APORTE PERSONAL -->
<!-- ===================================================== -->
<!-- ===================================================== -->
<!--
== 3. Aporte personal ==
== 3. Aporte personal ==
<div style="margin-left:1em;">
<div style="margin-left:1em;">
Línea 113: Línea 105:
<b>Referencias complementarias:</b><br>{{{referencias|}}}
<b>Referencias complementarias:</b><br>{{{referencias|}}}
</div>
</div>
-->


----


<!-- ===================================================== -->
<!-- ===================================================== -->
<!-- 4. AUTOEVALUACIÓN -->
<!-- 4. AUTOEVALUACIÓN -->
<!-- ===================================================== -->
<!-- ===================================================== -->
<!--
== 4. Autoevaluación ==
== 4. Autoevaluación ==
<table class="wikitable" style="width:100%; background:#fff; margin-top:1em;">
<table class="wikitable" style="width:100%; background:#fff; margin-top:1em;">
Línea 140: Línea 133:
</div>
</div>


-->
<!--
== Comentarios ==
== Comentarios ==
A continuación se muestran comentarios sobre el criterio {{{wcag_titulo_criterio}}}
A continuación se muestran comentarios sobre el criterio '''{{{id_criterio|}}}'''
-->
 
</div> <!-- cierre de wcag-actividad -->
</div> <!-- cierre de wcag-actividad -->


<!-- ============================================= -->
<!-- ============================================= -->
<!-- 🧠 PROPIEDADES SEMÁNTICAS OCULTAS (SMW) -->
<!-- PROPIEDADES SEMÁNTICAS OCULTAS (SMW) -->
<!-- ============================================= -->
<!-- ============================================= -->


{{#set:
{{#set:
  |Tiene criterio WCAG={{{id_criterio|}}}
  |id_criterio={{{id_criterio|}}}
  |Tiene subcriterio={{{id_subcriterio|}}}
  |id_subcriterio={{{id_subcriterio|}}}
  |Enlace al subcriterio={{{enlace|}}}
  |id_universidad={{{id_universidad|}}}
|curso_academico={{{curso_academico|}}}
|enlace={{{enlace|}}}
}}
 


|Imagen NOA={{{noa_barrera_evidencia_img|}}}
[[Categoría:ActividadWCAG]]
|URL NOA={{{noa_barrera_evidencia_url|}}}
|Explicación NOA={{{noa_barrera_explicacion|}}}
|Usuarios afectados={{{noa_barrera_usuarios|}}}


|Imagen ACC={{{acc_barrera_evidencia_img|}}}
</includeonly>
|URL ACC={{{acc_barrera_evidencia_url|}}}
|Explicación ACC={{{acc_barrera_explicacion|}}}


|Proceso de creación={{{proceso|}}}
<noinclude>
|Herramientas usadas={{{herramientas|}}}
== Documentación de la plantilla ActividadWCAG ==
|Referencias={{{referencias|}}}


|Entendimiento del criterio={{{eval_entendimiento|}}}
Esta plantilla muestra la información aportada por el alumnado al crear un **ejemplo práctico WCAG** con:
|Dificultad NOA={{{eval_noa_dificultad|}}}
* Ejemplo NO accesible (NOA)
|Dificultad ACC={{{eval_acc_dificultad|}}}
* Ejemplo accesible (ACC)
|Seguridad en la respuesta={{{eval_seguridad|}}}
* Explicación de barreras y soluciones
|Percepción de utilidad={{{eval_utilidad|}}}
* Evidencias (imagen, código, enlace)
|Aplicación práctica={{{eval_aplicacion|}}}
* Relación con el criterio WCAG correspondiente (subcriterio)
|Explicación personal={{{eval_explicacion|}}}
 
|Observaciones personales={{{eval_observaciones|}}}
=== 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>


</includeonly>
<noinclude>
Plantilla para mostrar los datos del formulario [[Formulario:ActividadWCAG]]. 
Muestra directamente toda la información en pantalla (sin secciones colapsables). 
Incluye evidencias, explicaciones, aporte personal y tabla de autoevaluación.
</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»