examinator
Informe
- URI: http://www.007museum.com/
- Título: (Sin título)
- Elementos: 8085
- Tamaño: 110 KB (112602 bytes)
- Fecha/Hora: 05/05/2025 - 20:04 GMT
Resultados generales de 35 pruebas:
Excelente: 2 pruebas
10 Se usan 12 elementos de encabezado
G141: Organizar una página usando encabezados
El propósito de esta técnica es garantizar que las secciones tengan encabezados que los identifiquen. En HTML, esto se hace usando los elementos de encabezado HTML (h1, h2, h3, h4, h5, h6). Estos permiten a las aplicaciones de usuario identificar automáticamente los encabezados de sección. Para facilitar la navegación y la comprensión de la estructura general del documento, los autores deben utilizar los encabezados correctamente anidados (por ejemplo, h1 seguido de h2, h2 seguido de h2 o h3, etc.).
Los encabezados indican la organización del contenido, facilitan su navegación y proporcionan un "mapa" mental que ayuda a comprender el contenido. Otros elementos pueden complementar los encabezados para mejorar la presentación (por ejemplo, líneas horizontales o cajas), pero la presentación visual no basta para identificar las secciones de un documento.
Esta técnica se relaciona con:
- Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
- Criterio de conformidad 2.4.10 (Nivel AAA) Comprender 2.4.10
- Encabezados (h1~h6): 12
10 Todas las medidas en las CSS están expresadas con valores relativos
C24: Usar porcentajes en los valores de la CSS para definir el tamaño de los contenedores
El propósito de esta técnica es que los usuarios puedan aumentar el tamaño del texto sin tener que desplazarse horizontalmente para leer una línea de texto. Para utilizar esta técnica, el autor debe especificar el ancho de los contenedores de texto usando valores de porcentaje.
Verifique que sea posible ampliar en un 200% los textos sin requerir el uso de las barras de desplazamiento horizontal para leer cualquier línea de texto.
Cuando se brinda la posibilidad de ajustar el texto se está permitiendo que el texto sea ampliado sin necesidad de efectuar desplazamientos laterales para ver todo el contenido. Cuando esto es posible se dice que el texto fluye y permite, a las personas con baja visión y con problemas cognitivos, incrementar el tamaño del texto sin sentirse desorientadas. Ejemplo:
div#container {width: 80%}Esta técnica se relaciona con:
- Criterio de conformidad 1.4.8 (Nivel AAA) Comprender 1.4.8
- Medidas expresadas con valores relativos en CSS: 15
Muy bien: 1 prueba
8 Hay 16 imágenes con el atributo alt nulo
C9: Usar CSS para incluir imágenes decorativas
El propósito de esta técnica es proporcionar un mecanismo que permita agregar imágenes puramente decorativas e imágenes usadas para dar formato visual al contenido sin necesidad de marcas adicionales en el contenido. Esto hace posible que las ayudas técnicas ignoren el contenido no textual. Cuando las imágenes son decorativas es aceptable el uso del atributo alt nulo pero las imágenes que no transmiten información ni proporcionan alguna funcionalidad deberían incluirse mediante CSS. Ejemplos:
body {background: #ffe url("/images/home-bg.jpg") repeat;}
ul {list-style-image: url("bullet.gif")}
p:before {content: url("smiley.gif")}Esta técnica se relaciona con:
- Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
- Imágenes: 616
- Imágenes con alt nulo: 16
Regular: 4 pruebas
4 En 2 casos se usan medidas absolutas para indicar el ancho de un elemento
G146: Usar diseño líquido
El propósito de esta técnica es poder presentar el contenido sin presentar barras de desplazamiento horizontal mediante el uso de técnicas de diseño que se adaptan al espacio horizontal disponible. Los diseños líquidos definen zonas de diseño que cambian de tamaño con el texto. Aunque así la disposición exacta varía, la relación de los elementos y el orden de lectura sigue siendo el mismo. Esta es una manera eficaz de crear diseños que se presentan bien en diferentes dispositivos y a los usuarios con diferentes preferencias de tamaño de fuente.
Cuando se brinda la posibilidad de ajustar el texto, se está permitiendo que el texto sea ampliado sin necesidad de efectuar desplazamientos laterales para ver todo el contenido. Cuando esto es posible se dice que el texto fluye y permite, a las personas con baja visión y con problemas cognitivos, incrementar el tamaño del texto sin sentirse desorientadas.
Esta técnica se relaciona con:
- Criterio de conformidad 1.4.4 (Nivel AA) Comprender 1.4.4
- Criterio de conformidad 1.4.8 (Nivel AAA) Comprender 1.4.8
- Elementos con un ancho definido en unidades absolutas: 2
5 Hay 31 imágenes con más de 100 caracteres en el atributo alt
H45: Usar longdesc
El propósito de esta técnica es proporcionar la información en un archivo identificado por el atributo longdesc cuando una alternativa textual breve no transmite adecuadamente la función o la información proporcionada por la imagen. El atributo longdesc es un URI cuyo destino contiene una descripción extensa de la imagen. Los autores pueden proporcionar la descripción mediante la inclusión del texto en un recurso separado o en la misma página que contiene la imagen.
Esta técnica se relaciona con:
- Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
- Imágenes: 616
- Imágenes con atributo alt muy extenso: 31
5 En 2 casos, el atributo title de un enlace sólo repite el texto del enlace
H33: Complementar el texto de un enlace con el atributo title
El propósito de esta técnica es mostrar cómo usar un atributo title en un enlace para proporcionar texto adicional que describa el enlace. El atributo title se usa para proporcionar información adicional para aclarar o describir con más detalle el propósito de un enlace. Si la información complementaria proporcionada por el atributo title es algo que el usuario debe saber antes de seguir el enlace, como una advertencia, entonces debe ser proporcionada en el texto del enlace y no en el atributo title.
Esta técnica se relaciona con:
- Criterio de conformidad 2.4.4 (Nivel A) Comprender 2.4.4
- Criterio de conformidad 2.4.9 (Nivel AAA) Comprender 2.4.9
- Enlaces: 1211
- Enlaces con igual texto en el contenido y el atributo title: 2
5 Hay 222 casos de reglas CSS que no especifican los colores de primer plano y fondo a la vez
F24: Fallo de los Criterios de Conformidad 1.4.3, 1.4.6 y 1.4.8 debido a que se han especificado colores del frente sin especificar colores de fondo o viceversa
Los usuarios con pérdida de visión o capacidad cognitiva, con problemas de lenguaje y de aprendizaje suelen preferir combinaciones específicas de colores de primer plano y de fondo que les facilitan ver la página. Muchas aplicaciones permiten a los usuarios elegir los colores de primer plano o de fondo que les gustaría ver cuando los colores no han sido especificados por el autor.
A menos que un autor especifique los colores de primer plano y de fondo no podrá garantizar que el usuario tendrá un contraste que cumpla con los requisitos de contraste. Si el autor especifica un color del texto en primer plano, entonces debería especificar también un color de fondo que tenga suficiente contraste con el primer plano y viceversa.
No es estrictamente necesario que ambos colores se encuentren definidos en la misma regla CSS, aunque es una práctica recomendable. Dado que las propiedades de color CSS se heredan de los elementos padres, es suficiente con que ambos colores se definan ya sea directamente o a través de la herencia. Ejemplo:
div {color: white; background-color: black;}Este fallo se relaciona con:
- Criterio de conformidad 1.4.3 (Nivel AA) Comprender 1.4.3
- Criterio de conformidad 1.4.6 (Nivel AAA) Comprender 1.4.6
- Criterio de conformidad 1.4.8 (Nivel AAA) Comprender 1.4.8
- Reglas CSS que no especifican colores de fondo y primer plano a la vez: 222
Mal: 12 pruebas
2 Hay 4 casos de enlaces adyacentes que enlazan con el mismo recurso
H2: Combinar la imagen y el texto adyacentes cuando enlazan con el mismo recurso
El propósito de esta técnica es evitar la duplicación innecesaria que se produce cuando el documento contiene versiones icónicas y de texto de un mismo enlace. A menudo, el texto y el icono se presentan en enlaces individuales para crear una separación visual entre sí. Visualmente parecen ser el mismo enlace pero son experimentados por muchas personas como dos enlaces idénticos y puede resultar confuso. Para evitar esta situación, algunos autores omiten el texto alternativo de la imagen, pero esto es un error debido a que el texto alternativo no sirve al mismo propósito que el enlace gráfico. El método preferido para hacer frente a esto es poner el texto y la imagen en un solo enlace, y proporcionar un texto alternativo nulo a la imagen para eliminar la duplicación de texto. Ejemplo:
<a href="productos.html"><img src="icono.gif" alt="" /> Página de productos</a>Esta técnica se relaciona con:
- Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
- Criterio de conformidad 2.4.4 (Nivel A) Comprender 2.4.4
- Criterio de conformidad 2.4.9 (Nivel AAA) Comprender 2.4.9
- Enlaces: 1211
- Enlaces adyacentes que conducen a un mismo recurso: 4
2 En 2 casos se usa texto justificado
F88: Fallo del Criterio de Conformidad 1.4.8 debido al uso de texto con justificado absoluto (alineado tanto al margen izquierdo como al derecho)
Las personas con ciertas dificultades cognitivas tienen serios problemas para leer los bloques de texto que están justificados (alineados tanto al margen izquierdo como al derecho). En los textos justificados, los espacios desiguales entre las palabras pueden provocar "calles" de espacios blancos que recorren varias líneas dificultando la lectura. En los textos justificados también se pueden producir acercamiento exagerados entre algunas palabras, de modo que resulta difícil ubicar la separación entre ellas.
Este fallo se relaciona con:
- Criterio de conformidad 1.4.8 (Nivel AAA) Comprender 1.4.8
- Texto justificado con atributos (X)HTML: 2
3 En 2 casos los encabezados no están anidados correctamente
G141: Organizar una página usando encabezados
El propósito de esta técnica es garantizar que las secciones tengan encabezados que los identifiquen. En HTML, esto se hace usando los elementos de encabezado HTML (h1, h2, h3, h4, h5, h6). Estos permiten a las aplicaciones de usuario identificar automáticamente los encabezados de sección. Para facilitar la navegación y la comprensión de la estructura general del documento, los autores deben utilizar los encabezados correctamente anidados (por ejemplo, h1 seguido de h2, h2 seguido de h2 o h3, etc.).
Los encabezados indican la organización del contenido, facilitan su navegación y proporcionan un "mapa" mental que ayuda a comprender el contenido. Otros elementos pueden complementar los encabezados para mejorar la presentación (por ejemplo, líneas horizontales o cajas), pero la presentación visual no basta para identificar las secciones de un documento.
Esta técnica se relaciona con:
- Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
- Criterio de conformidad 2.4.10 (Nivel AAA) Comprender 2.4.10
- Encabezados (h1~h6): 12
- Encabezados con niveles jerárquicos incorrectos: 2
3 No existen enlaces para saltar bloques de contenido
G123: Agregar un enlace al principio de un bloque de contenido repetitivo que dirija al final del bloque
El propósito de esta técnica es proporcionar un mecanismo para eludir un bloque de contenido saltando al final del bloque. El primer enlace en el bloque o el enlace directamente anterior al bloque mueve el foco del teclado al contenido inmediatamente posterior al bloque. Cuando hay varios bloques para eludir, el usuario puede saltar de uno a otro usando estos enlaces. Los enlaces deben ser visibles siempre o cuando reciben el foco del teclado.
Esta técnica se relaciona con:
- Criterio de conformidad 2.4.1 (Nivel A) Comprender 2.4.1
- Enlaces: 1211
- Enlaces para saltar bloques de contenido: 0
3 El primer enlace de la página no lleva al contenido principal de la página
G1: Agregar un enlace al principio de cada página que lleve directamente al área de contenido principal
El propósito de esta técnica es proporcionar un mecanismo para evitar bloques de material que se repiten en múltiples páginas saltando directamente al contenido principal de la página. El primer elemento interactivo de la página debe ser un enlace que, al activarlo, mueve el foco más allá de cualquier otro contenido hasta el contenido principal. Es preferible que los enlaces sean visibles en todo momento, sin embargo, el criterio también se cumple si los enlaces se hacen visibles cuando reciben el foco del teclado.
Esta técnica se relaciona con:
- Criterio de conformidad 2.4.1 (Nivel A) Comprender 2.4.1
- Enlaces: 1211
- Enlace para saltar al contenido principal: 0
3 Falta la definición del tipo de documento
H88: Usar HTML de acuerdo con la especificación
Existe distintos tipos de documentos HTML y todos ellos se encuentran definidos en sus respectivas especificaciones, pero también están definidos en un lenguaje comprensible por las máquinas que especifica la estructura correcta, elementos y atributos de un tipo de HTML. Tal definición se denomina "Document Type Definition" (Definición del Tipo de Documento) que se suele llamar, para abreviar, "Doctype" o "DTD".
Las herramientas que procesan los documentos HTML como, por ejemplo, los navegadores web, necesitan conocer la DTD que utilizan los documentos. Por este motivo es que cada documento (X)HTML necesita, al principio, una declaración DTD con la cual la interpretación (y, como resultado, la representación) del documento será no sólo más rápida sino también consistente y libre de cualquier error que causaría un documento sin doctype.
Esta técnica se relaciona con:
- Criterio de conformidad 4.1.1 (Nivel A) Comprender 4.1.1
- Criterio de conformidad 4.1.2 (Nivel A) Comprender 4.1.2
- Definición de tipo de documento: 0
3 Se usan 5 elementos para controlar la presentación visual
G115: Usar elementos semánticos para marcar la estructura
El propósito de esta técnica es marcar la estructura del contenido de la página utilizando los elementos semánticos adecuados. En otras palabras, los elementos se utilizan de acuerdo con su significado, no por la forma en que aparecen visualmente. La intención es asegurar que la información y las relaciones implícitas en el formato visual se mantengan cuando cambie el formato de la presentación.
Aunque los elementos de presentación implican una estructura visual -los usuarios pueden determinar encabezados, párrafos, listas, etc., a partir de los formatos convencionales-, no codifican la estructura de forma inequívoca para que las ayudas técnicas puedan interactuar con la página de forma efectiva. Con el uso de los elementos semánticos adecuados se asegura que la estructura esté a disposición de las aplicaciones de usuario.
Esta técnica se relaciona con:
- Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
- Elementos para controlar el estilo visual de la presentación: 5
3 Hay 1 imagen con una alternativa textual que no sirve como alternativa
F30: Fallo de los Criterios de Conformidad 1.1.1 y 1.2.1 debido al uso de alternativas textuales que no sirven como alternativas (Ej., nombres de archivos o texto de relleno)
Este fallo describe una condición de error para todas las técnicas que implican alternativas textuales. Ejemplos de texto que no sirve como alternativa son las palabras de relleno como "espacio", "imagen" o "foto" que se colocan en el lugar de la alternativa textual en las imágenes. Si el texto de la alternativa textual no se puede usar en lugar del contenido no textual se produce este fallo porque, de hecho, no es una alternativa para el contenido no textual.
Este fallo se relaciona con:
- Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
- Criterio de conformidad 1.2.1 (Nivel A) Comprender 1.2.1
- Imágenes: 616
- Imágenes con alternativas textuales incorrectas: 1
3 Hay 170 valores repetidos en los atributos id
F77: Fallo del Criterio de Conformidad 4.1.1 debido a la duplicación de valores de tipo ID
Los valores duplicados de tipo id pueden ser problemáticos para las aplicaciones de usuario que dependen de este atributo para comunicar con precisión las relaciones entre las distintas partes del contenido a los usuarios. Por ejemplo, un lector de pantalla puede utilizar los valores id para identificar la cabecera aplicable a una celda de datos dentro de una tabla, o un control de entrada al que se aplica una etiqueta determinada. Si estos valores no son únicos, el lector de pantalla no será capaz de determinar mediante programación qué cabeceras están asociados con la celda de datos o qué control está asociado a la etiqueta o el nombre.
Este fallo se relaciona con:
- Criterio de conformidad 4.1.1 (Nivel A) Comprender 4.1.1
- Elementos con atributo id: 1061
- Atributos id con valores duplicados: 170
3 Falta el código de idioma en el atributo lang
H57: Usar atributos de idioma en el elemento html
El propósito de esta técnica es identificar el idioma predeterminado de un documento proporcionando el atributlo lang y/o xml:lang en el elemento html. Identificar el idioma del documento es importante para que las ayudas técnicas y las aplicaciones de usuario convencionales puedan procesar los textos con mayor fidelidad. Los lectores de pantalla pueden cargar las reglas de pronunciación adecuadas y los usuarios con discapacidad tendrán más posibilidades de entender el contenido. HTML sólo ofrece el uso del atributo lang mientras que XHTML 1.0 (como medida de transición) permite lang y xml:lang (ambos deben tener un mismo valor), y XHTML 1.1 sólo permite xml:lang.
Esta técnica se relaciona con:
- Criterio de conformidad 3.1.1 (Nivel A) Comprender 3.1.1
- Idioma principal de la página ausente: lang
3 Hay 8 tablas que contienen una o más tablas anidadas
F49: Fallo del Criterio de Conformidad 1.3.2 debido al uso de una tabla en HTML para disponer el contenido y que al leerse línea a línea éste deja de tener sentido
Aunque las WCAG 2 no prohíben el uso de tablas para maquetar, se recomiendan los diseños basados en CSS con el fin de conservar el significado semántico de los elementos de una tabla HTML y para adaptarse a la práctica de separar la presentación del contenido. Si se utiliza una tabla para el diseño es importante que el contenido tenga sentido al ser leído de modo lineal.
Las tablas presentan el contenido en dos dimensiones visuales, horizontal y vertical. Sin embargo, los lectores de pantalla presentan este contenido de dos dimensiones en el orden lineal del contenido, a partir de la primera celda de la primera fila y terminando con la última celda de la última fila.
Si la celda de una tabla contiene otra tabla anidada, el lector de pantalla leerá toda la tabla anidada antes de leer la siguiente celda en la tabla original. Como resultado, la secuencia significativa transmitida a través de la presentación visual puede no ser perceptible cuando el contenido es leído por un lector de pantalla.
Este fallo se relaciona con:
- Criterio de conformidad 1.3.2 (Nivel A) Comprender 1.3.2
- Tablas: 102
- Tablas anidadas: 8
3 La página no tiene ningún elemento title
H25: Proporcionar un título usando el elemento title
Todos los documentos HTML y XHTML, incluyendo aquellos en los marcos individuales de un frameset, tienen un elemento title en la sección head que define, en una frase simple, el propósito del documento. Esto ayuda a los usuarios a orientarse dentro del sitio de forma rápida y sin tener que buscar información en el cuerpo de la página. Tenga en cuenta que el elemento title (obligatorio), que sólo aparece una vez en un documento, es diferente del atributo title, que se puede aplicar a casi todos los elemento HTML y XHTML.
Esta técnica se relaciona con:
- Criterio de conformidad 2.4.2 (Nivel A) Comprender 2.4.2
- Elemento title ausente: 0
Muy mal: 16 pruebas
1 Hay 1 elemento embed sin contenido alternativo
H46: Usar noembed con embed
El propósito de esta técnica es proporcionar un contenido alternativo para el elemento embed en un elemento noembed, que sólo será procesado si no existe soporte para embed. Si bien se puede colocar en cualquier lugar de la página, es una buena idea incluir noembed como un elemento hijo de embed de manera que sea claro para las ayudas técnicas que una alternativa textual está asociada con ese elemento.
Esta técnica se relaciona con:
- Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
- Criterio de conformidad 1.2.8 (Nivel AAA) Comprender 1.2.8
- Elementos embed: 1
- Elementos embed sin noembed: 1
1 Hay 102 tablas sin celdas de encabezados
H51: Usar tablas para presentar información tabular
El propósito de esta técnica es presentar información tabular de una manera que preserve las relaciones dentro de la información, incluso cuando los usuarios no puedan ver la tabla o el formato de presentación es cambiado. La información se considera tabular cuando existen relaciones lógicas entre texto, números, imágenes u otros datos en dos dimensiones (vertical y horizontal). Estas relaciones son representadas en columnas y filas, y las columnas y las filas deben ser reconocibles a fin de que las relaciones lógicas puedan ser percibidas. Utilizando el elemento table con los elementos hijos tr, th y td hace que estas relaciones resulten perceptibles.
Técnicas tales como el uso de tabuladores para crear columnas o usar el elemento pre son puramente visuales y las relaciones lógicas implícitas visualmente se pierden si el usuario no puede ver la tabla o se cambia la presentación visual. Aunque las WCAG no prohíben el uso de tablas para maquetar, se recomienda usar diseños basados en CSS para conservar el sentido semántica del elemento table definido en HTML y XHTML, y para cumplir con la práctica de separar la presentación del contenido.
Esta técnica se relaciona con:
- Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
- Tablas sin celdas de encabezados (por ejemplo, elementos th): 102
1 Hay 2 atributos longdesc con valores incorrectos
H45: Usar longdesc
El propósito de esta técnica es proporcionar la información en un archivo identificado por el atributo longdesc cuando una alternativa textual breve no transmite adecuadamente la función o la información proporcionada por la imagen. El atributo longdesc es un URI cuyo destino contiene una descripción extensa de la imagen. Los autores pueden proporcionar la descripción mediante la inclusión del texto en un recurso separado o en la misma página que contiene la imagen.
Esta técnica se relaciona con:
- Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
- Atributos longdesc en img: 2
- Valores incorrectos en el atributo longdesc: 2
1 Hay 1 elemento object sin alternativa textual
H27: Proporcionar alternativas textuales y no textuales para object
El propósito de esta técnica es proporcionar un texto alternativo para el contenido representado en el elemento object. El cuerpo del elemento object se puede utilizar para proporcionar una alternativa textual completa para el objeto o puede presentar un contenido no textual adicional al texto alternativo.
Esta técnica se relaciona con:
- Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
- Elementos object: 1
- Elementos object sin contenido alternativo: 1
1 Hay 175 enlaces cuyo contenido es sólo una imagen sin alternativa textual
F89: Fallo de los Criterios de Conformidad 2.4.4, 2.4.9 y 4.1.2 debido al uso de alt nulo en una imagen que constituye el único contenido de un enlace
Este error ocurre cuando el único contenido de un enlace es un contenido no textual, como una imagen, y dicho enlace no puede ser identificado porque el elemento no textual no tiene un texto alternativo. La intención es ayudar a los usuarios a entender el propósito de cada enlace para que puedan decidir si lo quieren seguir. Cuando el propósito de cada enlace puede ser identificado por su texto, estos pueden ser entendidos cuando están fuera de contexto, como cuando la aplicación de usuario proporciona una lista con todos los enlaces de la página.
Este fallo se relaciona con:
- Criterio de conformidad 2.4.4 (Nivel A) Comprender 2.4.4
- Criterio de conformidad 2.4.9 (Nivel AAA) Comprender 2.4.9
- Criterio de conformidad 4.1.2 (Nivel A) Comprender 4.1.2
- Enlaces: 1211
- Enlaces cuyo único contenido es una imagen con alt nulo: 175
1 Hay 360 imágenes sin alternativas textuales
F65: Fallo del Criterio de Conformidad 1.1.1 debido a la omisión del atributo alt en elementos img, elementos area, y elementos input de tipo "image"
Este fallo describe una condición de error en las alternativas textuales. Si no hay una fuente de texto para proporcionar una alternativa para los elementos img, area e input type="image", las ayudas técnicas no son capaces de identificar estos elementos o transmitir sus propósitos al usuario. El atributo alt sigue siendo la manera preferida para proporcionar un texto alternativo.
El propósito es lograr que la información transmitida por medio de contenido no textual sea accesible mediante el uso de las alternativas textuales. Los textos alternativos son el principal medio para hacer accesible la información ya que se pueden interpretar a través de cualquier modalidad sensorial (visual, auditiva o táctil) que mejor satisfaga las necesidades del usuario.
Este fallo se relaciona con:
- Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
- Imágenes: 616
- Imágenes sin alt: 360
1 Se usan 3513 atributos para controlar la presentación visual
G140: Separar la información y la estructura en la presentación para permitir presentaciones diferentes
El propósito de esta técnica es facilitar la interacción de las ayudas técnicas con el contenido separando el contenido de su presentación. La codificación estructural es la indicación de elementos tales como títulos, párrafos, listas, tablas, etc. Por el contrario, la codificación de la presentación es la indicación de los efectos de formato como tipo de letra, color, tamaño, posición, bordes, etc.
Aunque las características de presentación implican visualmente una estructura -los usuarios pueden determinar los encabezados, párrafos, listas, etc., a partir de las convenciones de formato utilizadas- estas características no codifican la estructura de forma inequívoca para que las ayudas técnicas puedan interactuar con la página de forma eficaz. Proporcionar las capas de estructura, funcionalidad y presentación separadas permite que la semántica implícita en el formato pueda ser determinada por software a través de la capa de estructura.
Esta técnica se relaciona con:
- Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
- Criterio de conformidad 1.4.5 (Nivel AA) Comprender 1.4.5
- Criterio de conformidad 1.4.9 (Nivel AAA) Comprender 1.4.9
- Atributos para controlar el estilo visual de la presentación: 3513
1 Hay 49 elementos iframe sin title
H64: Usar el atributo title de los elementos frame e iframe
El propósito de esta técnica es demostrar el uso del atributo title en los elementos frame o iframe para describir el contenido de cada marco. Esto proporciona una etiqueta para el marco de modo que los usuarios pueden determinar a qué marco entrar y explorar en detalle. Tenga en cuenta que el atributo title etiqueta los marcos y es diferente del elemento title que etiqueta los documentos. Ambos deben ser usados siempre, ya que el primero facilita la navegación entre los marcos y el segundo aclara la ubicación actual del usuario.
Esta técnica se relaciona con:
- Criterio de conformidad 2.4.1 (Nivel A) Comprender 2.4.1
- Criterio de conformidad 4.1.2 (Nivel A) Comprender 4.1.2
- Marcos en línea (elemento iframe): 60
- Elementos iframe sin título: 49
1 En 25 casos no se utilizan manejadores de eventos redundantes
SCR20: Usar funciones tanto para teclado como para otros dispositivos específicos
El propósito de esta técnica es ilustrar el uso combinado de eventos específicos del teclado y específicos del ratón con el código que tiene un script asociado con un evento. El uso de los dos eventos en forma conjunta garantiza que el contenido puede ser operado por una amplia gama de dispositivos. Por ejemplo, un script puede realizar la misma acción, cuando se detecta una pulsación de tecla, que cuando se hace clic en un botón del ratón. Se debe proporcionar un controlador de eventos del teclado que ejecuta la misma función que el manejador de eventos del ratón. Estas son algunas correspondencias:
- mousedown - keydown
- mouseup - keyup
- mouseover - focus
- mouseout - blur
Esta técnica se relaciona con:
- Criterio de conformidad 2.1.1 (Nivel A) Comprender 2.1.1
- Criterio de conformidad 2.1.3 (Nivel AAA) Comprender 2.1.3
- Manejadores de eventos: 35
- Manejadores de eventos no redundantes: 25
1 Hay 7 secuencias de 3 ó más de elementos
que pueden estar representando los elementos de una lista
H48: Usar ol, ul y dl para las listas
El propósito de esta técnica es crear listas de elementos relacionados utilizando los elementos de lista apropiados. El elemento ol se usa cuando la lista está ordenada y el elemento ul se utiliza cuando la lista no está ordenada. Las listas de definiciones (dl) se usan para agrupar términos con sus definiciones.
Cuando se utiliza un marcado que da formato visual a los elementos como una lista pero no indica la relación entre los elementos, los usuarios pueden tener dificultades para navegar la información. Un ejemplo de este formato visual es incluir asteriscos al principio de cada elemento de la lista y usar <br> para separar los elementos.
Esta técnica se relaciona con:
- Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
- Secuencia de elementos br: 7
1 Hay 371 enlaces con el mismo texto pero diferentes destinos
F84: Fallo del Criterio de Conformidad 2.4.9 debido al uso de un enlace no específico tal como "pinche aquí" o "más" sin un mecanismo para cambiar el texto del enlace a un texto específico
Este fallo describe una condición común en enlaces como "haga clic aquí" o "más", donde es necesario tener el texto que lo rodea para entender su propósito. Muchas personas ciegas que usan lectores de pantalla llaman a un cuadro de diálogo que tiene una lista de los enlaces de la página para decidir dónde van a ir. Pero si muchos de los enlaces de esa lista simplemente dicen "haga clic aquí" o "más" no estarán en condiciones de utilizar esta característica en su lector de pantalla, que es una estrategia de navegación muy importante. Los enlaces con iguales destinos deben tener las mismas descripciones y aquellos con distintos propósitos y destinos deben tener diferentes descripciones.
Este fallo se relaciona con:
- Criterio de conformidad 2.4.9 (Nivel AAA) Comprender 2.4.9
- Enlaces: 1211
- Enlaces con el mismo texto pero diferentes destinos: 371
1 En 371 casos se especifican valores absolutos para el tamaño de las fuentes
C12: Usar porcentajes para definir el tamaño de las fuentes
El propósito de esta técnica es especificar el tamaño de fuente de texto proporcionalmente, de forma que las aplicaciones de usuario puedan escalar el contenido con eficacia. El aumento del tamaño del contenido es, en primer término, una responsabilidad de las aplicaciones de usuario pero la responsabilidad del autor es crear contenido web que no le impida a las aplicaciones de usuario escalar efectivamente el texto.
La intención es asegurar que el texto procesado visualmente, incluyendo los controles basados en texto, puedan ser aumentados de tamaño para que las personas con problemas visuales puedan leerlo sin necesidad de usar ayudas técnicas. Ejemplos:
strong {font-size: 120%}
strong {font-size: 1.2em}Esta técnica se relaciona con:
- Criterio de conformidad 1.4.4 (Nivel AA) Comprender 1.4.4
- Tamaños de letra definidos con CSS: 430
- Tamaños de letra definidos con unidades absolutas: 371
1 En 143 casos se usan medidas absolutas en atributos HTML
G146: Usar diseño líquido
El propósito de esta técnica es poder presentar el contenido sin presentar barras de desplazamiento horizontal mediante el uso de técnicas de diseño que se adaptan al espacio horizontal disponible. Los diseños líquidos definen zonas de diseño que cambian de tamaño con el texto. Aunque así la disposición exacta varía, la relación de los elementos y el orden de lectura sigue siendo el mismo. Esta es una manera eficaz de crear diseños que se presentan bien en diferentes dispositivos y a los usuarios con diferentes preferencias de tamaño de fuente.
Cuando se brinda la posibilidad de ajustar el texto, se está permitiendo que el texto sea ampliado sin necesidad de efectuar desplazamientos laterales para ver todo el contenido. Cuando esto es posible se dice que el texto fluye y permite, a las personas con baja visión y con problemas cognitivos, incrementar el tamaño del texto sin sentirse desorientadas.
Esta técnica se relaciona con:
- Criterio de conformidad 1.4.4 (Nivel AA) Comprender 1.4.4
- Medidas expresadas con valores absolutos en (X)HTML: 143
1 En 23 casos se asocian eventos a elementos no interactivos
F59: Fallo del Criterio de Conformidad 4.1.2 debido al uso de scripts para convertir un div o span en un control de interfaz de usuario en HTML
Este fallo demuestra cómo el uso de los elementos HTML genéricos para crear controles de interfaz de usuario pueden hacer que los controles resulten inaccesibles para las ayudas técnicas. Muchos elementos HTML tienen roles bien definidos, como los enlaces, los botones, campos de texto, etc. Los elementos genéricos, como div o span no tienen roles predefinidos. Cuando se utilizan estos elementos genéricos para crear controles de interfaz de usuario las ayudas técnicas pueden no tener la información necesaria para describir e interactuar con el control.
Cuando se usan los controles estándares de las tecnologías accesibles, es sencillo para las ayudas técnicas poder reunir información acerca de, activar (o establecer) y actualizar el estado de los controles de la interfaz de usuario presentes en el contenido. Si se crean controles personalizados o se programan elementos para la interfaz (en el código o mediante scripts) que tienen un papel y/o función distintos a lo habitual, entonces se deben tomar medidas adicionales para garantizar que los controles proporcionan la información necesaria a las ayudas técnicas.
Este fallo se relaciona con:
- Criterio de conformidad 4.1.2 (Nivel A) Comprender 4.1.2
- Manejadores de eventos: 35
- Eventos asociados con elementos no interactivos: 23
1 Se usan 2312 elementos o atributos HTML para controlar la presentación del texto
C22: Usar CSS para controlar la presentación visual del texto
El propósito de esta técnica es demostrar cómo se pueden utilizar las CSS para controlar la presentación visual del texto. Esto permitirá a los usuarios modificar, a través de la aplicación de usuario, las características visuales del texto para satisfacer sus necesidades.
Las CSS benefician la accesibilidad principalmente por la separación de la estructura del documento de su presentación. Las hojas de estilo fueron diseñadas para permitir un control preciso -por fuera del sistema de marcas- del espaciado entre caracteres, alineación del texto, la posición del objeto en la página, las características de la fuente, etc. Al separar el estilo del sistema de marcas, los autores pueden simplificar y limpiar el marcado en su contenido, logrando al mismo tiempo que sea más accesible. Ejemplos:
code {font-family:"Courier New", Courier, monospace}
.right {text-align: right;}
strong.largersize {font-size: 1.5em;}
.highlight {font-weight:bold; color:#990000;}Esta técnica se relaciona con:
- Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
- Criterio de conformidad 1.4.4 (Nivel AA) Comprender 1.4.4
- Criterio de conformidad 1.4.5 (Nivel AA) Comprender 1.4.5
- Criterio de conformidad 1.4.9 (Nivel AAA) Comprender 1.4.9
- Elementos y atributos HTML para controlar la presentación del texto: 2312
1 Hay 2 formularios sin botones de envío
H32: Proporcionar botones de envío
El propósito de esta técnica es proporcionar un mecanismo que permita a los usuarios solicitar explícitamente cambios de contexto. El uso previsto de un botón de envío (input type="submit", input type="image" o button type="submit") es generar una petición HTTP que envía los datos introducidos en un formulario, por lo que es un control apropiado para provocar un cambio de contexto y es una práctica que no crea confusión entre los usuarios.
Esta técnica se relaciona con:
- Criterio de conformidad 3.2.2 (Nivel A) Comprender 3.2.2
- Formularios: 2
- Formularios sin botón de envío: 2
Tablero: 35 pruebas. Score 2.6
| # | Situación | N | P | N*P |
|---|---|---|---|---|
| 1 | Hay 1 elemento embed sin contenido alternativo | 1 | 3.6 | 3.6 |
| 2 | Hay 102 tablas sin celdas de encabezados | 1 | 3.6 | 3.6 |
| 3 | Hay 2 atributos longdesc con valores incorrectos | 1 | 3.4 | 3.4 |
| 4 | Hay 1 elemento object sin alternativa textual | 1 | 3.2 | 3.2 |
| 5 | Hay 175 enlaces cuyo contenido es sólo una imagen sin alternativa textual | 1 | 3 | 3 |
| 6 | Hay 360 imágenes sin alternativas textuales | 1 | 3 | 3 |
| 7 | Se usan 3513 atributos para controlar la presentación visual | 1 | 2.88 | 2.9 |
| 8 | Hay 49 elementos iframe sin title | 1 | 2.8 | 2.8 |
| 9 | En 25 casos no se utilizan manejadores de eventos redundantes | 1 | 2.6 | 2.6 |
| 10 | Hay 7 secuencias de 3 ó más de elementos que pueden estar representando los elementos de una lista |
1 | 2.38 | 2.4 |
| 11 | Hay 371 enlaces con el mismo texto pero diferentes destinos | 1 | 2.2 | 2.2 |
| 12 | En 371 casos se especifican valores absolutos para el tamaño de las fuentes | 1 | 2 | 2 |
| 13 | En 143 casos se usan medidas absolutas en atributos HTML | 1 | 1.98 | 2 |
| 14 | En 23 casos se asocian eventos a elementos no interactivos | 1 | 1.76 | 1.8 |
| 15 | Se usan 2312 elementos o atributos HTML para controlar la presentación del texto | 1 | 1.2 | 1.2 |
| 16 | Hay 2 formularios sin botones de envío | 1 | 0.72 | 0.7 |
| 17 | Hay 4 casos de enlaces adyacentes que enlazan con el mismo recurso | 2 | 4 | 8 |
| 18 | En 2 casos se usa texto justificado | 2 | 2.4 | 4.8 |
| 19 | En 2 casos los encabezados no están anidados correctamente | 3 | 3.8 | 11.4 |
| 20 | No existen enlaces para saltar bloques de contenido | 3 | 2.88 | 8.6 |
| 21 | El primer enlace de la página no lleva al contenido principal de la página | 3 | 2.88 | 8.6 |
| 22 | Falta la definición del tipo de documento | 3 | 2.2 | 6.6 |
| 23 | Se usan 5 elementos para controlar la presentación visual | 3 | 2.2 | 6.6 |
| 24 | Hay 1 imagen con una alternativa textual que no sirve como alternativa | 3 | 2 | 6 |
| 25 | Hay 170 valores repetidos en los atributos id | 3 | 2 | 6 |
| 26 | Falta el código de idioma en el atributo lang | 3 | 2 | 6 |
| 27 | Hay 8 tablas que contienen una o más tablas anidadas | 3 | 1.98 | 5.9 |
| 28 | La página no tiene ningún elemento title | 3 | 1.8 | 5.4 |
| 29 | En 2 casos se usan medidas absolutas para indicar el ancho de un elemento | 4 | 2.2 | 8.8 |
| 30 | Hay 31 imágenes con más de 100 caracteres en el atributo alt | 5 | 3.06 | 15.3 |
| 31 | En 2 casos, el atributo title de un enlace sólo repite el texto del enlace | 5 | 2.4 | 12 |
| 32 | Hay 222 casos de reglas CSS que no especifican los colores de primer plano y fondo a la vez | 5 | 1.08 | 5.4 |
| 33 | Hay 16 imágenes con el atributo alt nulo | 8 | 0.8 | 6.4 |
| 34 | Se usan 12 elementos de encabezado | 10 | 3.42 | 34.2 |
| 35 | Todas las medidas en las CSS están expresadas con valores relativos | 10 | 1.6 | 16 |
| 2.429 | 6.354 | |||
Score ponderado = round( 6.354 / 2.429 ) = 2.6
Resultados por personas
- Limitación total para ver: Score 2.6 (29 pruebas)
- Limitación grave para ver: Score 2.7 (33 pruebas)
- Limitación de los miembros superiores: Score 2.3 (22 pruebas)
- Limitación para comprender: Score 2.4 (23 pruebas)
- Limitaciones derivadas de la edad: Score 3.0 (27 pruebas)
Recursos relacionados que también deben evaluarse
- Iframe
- https://www.sverigesradio.se/embed/publication/8893681
- https://www.youtube.com/embed/cLeB-AVgwrg?si=j9P-DhcXNqFBZurQ
- https://www.youtube.com/embed/CvWOe5XcMxE?si=0SwwT-1HLsNTP-C_&start=8
- https://www.youtube.com/embed/AgambhRVvQ0?si=eVdoQ9whwsurwEmP
- https://www.youtube.com/embed/IxfRk4MyPrg
- https://www.youtube.com/embed/fHz1qhpntd4
- https://www.google.com/maps/d/embed?mid=1oiBRyaiGjIXsUgiTmHXAuG0w3WM
- https://www.youtube.com/embed/vUBaU-J1Ncs
- https://www.youtube.com/embed/dY8yK6x9yAg
- https://www.youtube.com/embed/opFo8x2SGeM
- https://www.youtube.com/embed/c5yRyDo3PGc
- https://player.vimeo.com/video/495032334
- https://player.vimeo.com/video/495037487
- https://www.youtube.com/embed/gMmlDU6Kikc
- https://www.youtube.com/embed/nb2p_a1tA4Y
- https://www.youtube.com/embed/3xU5-sZN960
- https://www.youtube.com/embed/DvT5a_ZoCVI
- https://www.youtube.com/embed/yPNjEKIOW34
- https://www.youtube.com/embed/mTAU3QEuBzA
- https://www.youtube.com/embed/dY8yK6x9yAg
- https://www.youtube.com/embed/uaw0PoZbIFY
- https://www.youtube.com/embed/Y2xOXHOb6KY
- https://www.google.com/maps/d/embed?mid=1oiBRyaiGjIXsUgiTmHXAuG0w3WM
- https://www.youtube.com/embed/Hz-9WnsHsNY
- https://www.youtube.com/embed/Y2xOXHOb6KY
- https://www.youtube.com/embed/13aRfaeUrhY?start=10
- https://www.youtube.com/embed/nb2p_a1tA4Y
- https://www.youtube.com/embed/JVtn5GJECpQ
- https://www.youtube.com/embed/bSEmOQ95HIg
- https://www.youtube.com/embed/Kx3DBz5ryMg
- https://www.youtube.com/embed/TzndexYf8CQ
- https://www.youtube.com/embed/5cn5XXbfIl8
- https://www.youtube.com/embed/0afwNlLTyY4
- https://www.youtube.com/embed/FyoE6YYOjvY
- https://www.youtube.com/embed/RybhEZSSv2k
- https://www.youtube.com/embed/xoTotMsI8Kk
- https://www.youtube.com/embed/-AX6PbBaL-8
- http://www.youtube.com/embed/CVxBw5g6QOk
- https://www.youtube.com/embed/-AX6PbBaL-8
- https://www.youtube.com/embed/qFGMIpuRrqg
- https://www.youtube.com/embed/ss6SEvpj8Ws
- https://www.youtube.com/embed/B9mOrgLKx-w
- https://www.youtube.com/embed/29b_zj68BjE
- https://www.youtube.com/embed/e2Cl5vus5ns
- https://www.youtube.com/embed/dcUZ6oEPFX8
- https://www.youtube.com/embed/ss6SEvpj8Ws
- https://www.youtube.com/embed/x2Q4KeT5kZA
- https://www.youtube.com/embed/0afwNlLTyY4
- https://www.youtube.com/embed/AE4QSdfxBZU
- http://www.youtube.com/embed/EOk_FeLIXQY
- https://www.youtube.com/embed/OIsiKfp4njc
- https://www.youtube.com/embed/jawivRvXULU
- https://www.youtube.com/embed/wjffwh5JYeE
- https://www.youtube.com/embed/1KhRsrKkrv0
- https://www.youtube.com/embed/dRIr3a69Mcs
- https://www.youtube.com/embed/Ss4XmsLc2A0
- https://www.youtube.com/embed/Krp45d7p6mk
- https://www.youtube.com/embed/V25a9Kam1jw
- https://www.youtube.com/embed/y63d6d71VVw
- https://www.youtube.com/embed/YAd2sLbjTlU