{"id":3142,"date":"2022-11-15T10:09:22","date_gmt":"2022-11-15T10:09:22","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/4-common-web-accessibility-issues-to-know\/"},"modified":"2026-03-09T13:10:53","modified_gmt":"2026-03-09T13:10:53","slug":"problema-de-relacion-de-contraste","status":"publish","type":"post","link":"https:\/\/thecodest.co\/es\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 problemas comunes de accesibilidad web que debe conocer"},"content":{"rendered":"

Problema con la relaci\u00f3n de contraste<\/h2>\n\n\n\n

El problema de accesibilidad m\u00e1s com\u00fan que he visto a lo largo de los a\u00f1os es la problema de contraste y accesibilidad del color<\/b>una mala relaci\u00f3n de contraste dificultar\u00e1 la visualizaci\u00f3n del contenido de su p\u00e1gina y eso ser\u00e1 muy perjudicial para sus usuarios, incluidos aquellos con discapacidades visuales. <\/p>\n\n\n\n

El contraste es una medida de la diferencia en la \"luminancia\" o brillo percibido entre dos colores, por ejemplo, es la diferencia entre el color de fondo y el color de primer plano del contenido de su p\u00e1gina. Echemos un vistazo a esta barra de navegaci\u00f3n.<\/p>\n\n\n\n

\"barra<em>de<em>navegaci\u00f3n<\/em>con<em>t\u00edtulos<\/em>verdes\"<\/figure>\n\n\n\n

Digamos que a tu cliente le gusta mucho ese color verdoso y lo encuentra impresionante, pero aqu\u00ed hay un problema con el contraste. Tenemos un #FFFFFF<\/code> fondo con un #83A94C<\/code> color del texto, lo que da como resultado una relaci\u00f3n de contraste de 2,71:1, muy por debajo del m\u00ednimo 4.5:1<\/strong> necesario. Para detectar este problema tenemos m\u00faltiples soluciones: <\/p>\n\n\n\n

    \n
  1. Utilice un comprobador de contrastes en l\u00ednea como el Verificador de contraste Webaim<\/a>que calcular\u00e1 la relaci\u00f3n de contraste y le dar\u00e1 un Pase<\/strong> o Falla<\/strong> grado.<\/li>\n\n\n\n
  2. Utiliza una de las muchas extensiones de comprobaci\u00f3n de contrastes de los navegadores, ej: WCAG Comprobaci\u00f3n del contraste de colores<\/a>.<\/li>\n\n\n\n
  3. Pruebe el comprobador de contraste integrado en el navegador. Para utilizarlo en Google Chrome, abra las herramientas de desarrollo, inspeccione el elemento en cuesti\u00f3n (por ejemplo, el enlace Inicio de nuestra barra de navegaci\u00f3n), vaya a la propiedad de color CSS y haga clic en el rect\u00e1ngulo de color para abrir el selector de color. El proceso es exactamente el mismo para Firefox, s\u00f3lo una peque\u00f1a diferencia en la relaci\u00f3n se muestra en la parte inferior izquierda del selector de color.<\/li>\n<\/ol>\n\n\n\n
    \"negro<em>fondo<\/em>con<em>azul<\/em>c\u00f3digo\"<\/figure>\n\n\n\n

    Para obtener m\u00e1s informaci\u00f3n sobre el contraste, consulte Art\u00edculo sobre el contraste y la accesibilidad de los colores<\/a>.<\/p>\n\n\n\n

    Problema con el texto del enlace<\/h2>\n\n\n\n

    Los enlaces son una parte importante del web<\/a> hoy en d\u00eda, por lo que hacerlos accesibles es muy importante. Un enlace debe tener sentido e informar al usuario de su contexto, por lo que un enlace poco informativo con texto como leer m\u00e1s, hacer clic aqu\u00ed, comprobar detalles no es muy \u00fatil, as\u00ed que en lugar de a\u00f1adir \"comprobar detalles\" para producto<\/a> detalles, por ejemplo, utilizar el nombre del producto como \"El casco mandaloriano\" es mejor y m\u00e1s informativo. Palabras como pulse aqu\u00ed<\/code> o m\u00e1s sobre<\/code> puede omitirse porque un enlace es clicable por defecto y algo como \"m\u00e1s sobre las noticias de hoy\" puede acortarse a \"noticias de hoy\". No hay ninguna regla o l\u00edmite especial sobre la longitud de los enlaces, el el enlace debe ser legible<\/b> y lo suficientemente largo como para dar una buena descripci\u00f3n de su prop\u00f3sito.<\/p>\n\n\n\n

    Las im\u00e1genes como enlaces son un patr\u00f3n muy utilizado, por lo que deben seguir las mismas reglas de las que hemos hablado anteriormente. El atributo alt de la imagen jugar\u00e1 el papel de texto del enlace y ser\u00e1 anunciado por los lectores de pantalla. Hay m\u00faltiples escenarios cuando se tratan im\u00e1genes como enlaces, si la imagen es el \u00fanico contenido del enlace, entonces debe tener un atributo alt, si el enlace tiene algo de texto e imagen en \u00e9l entonces podemos omitir el atributo alt, aqu\u00ed hay algunos ejemplos:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Notificaciones">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Consulta aqu\u00ed algunos enlaces para leer sobre la accesibilidad de los enlaces:Texto y apariencia de los enlaces<\/a>, Im\u00e1genes funcionales<\/a>.<\/p>\n\n\n\n
    Entrada de formulario sin etiqueta<\/h2>\n\n\n\n
    \"input<em>etiquetas<\/em>con<em>bot\u00f3n<\/em>azul\"<\/figure>\n\n\n\n
    Todos hemos visto estas entradas de formulario antes sin etiqueta y s\u00f3lo un marcador de posici\u00f3n para describir el prop\u00f3sito de la entrada. Una primera nota es que tan pronto como el usuario rellena todas las entradas y los marcadores de posici\u00f3n ya no est\u00e1n a la vista no tendremos ning\u00fan contexto visual sobre el prop\u00f3sito de las entradas, pero vamos a us<\/a> centrarse aqu\u00ed en la accesibilidad. <\/p>\n\n\n\n
    Asociar un etiqueta<\/code> a una entrada nos da dos grandes ventajas, un lector de pantalla leer\u00e1 la etiqueta cuando el usuario est\u00e9 enfocado en la entrada del formulario y cuando se pulse o toque una etiqueta el navegador pasa el foco a su entrada asociada. Una soluci\u00f3n f\u00e1cil para este tipo de situaci\u00f3n es simplemente a\u00f1adir etiquetas de la siguiente manera:<\/p>\n\n\n\n
        Nombre\n\n    \n  \n\n    Apellido\n\n    \n  \n\n    Correo electr\u00f3nico\n\n    \n  \n\n    Enviar\n  \n\n```<\/code><\/pre>\n\n\n\n
    Eso es todo, todas las entradas tienen sus etiquetas asociadas haci\u00e9ndolas accesibles a todo el mundo. Incluso podemos eliminar los marcadores de posici\u00f3n para evitar duplicar el prop\u00f3sito de la entrada, pero todos sabemos que los escenarios del mundo real no son tan f\u00e1ciles de tratar, acabas de recibir un dise\u00f1o que tiene estas entradas de formulario sin etiquetas y el cliente no quiere cambiar esa parte. La primera soluci\u00f3n que viene a la mente es aplicar un mostrar: ninguno;<\/code> o visibilidad: oculto;<\/code> a nuestras etiquetas, esto las ocultar\u00e1 pero siguen estando ah\u00ed \u00bfverdad? Estas propiedades ocultan los elementos no s\u00f3lo en la pantalla, sino tambi\u00e9n para los usuarios de lectores de pantalla, por lo que esto no va a resolver nuestro problema.<\/p>\n\n\n\n
    Podemos utilizar el patr\u00f3n de clip<\/strong> para solucionar esto. De esta forma, ocultaremos el contenido visualmente, pero proporcionaremos el contenido a los lectores de pantalla. Crearemos el siguiente CSS s\u00f3lo sr<\/code> y aplicarla a todas nuestras etiquetas:<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0 0);\n   clip-path: inset(50%);\n   altura: 1px;\n   overflow: oculto;\n   posici\u00f3n: absoluto;\n   espacio en blanco: nowrap;\n   anchura: 1px;\n }\n<\/code><\/code><\/pre>\n\n\n\n
    Esto ocultar\u00e1 nuestras etiquetas, las pondr\u00e1 a disposici\u00f3n de los lectores de pantalla y se ajustar\u00e1 a nuestro dise\u00f1o. El sitio :not(:foco):not(:activo)<\/code> evita que elementos enfocables como a<\/code>, bot\u00f3n<\/code>, entrada<\/code> de ocultarse al recibir el foco.<\/p>\n\n\n\n
    Sin indicador de enfoque<\/h2>\n\n\n\n
    Una vez hice esto en mi hoja de estilos CSS global:<\/p>\n\n\n\n
    * {\noutline: none; \/* horrible error *\/\n}<\/code><\/pre>\n\n\n\n
    Alrededor de 2020 me di cuenta de los bordes negros que aparecen en las entradas de formulario de Google Chrome cuando se enfoca o en los botones de la ficha en - que era muy raro, ya que no lo entend\u00eda en el momento, despu\u00e9s de algunas investigaciones que he encontrado que es debido a la propiedad CSS contorno por lo que la eliminaci\u00f3n resuelto que 'Problema' para m\u00ed.<\/p>\n\n\n\n
    En ese momento no ten\u00eda ni idea de cu\u00e1l era la forma correcta de hacerlo.  Despu\u00e9s de investigar un poco sobre los porqu\u00e9s y los c\u00f3mos de ese nuevo valor predeterminado, descubr\u00ed que el contorno es un indicador de enfoque del elemento y que si se elimina debe proporcionarse un estilo de enfoque obvio, b\u00e1sicamente lo que yo estaba haciendo se considera una mala pr\u00e1ctica. Puedes personalizar los indicadores de enfoque como mejor te parezca, pero eliminarlos completamente del sitio web es un gran problema de accesibilidad. Personalizar el estilo de enfoque de un elemento es bastante f\u00e1cil, por ejemplo:<\/p>\n\n\n\n
     a:focus {\n   contorno: 4px s\u00f3lido #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n
    Herramientas de accesibilidad<\/h2>\n\n\n\n
    Comprobar todos los temas de los que hemos hablado puede ser mucho trabajo, sobre todo sabiendo que hay muchas m\u00e1s cosas que cubrir sobre accesibilidad, as\u00ed que para ayudarnos con la accesibilidad tenemos 2 estupendas extensiones de navegador.<\/p>\n\n\n\n
    Herramienta de evaluaci\u00f3n WAVE<\/a> es un conjunto de herramientas de evaluaci\u00f3n que nos ayuda a hacer m\u00e1s accesibles nuestros contenidos web. Est\u00e1 disponible tanto en Google Chrome como en Firefox. <\/p>\n\n\n\n
    Vamos a probarlo en una peque\u00f1a p\u00e1gina web que contenga una barra de navegaci\u00f3n y una entrada a la que le falte una etiqueta y veremos lo que nos devuelve, despu\u00e9s de instalar la extensi\u00f3n, s\u00f3lo tenemos que hacer clic en el icono de la extensi\u00f3n para utilizarla.<\/p>\n\n\n\n
    \"ventana<\/figure>\n\n\n\n
    La pesta\u00f1a Resumen muestra 1 error (elemento de formulario al que le falta una etiqueta), 2 errores de contraste y 1 alerta (falta la estructura del encabezado), como puede ver el resultado es muy claro y detallado. La pesta\u00f1a Detalles mostrar\u00e1 una lista de todos los errores, alertas y caracter\u00edsticas. Tambi\u00e9n podemos interactuar directamente en la p\u00e1gina haciendo clic en esos rect\u00e1ngulos rojos para comprobar la descripci\u00f3n y el tipo de error.<\/p>\n\n\n\n
    Hacha DevTools<\/a> es un potente y preciso conjunto de herramientas de accesibilidad. Est\u00e1 disponible tanto en Google Chrome como en Firefox. Despu\u00e9s de instalar la extensi\u00f3n, tendremos que abrir el navegador dev tools e ir a la pesta\u00f1a axe DevTools y hacer clic en Escanear todas mis p\u00e1ginas.<\/p>\n\n\n\n
    \"DevTools<em>window<\/em>con<em>secciones<\/em>grises<\/em>negras\"<\/figure>\n\n\n\n
    Puede ver que Axe DevTools ha reportado los mismos problemas con la Herramienta de Evaluaci\u00f3n WAVE que son problemas de contraste, elemento de formulario al que le falta una etiqueta, y elemento de encabezado faltante, incluso nos dio algunas mejores pr\u00e1cticas a seguir.<\/p>\n\n\n\n
    Otra forma de comprobar la accesibilidad es utilizar un lector de pantalla y probar el sitio web con \u00e9l. Existen muchos lectores de pantalla, por nombrar s\u00f3lo algunos:<\/p>\n\n\n\n