Centro de Pruebas de Accesibilidad Accessibility Test Center

¿Cómo funciona este laboratorio? How does this lab work?

He creado dos versiones de una misma tienda online ("E-commerce Ficticio"). La primera versión contiene multitud de barreras arquitectónicas digitales introducidas a propósito para demostrar cómo no se debe programar. La segunda versión es exactamente igual visualmente, pero ha sido desarrollada con un marcado semántico correcto y accesible. I have created two versions of the same online store ("Fictional E-commerce"). The first version contains a multitude of digital architectural barriers intentionally introduced to demonstrate how not to program. The second version is visually identical, but has been developed with correct and accessible semantic markup.

Errores que encontrarás en la versión Inaccesible Errors you will find in the Inaccessible version

• WCAG 1.3.1 (A)

  Navegación y Estructura No Semántica Non-Semantic Navigation & Structure

  Uso excesivo de etiquetas <div> y <span> para simular el menú, encabezados y botones de "Añadir al carrito", lo que impide que los lectores de pantalla comprendan el documento. Excessive use of <div> and <span> tags to simulate menus, headings, and "Add to cart" buttons, preventing screen readers from understanding the document.

• WCAG 2.1.1 (A)

  Trampa de Teclado / Falta de Foco Keyboard Trap / Lack of Focus

  Elementos interactivos construidos con eventos onclick sin el atributo tabindex, haciendo imposible navegar por la tienda usando únicamente el teclado. Interactive elements built with onclick events without the tabindex attribute, making it impossible to navigate the store using only the keyboard.

• WCAG 1.1.1 (A)

  Imágenes de Producto sin Texto Alternativo Product Images without Alt Text

  Las fotos de los productos de la tienda carecen de un atributo alt descriptivo, ocultando información crítica a usuarios ciegos o con baja visión. Store product photos lack a descriptive alt attribute, hiding critical information from blind or low-vision users.

• WCAG 3.3.2 (A)

  Formulario de Envío Inaccesible Inaccessible Shipping Form

  El formulario de pago (checkout) utiliza únicamente atributos placeholder en lugar de etiquetas visuales y semánticas (<label>). The checkout form relies entirely on placeholder attributes instead of visual and semantic labels (<label>).

• WCAG 1.4.3 (AA)

  Contraste de Color Deficiente Poor Color Contrast

  Los precios y algunos textos secundarios utilizan tonos de gris muy claros sobre fondo blanco, sin alcanzar el ratio mínimo de 4.5:1. Prices and some secondary text use very light shades of grey on a white background, failing to meet the minimum 4.5:1 ratio.

• WCAG 2.4.3 (A)

  Orden del Foco y Trampas en la Ventana Modal Focus Order and Modal Focus Traps

  La ventana emergente de suscripción no retiene el foco de teclado (permitiendo interactuar con el fondo) y no devuelve el foco correctamente al cerrarse. The subscription popup does not trap keyboard focus (allowing interaction with the background) and does not return focus properly when closed.

• WCAG 2.2.2 (A)

  Movimiento sin Control de Pausa (Carrusel) Motion without Pause Control (Carousel)

  El carrusel de ofertas se desplaza automáticamente sin ofrecer al usuario un botón para pausarlo, lo que puede causar problemas a personas con déficit de atención o dificultades de lectura. The offer carousel moves automatically without providing a pause button, which can cause issues for users with attention deficits or reading difficulties.

• WCAG 4.1.2 (A)

  Componentes sin Roles ni Estados ARIA (Tabs y Acordeón) Components without ARIA Roles or States (Tabs and Accordion)

  Las pestañas de producto y las preguntas frecuentes (acordeón) cambian el contenido visualmente usando JavaScript, pero no informan de su estado (ej. aria-expanded) ni de su estructura (ej. role="tablist") a las tecnologías de apoyo. Product tabs and FAQs (accordion) change content visually using JavaScript, but do not communicate their state (e.g., aria-expanded) or structure (e.g., role="tablist") to assistive technologies.

• Test 1.6 (Heurística)

  Títulos Falsos Fake Headings

  Uso de elementos neutros (como <p>) con estilos de texto grande y en negrita para simular encabezados en los filtros, confundiendo al lector de pantalla sobre la estructura jerárquica. Using neutral elements (like <p>) with large, bold text styles to simulate headings in filters, confusing the screen reader about the hierarchical structure.

• WCAG 1.3.1 / 3.3.2 (A)

  Inputs sin Etiqueta Semántica Inputs without Semantic Label

  Las casillas de verificación (checkboxes) y botones de opción (radios) de los filtros carecen de etiquetas <label> vinculadas a sus IDs, lo que impide saber su propósito al navegar con teclado. Checkboxes and radio buttons in the filters lack <label> tags linked to their IDs, making it impossible to know their purpose when navigating with a keyboard.

• WCAG 2.4.4 (A)

  Enlaces Ambiguos (Paginación) Ambiguous Links (Pagination)

  Los enlaces de la paginación utilizan textos genéricos ("1", "2", ">") sin contexto adicional (como aria-label="Página 2") ni están envueltos en una región de navegación (<nav>). Pagination links use generic text ("1", "2", ">") without additional context (like aria-label="Page 2") and are not wrapped in a navigation region (<nav>).

• Test 4.2 (Crítico)

  Visibilidad Fantasma (Tooltip) Ghost Visibility (Tooltip)

  El tooltip de ayuda del checkout se hace visible en pantalla al hacer hover, pero retiene el atributo aria-hidden="true", ocultando contenido importante a los lectores de pantalla. The checkout help tooltip becomes visible on screen on hover, but retains the aria-hidden="true" attribute, hiding important content from screen readers.