Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Por qué el orden del contenido en el código debe ser correcto?
El orden en el código debe ser correcto porque los lectores de pantalla leen una página exactamente en este orden — independientemente de cómo el contenido esté dispuesto en la pantalla. Si el precio está en el código antes del nombre del producto, un visitante ciego primero escucha "89 euros" y no sabe para qué. El orden visible y el orden de código deben coincidir.
Dos vistas de la misma página
Cada sitio web existe dos veces: una vez como diseño visible en la pantalla y una vez como código donde el contenido se sigue uno detrás del otro. Las técnicas de diseño modernas pueden desacoplar ambas — un elemento que está al final del código puede parecer arriba a la izquierda. Para visitantes videntes es invisible. Un lector de pantalla sin embargo sigue el código obstinadamente. Un ejemplo: su lista de precios muestra tres paquetes lado a lado, pero en el código primero están los tres títulos, luego los tres precios, luego las tres descripciones. El visitante ciego escucha "Básico, Confort, Premium, 29 euros, 59 euros, 99 euros" — y no puede asignar los precios a los paquetes.
Así nuestro núcleo de medición prueba el orden
La herramienta de prueba axe-core reconoce señales técnicas individuales que sugieren un orden trastornado — como marcas que arrancan elementos del flujo de lectura. Sin embargo, una máquina generalmente solo puede juzgar limitadamente si el orden de lectura de una página específica tiene sentido de contenido: tiene que entender el contenido. Nuestro núcleo de medición sigue aquí su principio de que un resultado sin llamar la atención no es un pase libre — lo que la automática no puede decidir con certeza, el informe señala como "verificar manualmente". En el estándar Oro, un revisor se hace mostrar la página en orden de código y juzga si el contenido sigue siendo comprensible.
Beispiele
Reihenfolge per CSS umgestellt
<div style="display:flex; flex-direction:column-reverse">
<p>Schritt 2: Termin bestätigen</p>
<p>Schritt 1: Termin wählen</p>
</div><div>
<p>Schritt 1: Termin wählen</p>
<p>Schritt 2: Termin bestätigen</p>
</div>Vorleseprogramme lesen den Quelltext in seiner Reihenfolge. Was optisch umgedreht wird, kommt falsch herum an.
- Pida a su agencia que revise las páginas principales una vez sin diseño — solo como orden de código.
- Verifique especialmente listas de precios y tablas de comparación: allí el diseño separa especificaciones relacionadas con mayor frecuencia.
- Con reconstrucciones asegúrese de que el contenido se inserta en el código donde pertenece de contenido — no donde es técnicamente conveniente.
- Pruebe después de cambios de diseño importantes con la tecla Tab: si la marca salta de un lado a otro, generalmente el orden de código tampoco es correcto.
- Tome el orden de lectura de voz como criterio de aceptación en contratos con su agencia.