Diferencia entre revisiones de «2526UPSA2.4.7-A-001»

De WCAG Wiki
Edición siguiente →
VisualWikitexto
202526UPSA20 (discusión | contribs.)
alumnos
25 ediciones
Página creada con «{{ActividadWCAG |id_criterio=2.4.7 - Foco visible (Nivel: AA) |id_subcriterio=2.4.7-A |id_universidad=UPSA |curso_academico=2025-26 |enlace=https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.7-A |noa_barrera_evidencia_img=2025 26 UPSA 2.4.7-A NOA.png |noa_barrera_evidencia_url=<a rel="nofollow" class="external free" href="https://www.gwentrpb.wales/home">https://www.gwentrpb.wales/home </a> |noa_barrera_evidencia_html=<nowiki> <style> .boton-malo:focus {…»
 
202526UPSA20 (discusión | contribs.)
alumnos
25 ediciones
Creación de ejemplos práctico (ACC y NOA) para el criterio 2-4-7-A Foco Visible -Nivel: AA - Javier Pozo (UPSA)
Línea 10: Línea 10:


   <style>
   <style>
  .boton-malo:focus { outline: none; }
    .enlace-invisible:focus {
      outline: none;
    }
   </style>
   </style>
  <button class="boton-malo">Enviar Formulario (Sin Foco)</button>


  <a href="https://www.gwentrpb.wales/home" class="enlace-invisible">Home</a>


</nowiki>
</nowiki>
|noa_barrera_explicacion=Mediante CSS se ha establecido outline: none o border: 0 en el estado :focus. Esto hace que, cuando se selecciona el elemento con el teclado (Tab), no haya ningún cambio visual (ni borde azul, ni brillo).
|noa_barrera_explicacion=Se ha detectado un incumplimiento de la pauta 2.4.7 Foco visible (Nivel A). Al realizar una navegación mediante teclado (tecla Tabulador), la barra de estado del navegador (esquina inferior izquierda) indica que el foco se encuentra sobre el enlace /area-plan, sin embargo, no aparece ningún indicador visual, borde o resalte en la interfaz. Esto se debe a que el CSS de la página elimina la propiedad outline de los elementos interactivos, impidiendo que usuarios con discapacidad motriz o baja visión sepan dónde están situados dentro de la página.
|noa_barrera_usuarios=Afectados: personas con discapacidad motora (parálisis, Parkinson) que navegan solo con teclado o conmutadores, y personas con baja visión.
|noa_barrera_usuarios=Afectados: personas con discapacidad motora (parálisis, Parkinson) que navegan solo con teclado o conmutadores, y personas con baja visión.


Línea 25: Línea 27:


   <style>
   <style>
  .boton-bueno:focus { outline: 3px solid #0056b3; outline-offset: 2px; }
    .enlace-visible:focus {
      outline: 4px solid #000000;
      outline-offset: 2px;
    }
   </style>
   </style>
   <button class="boton-bueno">Enviar Formulario (Con Foco)</button>
 
   <a href="https://www.bbc.com/" class="enlace-visible">BBC Home</a>


</nowiki>
</nowiki>
|acc_barrera_explicacion=Se define explícitamente un estilo para la pseudoclase :focus que utiliza outline sólido y de color contrastado. Esto garantiza que el elemento activo destaque visualmente sobre el resto.
|acc_barrera_explicacion=El código es accesible porque define un indicador de foco claro y de alto contraste mediante la propiedad outline. El uso de outline-offset asegura que el "cuadrado" de selección sea fácilmente distinguible del texto del enlace, facilitando la navegación por teclado siguiendo el estándar de la BBC.
}}
}}

Revisión del 16:18 18 dic 2025

Edición de la página como formulario

1. Información básica

Id del criterio: 2.4.7 - Foco visible (Nivel: AA)
Título del subcriterio: 2.4.7-A
Universidad participante: UPSA
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.7-A


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://www.gwentrpb.wales/home">https://www.gwentrpb.wales/home </a> <a rel="nofollow" class="external free" href="https://www.gwentrpb.wales/home">https://www.gwentrpb.wales/home </a>]

2.1.2. Código HTML:

<style> .enlace-invisible:focus { outline: none; } </style> <a href="https://www.gwentrpb.wales/home" class="enlace-invisible">Home</a>



Explicación del problema detectado:
Se ha detectado un incumplimiento de la pauta 2.4.7 Foco visible (Nivel A). Al realizar una navegación mediante teclado (tecla Tabulador), la barra de estado del navegador (esquina inferior izquierda) indica que el foco se encuentra sobre el enlace /area-plan, sin embargo, no aparece ningún indicador visual, borde o resalte en la interfaz. Esto se debe a que el CSS de la página elimina la propiedad outline de los elementos interactivos, impidiendo que usuarios con discapacidad motriz o baja visión sepan dónde están situados dentro de la página.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afectados: personas con discapacidad motora (parálisis, Parkinson) que navegan solo con teclado o conmutadores, y personas con baja visión.

Barrera: el usuario "se pierde". No sabe qué botón va a pulsar si presiona Enter, haciendo la web inoperable.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://www.bbc.com">https://www.bbc.com </a> <a rel="nofollow" class="external free" href="https://www.bbc.com">https://www.bbc.com </a>]


2.2.2 Código HTML:

<style> .enlace-visible:focus { outline: 4px solid #000000; outline-offset: 2px; } </style> <a href="https://www.bbc.com/" class="enlace-visible">BBC Home</a>



Explicación de la solución aplicada:
El código es accesible porque define un indicador de foco claro y de alto contraste mediante la propiedad outline. El uso de outline-offset asegura que el "cuadrado" de selección sea fácilmente distinguible del texto del enlace, facilitando la navegación por teclado siguiendo el estándar de la BBC.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA2.4.7-A-001&oldid=3961»