|
|
| Línea 1: |
Línea 1: |
| <noinclude> | | <includeonly> |
| Este formulario permite al alumnado documentar y analizar un criterio WCAG 2.2 con ejemplos prácticos.
| | <div class="wcag-actividad" style="border:1px solid #ccc; padding:1em; background:#fafafa; margin:1.5em 0;"> |
| </noinclude>
| |
| | |
| {{{for template|Actividad_WCAG}}}
| |
|
| |
|
| | <!-- ===================================================== --> |
| | <!-- 1. INFORMACIÓN BÁSICA --> |
| | <!-- ===================================================== --> |
| == 1. Información básica == | | == 1. Información básica == |
| '''Id del criterio:'''
| | <div><b>Id del criterio:</b> {{{id|}}}</div> |
| {{{field|id|mandatory|input type=dropdown|values= | | <div><b>Título del subcriterio:</b> {{{titulo|}}}</div> |
| 1.1.1 - Contenido no textual (Nivel: A),
| | <div><b>Enlace al criterio:</b> {{{enlace|}}}</div> |
| 1.2.1 - Solo audio o vídeo grabado (Nivel: A),
| |
| 1.2.2 - Subtítulos (grabado) (Nivel: A),
| |
| 1.2.3 - Audiodescripción o alternativa multimedia (Nivel: A),
| |
| 1.2.4 - Subtítulos (en directo) (Nivel: AA),
| |
| 1.2.5 - Audiodescripción (grabada) (Nivel: AA),
| |
| 1.3.1 - Información y relaciones (Nivel: A),
| |
| 1.3.2 - Secuencia significativa (Nivel: A),
| |
| 1.3.3 - Características sensoriales (Nivel: A),
| |
| 1.3.4 - Orientación (Nivel: AA),
| |
| 1.3.5 - Identificación del propósito del campo (Nivel: AA),
| |
| 1.4.1 - Uso del color (Nivel: A),
| |
| 1.4.2 - Control del audio (Nivel: A),
| |
| 1.4.3 - Contraste (mínimo) (Nivel: AA),
| |
| 1.4.4 - Redimensionar texto (Nivel: AA),
| |
| 1.4.5 - Imágenes de texto (Nivel: AA),
| |
| 1.4.10 - Reflujo (Nivel: AA),
| |
| 1.4.11 - Contraste no textual (Nivel: AA),
| |
| 1.4.12 - Espaciado del texto (Nivel: AA),
| |
| 1.4.13 - Contenido en hover o focus (Nivel: AA),
| |
| 2.1.1 - Teclado (Nivel: A),
| |
| 2.1.2 - Sin trampa de teclado (Nivel: A),
| |
| 2.1.4 - Atajos del teclado (Nivel: A),
| |
| 2.2.1 - Tiempo ajustable (Nivel: A),
| |
| 2.2.2 - Pausar, detener, ocultar (Nivel: A),
| |
| 2.3.1 - Tres destellos o menos (Nivel: A),
| |
| 2.4.1 - Saltar bloques (Nivel: A),
| |
| 2.4.2 - Titulado de página (Nivel: A),
| |
| 2.4.3 - Orden de enfoque (Nivel: A),
| |
| 2.4.4 - Propósito de los enlaces (en contexto) (Nivel: A),
| |
| 2.4.5 - Múltiples vías (Nivel: AA),
| |
| 2.4.6 - Encabezados y etiquetas (Nivel: AA),
| |
| 2.4.7 - Foco visible (Nivel: AA),
| |
| 2.4.11 - Foco no oculto (mínimo) (Nivel: AA),
| |
| 2.5.1 - Gestos con puntero (Nivel: A),
| |
| 2.5.2 - Cancelación del puntero (Nivel: A),
| |
| 2.5.3 - Etiqueta en el nombre (Nivel: A),
| |
| 2.5.4 - Activación por movimiento (Nivel: A),
| |
| 2.5.7 - Arrastre accesible (Nivel: AA),
| |
| 2.5.8 - Tamaño mínimo de interacción (Nivel: AA),
| |
| 3.1.1 - Idioma de la página (Nivel: A),
| |
| 3.1.2 - Idioma de las partes (Nivel: AA),
| |
| 3.2.1 - Al recibir el foco (Nivel: A),
| |
| 3.2.2 - Al recibir una entrada (Nivel: A),
| |
| 3.2.3 - Navegación consistente (Nivel: AA),
| |
| 3.2.4 - Identificación consistente (Nivel: AA),
| |
| 3.3.1 - Identificación de errores (Nivel: A),
| |
| 3.3.2 - Etiquetas o instrucciones (Nivel: A),
| |
| 3.3.3 - Sugerencia ante errores (Nivel: AA),
| |
| 3.3.4 - Prevención de errores (Nivel: AA),
| |
| 4.1.1 - Procesamiento (Nivel: A),
| |
| 4.1.2 - Nombre - función - valor (Nivel: A),
| |
| 4.1.3 - Mensajes de estado (Nivel: AA)
| |
| }}} | |
| | |
| '''Título del subcriterio:'''
| |
| {{{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:'''
| |
| {{{field|enlace}}} | |
| | |
| [[Página_principal|Consultar el índice completo de criterios WCAG]]
| |
| | |
|
| |
|
| ---- | | ---- |
|
| |
|
| | <!-- ===================================================== --> |
| | <!-- 2. EJEMPLOS PRÁCTICOS --> |
| | <!-- ===================================================== --> |
| == 2. Ejemplos prácticos == | | == 2. Ejemplos prácticos == |
|
| |
|
| | === 2.1. Ejemplo NO accesible === |
| | <div class="accessibility-collapsible-group"> |
|
| |
|
| <div class="accessibility-card-error"> | | <!-- Imagen --> |
| '''EJEMPLO NO ACCESIBLE'''
| | <div class="mw-collapsible mw-collapsed"> |
| | <h4>1. Imagen</h4> |
| | <div class="mw-collapsible-content"> |
| | {{#if: {{{noa_barrera_evidencia_img|}}} | |
| | <div><b>📷 Evidencia de imagen:</b><br>[[File:{{{noa_barrera_evidencia_img}}}|600px]]</div> |
| | | <div><i>No se ha subido ninguna imagen.</i></div> }} |
| | </div> |
| | </div> |
|
| |
|
| * Captura o fragmento de código o URL:
| | <!-- Código --> |
| ''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"> |
| | <h4>2. Código HTML</h4> |
| | <div class="mw-collapsible-content"> |
| | {{#if: {{{noa_barrera_evidencia_html|}}} | |
| | <pre style="background:#f9f9f9; padding:0.7em; border:1px solid #ddd;">{{{noa_barrera_evidencia_html}}}</pre> |
| | | <div><i>No se ha proporcionado código.</i></div> }} |
| | </div> |
| | </div> |
|
| |
|
| 1. IMAGEN
| | <!-- URL --> |
| <div style="margin-left:1em;"> | | <div class="mw-collapsible mw-collapsed"> |
| 📤 [[Especial:SubirArchivo|Haz clic aquí para subir tu imagen o PDF de evidencia]]
| | <h4>3. URL</h4> |
| Una vez subida, copia el nombre del archivo.
| | <div class="mw-collapsible-content"> |
| En el nombre de cada fichero se ha de incluir:
| | {{#if: {{{noa_barrera_evidencia_url|}}} | |
| * Curso de creación: '''2025_26_'''
| | <div><b>🔗 URL:</b> [{{{noa_barrera_evidencia_url}}} Ver página]</div> |
| * Universidad: '''UdL'''
| | | <div><i>No se ha indicado ninguna URL.</i></div> }} |
| * Identificador del subcriterio: '''1.1.1-A'''
| | </div> |
| * 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>)
| |
| | |
| y pégalo aquí:
| |
| </div> | | </div> |
|
| |
|
| Incluir URL de la imagen:
| | <b>🧩 Explicación del problema detectado:</b><br> |
| {{{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}}}
| | {{{noa_barrera_explicacion|<i>No se ha incluido explicación.</i>}}} |
| ''Ejemplo: Archivo:2025_26_UdL_1.1.1-A_NOA.jpg''
| |
| | |
| 2. CÓDIGO HTML
| |
| | |
| 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}}}
| |
| | |
| 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> |
|
| |
|
| ---- | | ---- |
| <div class="accessibility-card">
| |
| '''EJEMPLO ACCESIBLE'''
| |
|
| |
|
| * Captura o fragmento de código o URL:
| | === 2.2. Ejemplo Accesible === |
| ''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)''
| | <div class="accessibility-collapsible-group"> |
|
| |
|
| 1. IMAGEN | | <!-- Imagen --> |
| <div style="margin-left:1em;"> | | <div class="mw-collapsible mw-collapsed"> |
| 📤 [[Especial:SubirArchivo|Haz clic aquí para subir tu imagen o PDF de evidencia]]
| | <h4>1. Imagen</h4> |
| Una vez subida, copia el nombre del archivo.
| | <div class="mw-collapsible-content"> |
| En el nombre de cada fichero se ha de incluir:
| | {{#if: {{{acc_barrera_evidencia_img|}}} | |
| * Curso de creación: '''2025_26_'''
| | <div><b>📷 Evidencia de imagen:</b><br>[[File:{{{acc_barrera_evidencia_img}}}|600px]]</div> |
| * Universidad: '''UdL'''
| | | <div><i>No se ha subido ninguna imagen.</i></div> }} |
| * Identificador del subcriterio: '''1.1.1-A'''
| | </div> |
| * Accesible o no accesible: '''ACC'''
| | </div> |
| ** '''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í:
| | <!-- Código --> |
| | <div class="mw-collapsible mw-collapsed"> |
| | <h4>2. Código HTML</h4> |
| | <div class="mw-collapsible-content"> |
| | {{#if: {{{acc_barrera_evidencia_html|}}} | |
| | <pre style="background:#eef; padding:0.7em; border:1px solid #ddd;">{{{acc_barrera_evidencia_html}}}</pre> |
| | | <div><i>No se ha proporcionado código.</i></div> }} |
| | </div> |
| </div> | | </div> |
|
| |
|
| Incluir URL de la imagen:
| | <!-- URL --> |
| {{{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}}}
| | <div class="mw-collapsible mw-collapsed"> |
| ''Ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg''
| | <h4>3. URL</h4> |
| | | <div class="mw-collapsible-content"> |
| 2. CÓDIGO HTML
| | {{#if: {{{acc_barrera_evidencia_url|}}} | |
| | | <div><b>🔗 URL:</b> [{{{acc_barrera_evidencia_url}}} Ver página]</div> |
| Incluir código HTML:
| | | <div><i>No se ha indicado ninguna URL.</i></div> }} |
| {{{field|acc_barrera_evidencia_html|input type=textarea|rows=8|placeholder=Pega aquí un fragmento de código o URL si corresponde}}} | | </div> |
| | | </div> |
| 3. URL DE WEB DONDE SUCEDE EL PROBLEMA
| |
| {{{field|acc_barrera_evidencia_url|input type=textarea|rows=2|placeholder=Ejemplo: www.unawebconlabarrera.com}}} | |
| | |
| {{{field|acc_evidencia_img|input type=upload|allowed file types=png,jpg,jpeg,gif,svg,pdf|mandatory|size=60}}}
| |
| {{{field|acc_evidencia_code|input type=textarea}}}
| |
| '' rellena uno o los dos campos, según tengas imagen solo o código HTML ''
| |
|
| |
|
| | <b>🧠 Explicación de la solución aplicada:</b><br> |
| | {{{acc_barrera_explicacion|<i>No se ha incluido explicación.</i>}}} |
|
| |
|
| * Explicación breve de cómo se ha implementado para solucionar 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> |
|
| |
|
| ---- | | ---- |
|
| |
|
| | <!-- ===================================================== --> |
| | <!-- 3. APORTE PERSONAL --> |
| | <!-- ===================================================== --> |
| == 3. Aporte personal == | | == 3. Aporte personal == |
| ''' Proceso de creación:'''
| | <b>Proceso de creación:</b><br>{{{proceso|}}}<br> |
| {{{field|proceso|input type=textarea}}} | | <b>Herramientas usadas:</b><br>{{{herramientas|}}}<br> |
| '' Explica como generado los ejemplos
| | <b>Referencias complementarias:</b><br>{{{referencias|}}} |
| (Analiza brevemente tu metodología: investigación, creación propia, IA, etc.)''
| |
| | |
| | |
| | |
| ''' Herramientas usadas:'''
| |
| {{{field|herramientas|input type=textarea}}} | |
| '' (Indica herramientas de evaluación, editores, IA o validadores que usaste.)''
| |
| | |
| | |
| ''' Referencias complementarias:'''
| |
| {{{field|referencias|input type=textarea}}} | |
| ''(Incluye solo las que te hayan ayudado realmente a entender el criterio o crear el ejemplo.)''
| |
|
| |
|
| ---- | | ---- |
|
| |
|
| == Autoevaluación del aprendizaje == | | <!-- ===================================================== --> |
| | <!-- 4. AUTOEVALUACIÓN --> |
| | <!-- ===================================================== --> |
| | == 4. Autoevaluación == |
| | <table class="wikitable" style="width:100%; background:#fff;"> |
| | <tr><th>Pregunta</th><th>Valor</th></tr> |
| | <tr><td>Entendimiento</td><td>{{{eval_entendimiento|}}}</td></tr> |
| | <tr><td>Dificultad NOA</td><td>{{{eval_noa_dificultad|}}}</td></tr> |
| | <tr><td>Dificultad ACC</td><td>{{{eval_acc_dificultad|}}}</td></tr> |
| | <tr><td>Seguridad</td><td>{{{eval_seguridad|}}}</td></tr> |
| | <tr><td>Utilidad</td><td>{{{eval_utilidad|}}}</td></tr> |
| | <tr><td>Aplicación</td><td>{{{eval_aplicacion|}}}</td></tr> |
| | <tr><td>Explicación</td><td>{{{eval_explicacion|}}}</td></tr> |
| | <tr><td>Observaciones</td><td>{{{eval_observaciones|}}}</td></tr> |
| | </table> |
|
| |
|
| <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> | | </div> |
| | </includeonly> |
|
| |
|
| * ¿Qué fácil te resultó entender el criterio?
| | <noinclude> |
| {{{field|eval_entendimiento|input type=dropdown|values=1,2,3,4,5|default=}}}
| | Plantilla para mostrar los datos del formulario [[Formulario:Actividad_WCAG]]. |
| <div class="pf-nota"> 1 = No entendí casi nada | 5 = Lo comprendí con claridad</div> | | Incluye secciones desplegables para las evidencias de ejemplo (imagen, código, URL), la explicación, el aporte personal y la autoevaluación. |
| | | </noinclude> |
| * ¿Qué difícil fue crear el ejemplo no accesible (NOA)?
| |
| {{{field|eval_noa_dificultad|input type=dropdown|values=1,2,3,4,5|default=}}}
| |
| <div class="pf-nota"> 1 = Muy fácil | 5 = Muy difícil</div>
| |
| | |
| * ¿Qué difícil fue crear el ejemplo accesible (ACC)?
| |
| {{{field|eval_acc_dificultad|input type=dropdown|values=1,2,3,4,5|default=}}}
| |
| <div class="pf-nota"> 1 = Muy fácil | 5 = Muy difícil</div>
| |
| | |
| * ¿Qué seguridad tienes de que tus ejemplos son correctos?
| |
| {{{field|eval_seguridad|input type=dropdown|values=1,2,3,4,5|default=}}}
| |
| <div class="pf-nota"> 1 = No estoy seguro | 5 = Totalmente seguro</div>
| |
| | |
| * ¿En qué medida comprendes para qué sirve este criterio en la práctica?
| |
| {{{field|eval_utilidad|input type=dropdown|values=1,2,3,4,5|default=}}}
| |
| <div class="pf-nota"> 1 = No entiendo su utilidad | 5 = Puedo explicar claramente por qué es útil</div>
| |
| | |
| * ¿Podrías aplicar este criterio en otro proyecto o web distinta?
| |
| {{{field|eval_aplicacion|input type=dropdown|values=1,2,3,4,5|default=}}}
| |
| <div class="pf-nota"> 1 = No sabría hacerlo | 5 = Podría hacerlo sin ayuda</div>
| |
| | |
| * Si tuvieras que explicarle este criterio a un compañero que no sabe de accesibilidad, ¿cómo lo harías en una frase?
| |
| {{{field|eval_explicacion|input type=textarea|rows=2|placeholder=Redacta una frase que resuma el criterio con tus propias palabras.}}}
| |
| | |
| * Observaciones personales:
| |
| {{{field|eval_observaciones|input type=textarea|rows=3|placeholder=Qué aprendiste, qué te costó más, qué te sorprendió o te resultó útil.}}}
| |
| | |
| | |
| | |
| {{{end template}}}
| |
