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

De WCAG Wiki
← Edición anterior
VisualWikitexto
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)
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 muestra una edición intermedia 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">
     .enlace-invisible:focus {
  <ul class="navbar-nav ms-auto">
       outline: none;
     <li class="current">
     }
      <a href="/home">Hogar</a>
   </style>
    </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>


   <a href="https://www.gwentrpb.wales/home" class="enlace-invisible">Home</a>
<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>
Línea 26: Línea 51:
|acc_barrera_evidencia_html=<nowiki>
|acc_barrera_evidencia_html=<nowiki>


   <style>
   <nav id="main-navigation-container" class="sc-5eaafc6a-9 gyXyxA">
     .enlace-visible:focus {
  <ul class="sc-5eaafc6a-2 gWirVa">
      outline: 4px solid #000000;
   
      outline-offset: 2px;
    <li class="sc-5eaafc6a-3 iDvJxr">
     }
      <div data-testid="anchor-inner-wrapper">
   </style>
        <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;
  }


   <a href="https://www.bbc.com/" class="enlace-visible">BBC Home</a>
   .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=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.
|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»