|
|
| (No se muestran 36 ediciones intermedias del mismo usuario) |
| 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.
| | ''' Edición de la página como formulario''' |
| </noinclude>
| |
|
| |
|
| {{{for template|Actividad_WCAG}}} | | <div style="margin-top:1em;"> |
| | [{{FULLURL:{{FULLPAGENAME}}|action=formedit}} <span style="background:#007acc; color:#fff; padding:0.4em 0.8em; border-radius:4px;">Editar con formulario</span>] |
| | </div> |
|
| |
|
| == 1. Información básica ==
| |
| '''Id del criterio:'''
| |
| {{{field|id|mandatory|input type=dropdown|values=
| |
| 1.1.1 - Contenido no textual (Nivel: A),
| |
| 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:'''
| | <div style="margin-top:1em;"> |
| {{{field|titulo}}} | | [{{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> |
|
| |
|
| Por ejemplo:
| | <div style="margin-top:1em;"> |
| * ''1.1.1-A. Alternativa textual breve obligatoria o 1.1.1-B. Actualización de alternativas textuales ''.
| | [{{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> |
|
| |
|
| ''' Tener en cuenta el identificador del subcriterio y la letra que lo acompaña'''
| | <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 == |
| | <div><b>Id del criterio:</b> {{{id_criterio|}}}</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|}}} |
|
| |
|
| '''Enlace directo al subcriterio en la wiki:'''
| | [[Categoría: {{{id_subcriterio|}}}]] |
| {{{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 style="margin-left:1em;"> |
|
| |
|
| <div class="accessibility-card-error"> | | <b>1. Evidencia en imagen:</b><br> |
| '''EJEMPLO NO ACCESIBLE'''
| | {{#if: {{{noa_barrera_evidencia_img|}}} | |
| | | [[File:{{{noa_barrera_evidencia_img}}}|600px]] |
| * Captura o fragmento de código o URL:
| | | <i>No se ha subido ninguna imagen.</i> }} |
| ''Es posible incluir solo la imagen del problema, el codigo HTML o una URL. O las tres opciones (siempre que sean la misma)''
| |
|
| |
|
| 1. IMAGEN
| | <br><br> |
| <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: '''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í:
| | <b>2. Código HTML:</b> |
| | {{#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"> |
| | {{{noa_barrera_evidencia_html}}} |
| | </code> |
| </div> | | </div> |
| | | <div><i>No se ha proporcionado código.</i></div> }} |
|
| |
|
| Incluir URL de la imagen:
| |
| {{{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}}}
| |
| ''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
| | <br> |
| {{{field|noa_barrera_evidencia_url|input type=textarea|rows=2|placeholder=Ejemplo: www.unawebconlabarrera.com}}} | | TEXTO HTML |
| | <pre><nowiki>{{{noa_barrera_evidencia_html}}}</nowiki></pre> |
|
| |
|
| | <br> |
|
| |
|
| | <b>3. URL:</b> |
| | {{#if: {{{noa_barrera_evidencia_url|}}} | |
| | [{{{noa_barrera_evidencia_url}}} {{{noa_barrera_evidencia_url}}}] |
| | |<i>No se ha indicado ninguna URL.</i> }} |
|
| |
|
| | <br><br> |
|
| |
|
| * Explicación del problema detectado:
| | <b> Explicación del problema detectado:</b><br> |
| {{{field|noa_barrera_explicacion|input type=textarea}}} | | {{{noa_barrera_explicacion|<i>No se ha incluido explicación.</i>}}} |
| ''Explica que problema tiene el código o imagen que has incluido''
| |
|
| |
|
| | <b> Indica a que personas con discapacidad afecta y explicación de las barreras que causa</b><br> |
| | {{{noa_barrera_usuarios|<i>No se ha incluido explicación.</i>}}} |
|
| |
|
| '''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 style="margin-left:1em;"> |
| | |
| | <b>1. Evidencia de imagen:</b><br> |
| | {{#if: {{{acc_barrera_evidencia_img|}}} | |
| | [[File:{{{acc_barrera_evidencia_img}}}|600px]] |
| | | <i>No se ha subido ninguna imagen.</i> }} |
|
| |
|
| 1. IMAGEN
| | <br><br> |
| <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í:
| | <b>2. Código HTML:</b> |
| | {{#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"> |
| | {{{acc_barrera_evidencia_html}}} |
| | </code> |
| </div> | | </div> |
| | | <div><i>No se ha proporcionado código.</i></div> }} |
| | <br> |
| | TEXTO HTML |
| | <pre><nowiki>{{{acc_barrera_evidencia_html}}}</nowiki></pre> |
|
| |
|
| Incluir URL de la imagen:
| | <br> |
| {{{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}}}
| |
| ''Ejemplo: Archivo:2025_26_UdL_1.1.1-A_ACC.jpg''
| |
|
| |
|
| 2. CÓDIGO HTML
| |
|
| |
|
| Incluir código HTML:
| | <b>3. URL:</b> |
| {{{field|acc_barrera_evidencia_html|input type=textarea|rows=8|placeholder=Pega aquí un fragmento de código o URL si corresponde}}} | | {{#if: {{{acc_barrera_evidencia_url|}}} | |
| | [{{{acc_barrera_evidencia_url}}} {{{acc_barrera_evidencia_url}}}] |
| | |<i>No se ha indicado ninguna URL.</i> }} |
|
| |
|
| 3. URL DE WEB DONDE SUCEDE EL PROBLEMA
| | <br><br> |
| {{{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}}}
| | <b>Explicación de la solución aplicada:</b><br> |
| {{{field|acc_evidencia_code|input type=textarea}}} | | {{{acc_barrera_explicacion|<i>No se ha incluido explicación.</i>}}} |
| '' rellena uno o los dos campos, según tengas imagen solo o código HTML ''
| |
|
| |
|
|
| |
| * 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:'''
| | <div style="margin-left:1em;"> |
| {{{field|proceso|input type=textarea}}} | | <b>Proceso de creación:</b><br>{{{proceso|}}}<br><br> |
| '' Explica como generado los ejemplos
| | <b>Herramientas usadas:</b><br>{{{herramientas|}}}<br><br> |
| (Analiza brevemente tu metodología: investigación, creación propia, IA, etc.)''
| | <b>Referencias complementarias:</b><br>{{{referencias|}}} |
| | | </div> |
| | |
| | |
| ''' 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; margin-top:1em;"> |
| | <tr><th>Pregunta</th><th>Valor</th></tr> |
| | <tr><td> |
| | 4.1. ¿Fue fácil o difícil entender el criterio? <br> (1 = No entendí casi nada | 5 = Lo comprendí con claridad) |
| | </td><td>{{{eval_entendimiento|}}}</td></tr> |
| | <tr><td>4.2. ¿Fue fácil o difícil crear el ejemplo no accesible (NOA)? <br> (1 = Muy fácil | 5 = Muy difícil)</td><td>{{{eval_noa_dificultad|}}}</td></tr> |
| | <tr><td>4.3. ¿Fue fácil o difícil crear el ejemplo accesible (ACC)? <br> (1 = Muy fácil | 5 = Muy difícil) </td><td>{{{eval_acc_dificultad|}}}</td></tr> |
| | <tr><td>4.4. ¿Qué seguridad tienes de que tus ejemplos son correctos? <br> (1 = No estoy seguro | 5 = Totalmente seguro)</td><td>{{{eval_seguridad|}}}</td></tr> |
| | <tr><td>4.5. ¿En qué medida comprendes para qué sirve este criterio en la práctica? <br> (1 = No entiendo su utilidad | 5 = Puedo explicar claramente por qué es útil)</td><td>{{{eval_utilidad|}}}</td></tr> |
| | <tr><td>4.6. ¿Podrías aplicar este criterio en otro proyecto o web distinta? <br> (1 = No sabría hacerlo | 5 = Podría hacerlo sin ayuda)</td><td>{{{eval_aplicacion|}}}</td></tr> |
| | </table> |
|
| |
|
| <div class="pf-instruccion" style="background:#f8f9fa; border:1px solid #ccc; padding:0.6em; margin-bottom:1em;"> | | <div style="margin-left:1em;"> |
| Selecciona una puntuación del 1 al 5 en cada caso.<br>
| | <b>4.7. Explica este criterio a un compañero:</b><br>{{{eval_explicacion|}}} |
| <small>1 = nivel más bajo · 5 = nivel más alto</small> | | <br><br> |
| | <b>4.8. Observaciones personales:</b><br> |
| | {{{eval_observaciones|}}} |
| </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> | | Muestra directamente toda la información en pantalla (sin secciones colapsables). |
| | | Incluye evidencias, explicaciones, aporte personal y tabla de autoevaluación. |
| * ¿Qué difícil fue crear el ejemplo no accesible (NOA)?
| | </noinclude> |
| {{{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}}}
| |
