Auditoría Correos

	A	B	C	D	E	F	G
1	ID	Criterio WCAG	Descripción de error	Severidad	Captura	Solución	Notas
2	1	1.1.1	Existen atributos alt que no describen el propósito real de la imagen. Atributos alt de imágenes de logos, que también actúan como enlace, no describen adecuadamente su función. No proporcionan información significativa a los usuarios de lectores de pantalla.	Media		El alt de la imagen debe comunicar el propósito real. Actualizar el atributo alt con una descripción significativa, como: "Correos - Página de inicio".
3	2	1.1.1	Existen imágenes decorativas tienen un atributo alt con una descripción de la imagen. 2 imágenes decorativas con descripción en alt.	Media		Se debe vaciar el atributo alt (alt="") para garantizar que dichas imágenes se ignoren correctamente por los lectores de pantalla.
4	3	1.1.1	Existen imágenes sin atributo alt. Hay 2 imágenes decorativas que no tienen atributo alt.	Media		Las imágenes decorativas deben tener un atributo alt vacío. alt=""
5	4	1.1.1	Se identifica una imagen relevante con un alt vacío. El logo de "Empresario adherido" transmite información relevante que no está disponible para usuarios de lectores de pantalla.	Alta		Se debe proporcionar un texto alternativo adecuado y representativo.
6	5	1.3.1	La estructura de encabezados no es correcta. Debe haber un encabezado <h1> en cada página. Sólo debe existir un <h1> por página. Si existen encabezados de otros niveles como <h2>, <h3>...<h6>, no debe haber saltos de nivel.	Alta		a) Reestructurar los encabezados en orden jerárquico (h1 → h2 → h3...). b) Usar encabezados solo cuando marcan nuevas secciones temáticas. c) Asegurar que cada encabezado tenga un propósito semántico claro. Por ejemplo: h1: Localizar envíos, oficinas y códigos postales h2: Allá donde está Correos, AXA te protege h2: Sigue tu envío h3: Servicio especial de paquetería h3: Hasta 2kg h3: Hasta 5kg h3: Hasta 10kg h3: Hasta 20kg
7	6	1.3.1	Existe Contenido en <div> o <span>. Por ejemplo, los siguientes textos están en un <span> o <div> en lugar de un <p> o encabezado: a) "Aquí encontrarás todo lo que necesitas saber sobre el envío que estás esperando." (div). b) "Código postal Origen". (span)	Media		Se debe cambiar a <p> o a encabezado, según corresponda
8	7	1.3.1	Existen párrafos <p> vacíos. Se detectaron etiquetas <p> vacías que no contienen contenido alguno. Estas etiquetas introducen ruido semántico para tecnologías de asistencia.	Media		Se deben eliminar estos elementos o sustituirlos por espaciado controlado a través de estilos CSS. Por ejemplo: El espaciado visual se puede generar con margin, padding u otras propiedades de CSS.
9	8	1.3.1	Existe Contenido en <b> . El siguiente texto está en un <b>: "De todos y todas. Para todos y todas".	Media		Se debe reemplazar el texto incluido en <b> por <strong>.
10	9	1.3.1	Existen etiquetas <br>. Se generan espacios entre párrafos utilizando la etiqueta <br>.	Media		Se deben eliminar estos elementos o sustituirlos por espaciado controlado a través de estilos CSS. Por ejemplo: El espaciado visual se puede generar con margin, padding u otras propiedades de CSS.
11	10	1.3.1	Existen íconos dentro de etiquetas <i>. La etiqueta <i> que se utiliza en la página para incluir todos los íconos es de un uso inadecuado ya que semánticamente tiene otro uso (mostrar texto en cursiva, por ejemplo).	Baja		Se debe agregar un aria-hidden="true" en la etiqueta y volverla invisible. <i aria-hidden="true">
12	11	1.3.1	Existen enlaces seguidos que no forman una lista. Los siguientes son enlaces seguidos que no están en una lista <ul>: "Localiza oficinas, buzones y Citypaq" "Encuentra códigos postales" "Verificador de email"	Media		Deben estar en una lista <ul><li> por tratarse de enlaces seguidos. <ul> <li><a>Localiza oficinas, buzones y Citypaq</a></li> <li><a>Encuentra códigos postales</a></li> <li><a>Verificador de email</a></li> </ul>
13	12	1.3.1	Se detectaron listas que presentan encabezados visuales cercanos sin ninguna relación semántica establecida. Las listas del menú y del footer no están programáticamente asociadas a sus encabezados, lo que impide establecer una relación semántica adecuada entre ellos. Por ejemplo las siguientes: a) Para ti. b) Para tu empresa.	Media		Las listas deben tener una relación programática entre el texto que da contexto y la lista que sigue. a) Usar aria-labelledby. b) Usar un encabezado real (<h2>, <h3>).
14	13	1.3.1	Existen encabezados vacíos. Se detectaron elementos de encabezado (<h1>–<h6>) vacíos.	Media		Eliminar encabezados vacíos o asegurarse de que contengan información relevante.
15	14	1.3.1	Existe un grupo de botones de opción (radio buttons) sin etiqueta <fieldset>. Grupo de botones de opción (radio buttons) que no está contenido dentro de un elemento <fieldset> con una etiqueta <legend>: a) Paquetería. b) Camino de Santiago.	Media		Agrupar los botones de opción relacionados dentro de un <fieldset> y utilizar un <legend> que describa de forma clara el propósito del grupo.
16	15	1.3.1	Existen campos de formulario con un orden incorrecto. Al desactivar el CSS, los campos del formulario presentan un orden incorrecto, donde, por ejemplo, el input aparece antes que su etiqueta o encabezado. Esto rompe la relación semántica y lógica entre los elementos del formulario.	Media		Asegurar que la estructura HTML mantenga el orden lógico entre etiquetas e inputs, sin depender del CSS para establecer la relación.
17	16	1.3.1	Existen mensajes de error que no están asociados a los campos. Los mensajes de error, como "Introduce un código postal válido" (campo Origen), no están asociados a los campos que los generan.	Media		Se deben asociar a los campos input mediante el atributo aria-describedby y el id del campo input.
18	17	1.3.2	Existen elementos que no respetan el orden de lectura. El menú desplegable que aparece la página tienen un orden de lectura inadecuado al usar el lector de pantalla.	Media		Orden del DOM = Orden Visual. El orden contenido en el código debe ser igual al orden visual.
19	18	1.3.5	Existen campos del formulario que no tienen un propósito claro. El atributo autocomplete se usa con el valor "none", que no permite identificar el propósito del campo ni es un valor válido. Este error se observa en los campos de Código postal.	Media		Usar valores semánticos válidos en autocomplete según el propósito del campo, como "postal-code".
20	19	1.4.1	Existen elementos que transmiten información sólo por el color. Se encontraron los siguientes elementos que transmiten información solo por color: a) Código postal de destino: Desplegable. b) El foco en botones cambia a su estado de hover.	Media		Se debe dar una alternativa al color, un indicador adicional o el color entre estados debe ser de al menos 3:1 y también contrastar con el fondo.
21	20	1.4.3	Existen elementos que no cumplen el contraste de color necesario. Hay imágenes de texto donde el contraste entre el texto y el fondo no llega al mínimo ratio aceptado 4,5:1.	Alta		Se debe asegurar que la ratio de contraste cumple con lo siguiente: - Si el texto es pequeño (menos de 14pt = 19px en negrita; o menos de 18pt = 24px sin negrita) el ratio de contraste debe ser al menos de 4,5:1. - Si el texto es grande (el equivalente a 14pt = 19px en negrita o más; o 18pt = 24px sin negrita o más) el ratio de contraste debe ser al menos de 3:1. En el caso de fondos con degradado o con alguna imagen de fondo el texto debe cumplir el contraste en todos los puntos en donde este en contacto con el fondo.
22	21	1.4.11	Existen elementos que no cumplen con el contraste de 3:1 con los colores adyacentes. Información visual utilizada para indicar límites en la interfaz de usuario que no cumplen con el ratio mínimo 3:1: a) Botones. b) inputs.	Alta		El borde o límite visual de campos y botones de formulario en todos sus estados debe cumplir con el contraste mínimo 3:1.
23	22	1.4.11	Existen íconos con fondos transparentes. Se encuentran íconos con fondo transparente que, al deshabilitar el CSS (por ejemplo, estilos de fondo o color), ya no son visibles. Eso indica que el ícono depende visualmente del fondo proporcionado por el CSS para ser distinguible, y no tiene suficiente contraste por sí mismo. Ejemplos: a) Redes sociales. b) Buscar.	Alta		Los íconos deben tener un contraste mínimo de 3:1 con el fondo en todos los estados, independientemente de si el CSS está cargado o no. a) Usar versiones de íconos con colores integrados (no depender solo del color de fondo definido por CSS). b) Agregar un fondo sólido detrás del ícono con suficiente contraste. c) Usar íconos SVG con colores definidos internamente. d) Incluir una versión accesible del ícono que se muestre cuando CSS no está disponible.
24	23	1.4.11	El indicador de foco no tiene contraste suficiente, dificultando su identificación.	Alta		Mejorar el estilo del foco para que tenga un contraste mínimo 3:1 con el fondo y sea claramente visible.
25	24	1.4.11	Existen líneas divisorias no cumplen con el contraste mínimo requerido para elementos no textuales (3:1). En la versión mobile, las listas tienen líneas divisoras que no cumplen con el contraste. Por ejemplo: a) Desplegables del Footer. b) Desplegables del Menú.	Media		Aumentar el contraste de las líneas divisorias respecto al fondo.
26	25	2.1.1	Existen botones que no son accesibles por teclado. Los botones dentro de los inputs del formulario no son accesibles por teclado.	Alta		Todos los botones deben ser accesibles por teclado. Añadir role="button", tabindex="0".
27	26	2.1.2	Existe un foco queda atrapado dentro de un menú. El foco queda atrapado dentro del menú desplegable del país de destino, impidiendo la navegación por teclado hacia otros elementos de la página.	Alta		Revisar que no haya elementos con tabindex="-1" que impidan el foco Y que el tabindex en general facilite la navegación.
28	27	2.4.1	No existe un mecanismo para saltar bloques de contenido. a) No hay mecanismos para saltar bloques repetitivos (como enlaces de "Saltar al contenido"). b) No se usan landmarks ARIA (como role="main", role="navigation", etc.) o elementos HTML5 equivalentes (<main>, <nav>, <header>, etc.). c) Se repite el encabezado principal (<h1>) que orienta a los usuarios sobre el contenido de la página.	Alta		Se debe permitir a los usuarios saltar directamente al contenido principal y evitar repetir bloques comunes (como menús, encabezados, etc.) en cada página. Debe existir una de las 2: a) Agregar un enlace de "salta contenido". b) Usar landmarks ARIA o HTML5.
29	28	2.4.3	No existe un orden lógico del foco en algunos elementos de la página. 2 elementos que no siguen un orden lógico de navegación: a) Menú desplegable superior. b) En la versión mobile del Footer (forzando el foco porque no está visible).	Media	N/A	Se debe Asegurar orden lógico. a) Usar elementos nativos interactivos (<button>, <input>, <a>). b) Evitar modificar el orden con tabindex positivo (tabindex="2", 3, etc.). Usa tabindex="0" cuando necesites incluir elementos personalizados. c) Eliminar elementos no visibles del flujo de tabulación (tabindex="-1" o aria-hidden="true" si aplica).
30	29	2.4.4	Existen enlances repetidos. Los siguientes enlaces se considerean repetidos por no estar vinculados con el texto del encabezado: a) Más info. b) Iniciar sesión.	Media		Se deben vincular con el texto del encabezado mediante aria-lebelledby y el id del texto. Otra solución es utlizar aria-label o incluir un texto oculto.
31	30	2.4.5	El sitio no proporciona un mapa del sitio accesible. Se ofrece sólo una manera de localizar una página específica dentro del sitio (buscador), lo que limita la navegación para usuarios con discapacidad visual o cognitiva.	Media	N/A	Se deben aplicar 2 o más de las siguientes: a) Mapa Web. b) Buscador. c) Enlaces a páginas relacionadas. d) Tabla de contenidos.
32	31	2.4.6	Existen etiquetas repetidas. Existen dos campos de formulario con la misma etiqueta visible ("Código postal"), lo que no refleja claramente el propósito de cada uno.	Alta		Reescribir las etiquetas para que sean específicas (ej. "Código postal de origen" y "Código postal de destino").
33	32	2.4.7	Existen elementos que no tienen el foco visible. En los siguientes elementos no se puede visualizar el foco: a) Menú hamburgesa. b) Enlaces "Más Info". c) Botones de la sección "¿Qué tamaño y peso tiene tu paquete?" d) Iniciar sesión.	Alta		Todos los enlaces y elementos interactivos deben mostrar un foco visible al recibir el foco. a) Usar estilos personalizados, pero deben ser claramente visibles. b) Verificar que nada oculte visualmente el foco, como overflow: hidden, clip, transform, etc. c) Usar :focus-visible para aplicar estilos solo cuando el usuario navega con teclado.	Los enlaces de "Iniciar Sesión" no solo estan repetidos (2.4.4), además, el ícono tiene el foco no visible.
34	33	2.4.7	Existen elementos que no tienen el foco visible en la versión mobile. En las listas desplebales del Footer en la versión mobile no se puede visualizar el foco.	Alta		Todos los enlaces y elementos interactivos deben mostrar un foco visible al recibir el foco. a) Usar estilos personalizados, pero deben ser claramente visibles. b) Verificar que nada oculte visualmente el foco, como overflow: hidden, clip, transform, etc. c) Usar :focus-visible para aplicar estilos solo cuando el usuario navega con teclado.
35	34	3.3.2	Existen campos en el formulario que no tienen la información necesaria. En el formulario se utilizan los asterísticos (*) para informar los campos obligarorios. no se proporciona una instrucción textual visible ni accesible que explique su significado.	Media		Los campos de los formularios deben tener instrucciones claras y precisas. a) Añadir una instrucción clara antes del formulario: "Los campos marcados con un asterisco () son obligatorios.* b)Añadir visualmente y de forma accesible la palabra “obligatorio”.
36	35	3.3.2	Existe unnombre accesible de un campo de formulario está mal escrito, abreviado o es confuso. Se ha detectado un campo cuyo nombre accesible es "n de seguimiento de envío", lo que puede resultar ambiguo para usuarios de lectores de pantalla, ya que puede leerse literalmente como "ene de envío".	Alta		Evitar abreviaturas o caracteres ambiguos. Usa etiquetas completas y claras, por ejemplo: "Número de envío"
37	36	3.3.3	Existen errores en el formulario que no tienen la información necesaria. El formulario no proporciona sugerencias para corregir errores detectados automáticamente en el campo: "Código postal destino: Pais"	Alta		Se debe asegurar que los usuarios reciban sugerencias adecuadas para resarcir errores. Un ejemplo sería: El país de destino no es válido. Seleccione un país dentro las opciones disponibles.
38	37	4.1.2	Existen elementos que no comunican adecuadamente su propósito. El botón del menú desplegable utiliza incorrectamente el atributo aria-pressed, que no es apropiado para este tipo de componente.	Alta		Se debe eliminar el atributo aria-pressed. Aria-pressed está diseñado exclusivamente para botones tipo interruptor (toggle buttons), como encendido/apagado, mostrar/ocultar, etc. Un menú desplegable no es una acción binaria, sino una interacción para mostrar u ocultar una lista de opciones. Confunde a los usuarios de tecnologías de asistencia, ya que esperan un comportamiento tipo interruptor.
39	38	4.1.2	Existen elementos que no comunican adecuadamente su propósito. El botón del menú desplegable debe utilizar atributos que describan adecuadamente su propósito.	Alta		Se debe agregar el atributo aria-hasspopup. Se debe utilizar aria-haspopup y aria-expanded para indicar la relación con el menú y su estado de visibilidad.
40	39	4.1.2	Existen elementos que no comunican adecuadamente su propósito. Existen botones con comportamiento de interruptor que no incluyen el atributo aria-pressed, por lo que su estado no es comunicado a tecnologías de asistencia: Todos los botones dentro de la sección "¿Qué tamaño y peso tiene tu paquete?".	Alta		Se debe implementar aria-pressed correctamente y actualizar su valor dinámicamente para reflejar el estado activo o inactivo del componente.
41	40	4.1.2	Existen botones que no tienen nombre accesible. Las tecnologías de asistencia no pueden anunciar correctamente la función de los siguientes botones: a) Buscar (la lupa del buscador). b) Cerrar (dentro de inputs de formularios).	Alta		Todos los componentes deben tener un nombre accesible. a) Añadir aria-label a los botones. b) Usar aria-labelledby si hay texto relacionado visible c) Asegúrate de que el nombre sea único, claro y útil. En todos los casos, el icono debe tener aria-hidden="true" si no aporta valor semántico adicional.
42	41	4.1.3	Existen mensajes de error que no están correctamentamente anunciados. Los mensajes de error dentro del formulario no son anunciados automáticamente a los usuarios de tecnologías de asistencia sin requerir foco.	Alta	N/A	El mensaje debe ser anunciado automáticamente sin requerir foco. Añadir role="alert" al contenedor del mensaje.
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100