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

De WCAG Wiki
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)
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 9: Línea 9:
|noa_barrera_evidencia_html=<nowiki>
|noa_barrera_evidencia_html=<nowiki>


   <style>
   <nav class="navbar navbar-expand-lg navbar-light p-0">
  .boton-malo:focus { outline: none; }
  <ul class="navbar-nav ms-auto">
  </style>
    <li class="current">
  <button class="boton-malo">Enviar Formulario (Sin Foco)</button>
      <a href="/home">Hogar</a>
    </li>
    <li class="has-sub">
      <a class="unclickable" href="/our-work">Nuestro trabajo</a>
    </li>
    <li>
      <a href="/about-us">Sobre nosotros</a>
    </li>
  </ul>
</nav>


<style>
  .navbar-nav a {
    text-decoration: none;
    color: #ffffff; /* Blanco sobre el fondo verde de la imagen */
    padding: 10px 15px;
    font-family: Arial, sans-serif;
  }
  .navbar-nav a:focus {
    outline: none !important; /* Esto oculta el indicador del teclado */
    border: 0;
  }
  .navbar-nav a:focus {
    background-color: transparent;
    color: #ffffff;
  }
</style>


</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 24: Línea 51:
|acc_barrera_evidencia_html=<nowiki>
|acc_barrera_evidencia_html=<nowiki>


   <style>
   <nav id="main-navigation-container" class="sc-5eaafc6a-9 gyXyxA">
   .boton-bueno:focus { outline: 3px solid #0056b3; outline-offset: 2px; }
  <ul class="sc-5eaafc6a-2 gWirVa">
  </style>
   
  <button class="boton-bueno">Enviar Formulario (Con Foco)</button>
    <li class="sc-5eaafc6a-3 iDvJxr">
      <div data-testid="anchor-inner-wrapper">
        <a href="/" data-testid="mainNavigationLink-active" class="sc-5eaafc6a-4 iSvZky">
          Hogar
        </a>
      </div>
    </li>
 
    <li class="sc-5eaafc6a-3 fDvECh">
      <div data-testid="anchor-inner-wrapper">
        <a href="/news" data-testid="mainNavigationLink" class="sc-5eaafc6a-4 cyljGc">
          Noticias
        </a>
      </div>
    </li>
 
  </ul>
</nav>
 
<style>
  .sc-5eaafc6a-4 {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    padding: 12px 10px;
    display: inline-block;
    border-bottom: 4px solid transparent;
    transition: border-color 0.2s;
  }
 
   .iSvZky {
    border-bottom: 4px solid #0066cc !important;
  }
 
  .sc-5eaafc6a-4:focus {
    outline: 2px solid #000;  
    outline-offset: 2px;
    border-bottom: 4px solid #0066cc;
    background-color: rgba(0, 102, 204, 0.05);
  }
</style>


</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 actual - 17:58 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:

<nav class="navbar navbar-expand-lg navbar-light p-0"> <ul class="navbar-nav ms-auto"> <li class="current"> <a href="/home">Hogar</a> </li> <li class="has-sub"> <a class="unclickable" href="/our-work">Nuestro trabajo</a> </li> <li> <a href="/about-us">Sobre nosotros</a> </li> </ul> </nav> <style> .navbar-nav a { text-decoration: none; color: #ffffff; /* Blanco sobre el fondo verde de la imagen */ padding: 10px 15px; font-family: Arial, sans-serif; } .navbar-nav a:focus { outline: none !important; /* Esto oculta el indicador del teclado */ border: 0; } .navbar-nav a:focus { background-color: transparent; color: #ffffff; } </style>



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:

<nav id="main-navigation-container" class="sc-5eaafc6a-9 gyXyxA"> <ul class="sc-5eaafc6a-2 gWirVa"> <li class="sc-5eaafc6a-3 iDvJxr"> <div data-testid="anchor-inner-wrapper"> <a href="/" data-testid="mainNavigationLink-active" class="sc-5eaafc6a-4 iSvZky"> Hogar </a> </div> </li> <li class="sc-5eaafc6a-3 fDvECh"> <div data-testid="anchor-inner-wrapper"> <a href="/news" data-testid="mainNavigationLink" class="sc-5eaafc6a-4 cyljGc"> Noticias </a> </div> </li> </ul> </nav> <style> .sc-5eaafc6a-4 { text-decoration: none; color: #000; font-weight: bold; padding: 12px 10px; display: inline-block; border-bottom: 4px solid transparent; transition: border-color 0.2s; } .iSvZky { border-bottom: 4px solid #0066cc !important; } .sc-5eaafc6a-4:focus { outline: 2px solid #000; outline-offset: 2px; border-bottom: 4px solid #0066cc; background-color: rgba(0, 102, 204, 0.05); } </style>



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=3970»