Contenido

Informe

5.6
Los resultados de la validación (X)HTML no están incluidos. Código

Resultados generales de 20 pruebas:

Excelente: 7 pruebas

10 Hay 2 elementos link para navegación

H59: Usar el elemento link y herramientas de navegación

El propósito de esta técnica es describir cómo el elemento link puede proporcionar metadatos sobre la posición de una página HTML dentro de un conjunto de páginas web o puede ayudar a localizar el contenido en un conjunto de páginas. El valor de los atributos rel indica qué tipo de relación se está describiendo y el atributo href proporciona un vínculo al documento que tiene esa relación. Múltiples elementos link pueden proporcionar múltiples relaciones. Ejemplos:

<link rel="Contents" href="contenidos.html" title="Tabla de contenidos" />
<link rel="Index" href="index.html" title="Indice" />

WCAG 2.0: H59 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 2.4.5 (Nivel AA) Comprender 2.4.5
  2. Criterio de conformidad 2.4.8 (Nivel AAA) Comprender 2.4.8
  • Elementos link para navegación: 2 Examinar

10 Se usan 9 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.

WCAG 2.0: G141 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
  2. Criterio de conformidad 2.4.10 (Nivel AAA) Comprender 2.4.10
  • Encabezados (h1~h6): 9 Examinar

10 Todas las imágenes tienen una alternativa textual

H37: Usar atributos alt en los elementos img

Al usar el elemento img, especifique una breve alternativa textual con el atributo alt. El valor de este atributo se denomina "texto alternativo". Cuando una imagen contiene palabras que son importantes para la comprensión del contenido, el texto alternativo debe incluir esas palabras. Esto permitirá que el texto alternativo cumpla la misma función en la página que la imagen. Tenga en cuenta que no es necesario describir las características visuales de la imagen en sí, sino que se debe transmitir el mismo significado que la imagen.

WCAG 2.0: H37 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
  • Imágenes: 40 Examinar
  • Imágenes sin alt: 0

10 No se usan 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.

WCAG 2.0: G115 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
  • Elementos para controlar el estilo visual de la presentación: 0

10 Se identifica el idioma principal de la página con el código "es-es"

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.

WCAG 2.0: H57 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 3.1.1 (Nivel A) Comprender 3.1.1
  • Idioma principal de la página: es-es

10 La página tiene un 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.

WCAG 2.0: H25 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 2.4.2 (Nivel A) Comprender 2.4.2
  • Título de la página: Home

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%}

WCAG 2.0: C24 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.4.8 (Nivel AAA) Comprender 1.4.8
  • Medidas expresadas con valores relativos en CSS: 13 Examinar

Bien: 1 prueba

6 Hay 8 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")}

WCAG 2.0: C9 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
  • Imágenes: 40 Examinar
  • Imágenes con alt nulo: 8 Examinar

Regular: 4 pruebas

4 Falta el encabezado principal de la página

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.

WCAG 2.0: G141 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
  2. Criterio de conformidad 2.4.10 (Nivel AAA) Comprender 2.4.10
  • Encabezados (h1~h6): 9 Examinar
  • Encabezado principal de la página (<h1>): 0

4 En 9 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.

WCAG 2.0: H33 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 2.4.4 (Nivel A) Comprender 2.4.4
  2. Criterio de conformidad 2.4.9 (Nivel AAA) Comprender 2.4.9
  • Enlaces: 83 Examinar
  • Enlaces con igual texto en el contenido y el atributo title: 9 Examinar

5 Se usa 1 atributo 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.

WCAG 2.0: G140 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
  2. Criterio de conformidad 1.4.5 (Nivel AA) Comprender 1.4.5
  3. Criterio de conformidad 1.4.9 (Nivel AAA) Comprender 1.4.9
  • Atributos para controlar el estilo visual de la presentación: 1 Examinar

5 Hay 6 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;}

WCAG 2.0: F24 (en inglés)

Este fallo se relaciona con:

  1. Criterio de conformidad 1.4.3 (Nivel AA) Comprender 1.4.3
  2. Criterio de conformidad 1.4.6 (Nivel AAA) Comprender 1.4.6
  3. 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: 6 Examinar

Mal: 5 pruebas

2 Se usan 3 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;}

WCAG 2.0: C22 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
  2. Criterio de conformidad 1.4.4 (Nivel AA) Comprender 1.4.4
  3. Criterio de conformidad 1.4.5 (Nivel AA) Comprender 1.4.5
  4. Criterio de conformidad 1.4.9 (Nivel AAA) Comprender 1.4.9
  • Elementos y atributos HTML para controlar la presentación del texto: 3 Examinar

3 En 1 caso 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.

WCAG 2.0: G141 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
  2. Criterio de conformidad 2.4.10 (Nivel AAA) Comprender 2.4.10
  • Encabezados (h1~h6): 9 Examinar
  • Encabezados con niveles jerárquicos incorrectos: 1 Examinar

3 Hay 2 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.

WCAG 2.0: H51 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.3.1 (Nivel A) Comprender 1.3.1
  • Tablas sin celdas de encabezados (por ejemplo, elementos th): 2 Examinar

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.

WCAG 2.0: G123 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 2.4.1 (Nivel A) Comprender 2.4.1
  • Enlaces: 83 Examinar
  • 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.

WCAG 2.0: G1 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 2.4.1 (Nivel A) Comprender 2.4.1
  • Enlaces: 83 Examinar
  • Enlace para saltar al contenido principal: 0

Muy mal: 3 pruebas

1 En 10 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.

WCAG 2.0: G146 (en inglés)

Esta técnica se relaciona con:

  1. Criterio de conformidad 1.4.4 (Nivel AA) Comprender 1.4.4
  2. Criterio de conformidad 1.4.8 (Nivel AAA) Comprender 1.4.8
  • Elementos con un ancho definido en unidades absolutas: 10 Examinar

1 Hay 6 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.

WCAG 2.0: F84 (en inglés)

Este fallo se relaciona con:

  1. Criterio de conformidad 2.4.9 (Nivel AAA) Comprender 2.4.9
  • Enlaces: 83 Examinar
  • Enlaces con el mismo texto pero diferentes destinos: 6 Examinar

1 Hay 7 imágenes 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.

WCAG 2.0: F30 (en inglés)

Este fallo se relaciona con:

  1. Criterio de conformidad 1.1.1 (Nivel A) Comprender 1.1.1
  2. Criterio de conformidad 1.2.1 (Nivel A) Comprender 1.2.1
  • Imágenes: 40 Examinar
  • Imágenes con alternativas textuales incorrectas: 7 Examinar

Tablero: 20 pruebas. Score 5.6

Lista completa de pruebas
# Situación N P N*P
1 En 10 casos se usan medidas absolutas para indicar el ancho de un elemento 1 2.2 2.2
2 Hay 6 enlaces con el mismo texto pero diferentes destinos 1 2.2 2.2
3 Hay 7 imágenes con una alternativa textual que no sirve como alternativa 1 2 2
4 Se usan 3 elementos o atributos HTML para controlar la presentación del texto 2 1.2 2.4
5 En 1 caso los encabezados no están anidados correctamente 3 3.8 11.4
6 Hay 2 tablas sin celdas de encabezados 3 3.6 10.8
7 No existen enlaces para saltar bloques de contenido 3 2.88 8.6
8 El primer enlace de la página no lleva al contenido principal de la página 3 2.88 8.6
9 Falta el encabezado principal de la página 4 3.8 15.2
10 En 9 casos, el atributo title de un enlace sólo repite el texto del enlace 4 2.4 9.6
11 Se usa 1 atributo para controlar la presentación visual 5 2.88 14.4
12 Hay 6 casos de reglas CSS que no especifican los colores de primer plano y fondo a la vez 5 1.08 5.4
13 Hay 8 imágenes con el atributo alt nulo 6 0.8 4.8
14 Hay 2 elementos link para navegación 10 4.32 43.2
15 Se usan 9 elementos de encabezado 10 3.42 34.2
16 Todas las imágenes tienen una alternativa textual 10 2.7 27
17 No se usan elementos para controlar la presentación visual 10 2.2 22
18 Se identifica el idioma principal de la página con el código "es-es" 10 1.8 18
19 La página tiene un elemento title 10 1.62 16.2
20 Todas las medidas en las CSS están expresadas con valores relativos 10 1.6 16
  2.469 13.710

Score ponderado = round( 13.710 / 2.469 ) = 5.6

Resultados por personas

  • Limitación total para ver: Score 5.5 (17 pruebas)
  • Limitación grave para ver: Score 5.7 (19 pruebas)
  • Limitación de los miembros superiores: Score 5.3 (12 pruebas)
  • Limitación para comprender: Score 5.0 (12 pruebas)
  • Limitaciones derivadas de la edad: Score 6.1 (17 pruebas)