Accesibilidad Web

Regiones de la página (Landmarks HTML5 y ARIA)

El uso riguroso de elementos semánticos permite a los usuarios de tecnologías de asistencia comprender la arquitectura del sitio y desplazarse ágilmente entre secciones sin necesidad de recorrer todo el código intermedio:

• <header> (role="banner"): Cabecera de la página que contiene el logotipo corporativo, el buscador y las utilidades globales.
• <nav> (role="navigation"): Bloque que contiene enlaces de navegación principal, secundaria, migas de pan (breadcrumbs) o paginadores. Cuando existan múltiples elementos <nav> en una misma página, es obligatorio diferenciarlos utilizando el atributo aria-label (ej. aria-label="Menú principal" y aria-label="Migas de pan" ).
• <main> (role="main"): Contenedor del contenido principal de la página. Debe existir un único elemento <main> por documento. Debe contar con el atributo id="main" y tabindex="-1" para ser el destino directo del enlace de salto ("Skip link").
• <aside> (role="complementary"): Bloque de contenido complementario o tangencialmente relacionado con el tema central (ej. enlaces recomendados, glosario, widgets informativos).
• <article> (role="article"): Composición independiente y reutilizable que conserva sentido por sí misma (ej. un comunicado de prensa, una tarjeta de producto o una noticia).
• <section> (role="region"): Agrupación temática de contenido. Se considera una buena práctica comenzar cada sección con un encabezado descriptivo (h2-h6) y, si tiene un propósito interactivo, rotularla con aria-labelledby .
• <footer> (role="contentinfo"): Pie de página que contiene información legal, derechos de autor, enlaces a políticas de privacidad y datos de contacto corporativo.

Jerarquía estricta de encabezados (Headings)

Los encabezados estructuran el mapa mental del contenido. Los navegadores y lectores de pantalla permiten generar un índice dinámico de navegación basado en ellos:

• Toda página debe contar con un único encabezado principal <h1> que sintetice el propósito o tema de la página.
• No saltar niveles de encabezado: La progresión debe ser secuencial (un <h2> debe contener subsecciones en <h3>, y un <h3> subsecciones en <h4>). Nunca pasar directamente de <h2> a <h4> porque desconcierta a los usuarios de lectores de pantalla.
• No usar etiquetas de encabezado con fines meramente estéticos: Si se requiere un texto grande o pequeño, aplique las clases de tipografía provistas por el Design System de YPF, pero conserve la etiqueta semántica correcta.
• No insertar encabezados vacíos: Se prohíbe el uso de etiquetas como <h3>&nbsp;</h3> para crear espaciados visuales. Los espaciados deben resolverse exclusivamente mediante CSS o componentes separadores.

Navegación universal por teclado

Cualquier acción ejecutable con el mouse debe poder realizarse con el teclado sin excepción. Las combinaciones de teclas estándar son:

• Tab: Desplaza el foco al siguiente elemento interactivo en el orden natural del DOM.
• Shift + Tab: Desplaza el foco al elemento interactivo anterior.
• Enter: Activa enlaces, envía formularios y acciona botones primarios.
• Barra espaciadora (Space): Acciona botones, conmuta casillas de verificación (checkboxes) y expande menús desplegables.
• Escape: Cierra diálogos modales, menús flotantes, calendarios emergentes y tooltips sin ejecutar cambios.
• Flechas direccionales: Permiten desplazarse entre opciones de un grupo de botones de radio (radio buttons), pestañas (tabs), menús desplegables y controles deslizantes (sliders).

Gestión del foco (Focus Management) y enlaces de salto

• Orden lógico de tabulación: El orden en que se navega por teclado debe ser coherente con el orden visual de lectura en pantalla. Evite alteraciones de orden mediante estilos CSS desalineados del DOM.
• Uso correcto de tabindex:
  
  
  • tabindex="0" : Permite que un elemento personalizado forme parte del orden natural de tabulación (usar con moderación, prefiriendo siempre elementos nativos).
  • tabindex="-1" : Permite recibir el foco mediante programación JavaScript ( elemento.focus() ) sin insertarlo en el tabulador manual. Imprescindible para el contenedor <main> y receptores de modales.
  • PROHIBICIÓN ESTRICTA: Queda terminantemente prohibido usar tabindex con valores positivos (ej. tabindex="1" , tabindex="2" ), ya que rompe la navegación lógica del resto de la página.
    
    
• Enlaces de salto ("Skip Links"): Toda página debe incorporar al inicio un enlace accesible con el texto "Saltar al contenido principal" apuntando a #main , permitiendo a los usuarios de teclado evitar repetir la cabecera en cada página.
• Trampa de foco (Focus Trap) en diálogos: Al abrirse un modal, el foco debe trasladarse a su interior y mantenerse contenido allí mientras esté abierto. El usuario no debe poder tabular elementos inactivos que quedan por detrás del modal.
• Retorno del foco: Al cerrar un diálogo, el foco debe regresar de manera programática e inmediata al botón o elemento que lo originó.

Foco visible e ininterrumpido (:focus y :focus-visible)

• Regla de oro: NUNCA eliminar el contorno de foco con outline: none o outline: 0 sin proveer un indicador visual alternativo igualmente visible y destacado.
• Utilice la pseudo-clase :focus-visible para brindar un anillo de foco nítido a quienes navegan con teclado, evitando mostrarlo ante clics de mouse si el diseño visual lo requiere.
• El indicador de foco debe cumplir con un contraste mínimo de 3:1 respecto a los colores adyacentes y al propio estado no enfocado (WCAG 2.1 Criterio 1.4.11).
• Foco no oscurecido (WCAG 2.2 Criterios 2.4.11 y 2.4.12 Nivel AA/AAA): Los elementos enfocados por teclado no deben quedar tapados por barras fijas, cabeceras flotantes (sticky headers) o avisos de cookies. Se debe utilizar la propiedad CSS scroll-margin-top o scroll-padding-top para garantizar espacio libre visible en el viewport.

Etiquetado explícito y obligatorio

Cada campo de entrada de datos debe contar con una etiqueta visible <label> vinculada programáticamente mediante el atributo for que coincida exactamente con el id del campo de entrada:

• El atributo placeholder NO es una etiqueta: El placeholder desaparece en cuanto el usuario comienza a escribir, carece de contraste suficiente y no es anunciado de manera uniforme por los lectores de pantalla. Debe usarse únicamente como formato de ejemplo transitorio.
• Campos obligatorios: Indicar la obligatoriedad visualmente (por ejemplo, con un asterisco acompañado de una leyenda explicativa) y a nivel semántico con el atributo nativo required y el atributo aria-required="true" .
• Agrupación semántica con fieldset y legend: En conjuntos de campos interdependientes, como preguntas con opciones de radio o casillas de verificación, debe utilizarse <fieldset> con un <legend> que describa el grupo.

Mensajes de error y ayuda contextual

• Vinculación con aria-describedby: Los textos de ayuda explicativa y los mensajes de error deben asociarse al campo mediante aria-describedby="id_ayuda id_error" . De este modo, el lector de pantalla lee la etiqueta del campo y a continuación sus instrucciones y errores.
• Estado de validación con aria-invalid: Cuando un campo contenga datos incorrectos o incompletos, agregar aria-invalid="true" para que las tecnologías de asistencia informen de inmediato al usuario.
• Notificación en vivo de errores: Los mensajes de error dinámicos deben incluir role="alert" para anunciarse en cuanto se disparen, evitando que el usuario envíe el formulario a ciegas.
• No depender del color: Los campos con error no deben marcarse únicamente con un borde rojo. Deben complementarse con un icono de advertencia y un mensaje de texto descriptivo que indique claramente qué ocurrió y cómo corregirlo.

Facilidades de entrada de datos (WCAG 2.1 y 2.2)

• Autocompletado (Criterio 1.3.5 WCAG 2.1): Incluir el atributo autocomplete apropiado en campos de información personal (ej. name , email , tel , address-line1 , postal-code ), permitiendo que el navegador cargue los datos automáticamente.
• Entrada redundante (Criterio 3.3.7 WCAG 2.2): Si en un proceso de varios pasos se solicita información previamente ingresada (como domicilio fiscal igual al domicilio de entrega), el sistema debe permitir autocompletarla o seleccionarla en lugar de forzar al usuario a volver a escribirla.

La Primera Regla de Oro de WAI-ARIA

"Si podés utilizar un elemento o atributo HTML nativo con la semántica y comportamiento que necesitás ya integrados, hacelo en lugar de reinventarlo con elementos genéricos y ARIA."
 
Por ejemplo: utilice un elemento <button> nativo en lugar de un <div role="button" tabindex="0"> , y utilice <a href="..."> para navegación en lugar de elementos con manejadores onclick artificiales.

Lineamientos para componentes interactivos comunes

• Diálogos Modales:
  
  
  • Contenedor identificado con role="dialog" o role="alertdialog" , con aria-modal="true" y vinculado a su título mediante aria-labelledby="id-titulo" .
  • Al abrirse, capturar el foco del teclado dentro del diálogo (focus trap). Deshabilitar o aislar el resto de la página mediante el atributo HTML inert o aria-hidden="true" .
  • Cierre inmediato con la tecla Escape o mediante botón explícito de cierre rotulado con aria-label="Cerrar ventana" .
  • Al cerrarse, devolver el foco al elemento que activó la apertura.
    
    
• Pestañas (Tabs):
  
  
  • Estructura compuesta por contenedor con role="tablist" , elementos accionables con role="tab" que indiquen su estado mediante aria-selected="true/false" y vinculen su panel con aria-controls="id-panel" .
  • Paneles de contenido identificados con role="tabpanel" y rotulados con aria-labelledby="id-tab" .
  • Navegación: las flechas direccionales izquierda/derecha conmutan entre pestañas; la tecla Tab ingresa al contenido del panel activo.
    
    
• Acordeones y Secciones Colapsables:
  
  
  • El disparador debe ser un <button> nativo que indique su estado mediante aria-expanded="true" o aria-expanded="false" y apunte al panel controlado mediante aria-controls="id-panel" .
  • El panel colapsado debe ocultarse efectivamente utilizando el atributo nativo hidden o display: none en CSS.
    
    
• Tooltips (Información Contextual Emergente):
  
  
  • No deben contener información crítica que no esté disponible por otros medios.
  • Deben hacerse visibles tanto al posar el mouse (hover) como al recibir foco de teclado (:focus).
  • Deben poder cerrarse mediante la tecla Escape sin alterar la posición del foco y no deben cerrarse si el usuario mueve el cursor sobre el propio tooltip (WCAG 2.1 Criterio 1.4.13).
    
    
• Toasts, Alertas y Notificaciones Dinámicas:
  
  
  • Utilizar regiones en vivo: aria-live="polite" para avisos informativos generales (espera a que el lector de pantalla termine de verbalizar el texto actual).
  • Utilizar aria-live="assertive" o role="alert" únicamente para avisos críticos o fallas de sistema inmediatas.
  • No configurar tiempos de autocierre breves; ofrecer la posibilidad de pausar, descartar o volver a consultar los mensajes.
    
    
• Carousels de Imágenes (Sliders):
  
  
  • Mecanismo accesible y visible para pausar, detener o reanudar la animación en cualquier momento.
  • Controles de anterior y siguiente operables 100% por teclado.
  • Anuncio accesible del cambio de diapositiva (ej. "Diapositiva 2 de 5") mediante región con aria-live="polite" .

Resumen de atributos ARIA esenciales

• aria-label: Proporciona una etiqueta accesible de texto plano cuando el elemento interactivo no cuenta con texto visible en pantalla (ej. botón con solo un icono).
• aria-labelledby: Asocia el elemento a uno o más IDs de textos visibles en el documento para su denominación.
• aria-describedby: Asocia el elemento a textos complementarios, instrucciones o descripciones de error.
• aria-current: Indica qué ítem dentro de un conjunto es el actual (ej. aria-current="page" en el menú de navegación).
• aria-expanded: Comunica si un elemento expandible está desplegado o plegado.
• aria-hidden="true": Oculta elementos puramente visuales o decorativos ante tecnologías de asistencia.
• aria-live: Informa al lector de pantalla que debe verbalizar actualizaciones asíncronas de contenido.

Taxonomía rigurosa de textos alternativos (alt)

El atributo alt es el canal fundamental para comunicar el propósito de las imágenes a las personas usuarias de lectores de pantalla. Su redacción depende estrictamente del contexto y la función de la imagen:

• 1. Imágenes decorativas: Elementos ornamentales, fondos abstractos o gráficos que acompañan a un texto idéntico contiguo. Deben llevar siempre un atributo alt="" vacío (sin espacios entre las comillas) y opcionalmente role="presentation" para que las tecnologías de asistencia las ignoren sin emitir anuncios innecesarios.
• 2. Imágenes funcionales: Iconos o imágenes dentro de botones o hipervínculos. El atributo alt debe describir la acción o destino , nunca el aspecto visual. Por ejemplo: alt="Descargar informe anual en PDF" en lugar de alt="Icono de documento con flecha" .
• 3. Imágenes informativas / descriptivas: Fotografías, productos o ilustraciones que aportan información contextual. El texto alternativo debe describir con concisión la esencia de lo que se muestra (ej. alt="Estación de servicio YPF con surtidores automáticos y tienda YPF Full iluminada al atardecer" ).
• 4. Imágenes complejas (gráficos, esquemas, infografías): Diagramas de procesos o mapas de datos que no pueden sintetizarse en pocas palabras. Requieren un texto alternativo breve inicial y una descripción completa en texto plano adyacente o vinculada a través del atributo aria-describedby .

Contraste cromático y diseño visual accesible

Un contraste adecuado garantiza la legibilidad para personas con baja visión, visión monocromática, daltonismo o usuarios navegando bajo luz solar directa:

• Contraste de texto regular (Criterio 1.4.3 Nivel AA): Mínimo 4.5:1 entre el color del texto y su color de fondo. Para nivel AAA la exigencia asciende a 7:1.
• Contraste de texto grande (Criterio 1.4.3 Nivel AA): Mínimo 3.0:1 para textos con tamaño igual o superior a 18pt (24px) o 14pt (18.66px) en negrita.
• Contraste no textual (Criterio 1.4.11 WCAG 2.1 Nivel AA): Mínimo 3.0:1 para componentes de interfaz de usuario y objetos gráficos esenciales. Esto incluye:
  
  
  • Bordes de campos de entrada de formularios (inputs y selects).
  • Contornos de botones y elementos interactivos.
  • Iconos que transmiten información relevante o estado.
  • Indicadores visuales de foco (focus rings) y estados activos o seleccionados.
    
    
• Uso del color (Criterio 1.4.1 Nivel A): El color no debe ser nunca el único medio utilizado para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. Todo estado de alerta o éxito debe complementarse con tipografía, iconos o patrones visuales.

Contenidos multimedia (Video y Audio)

• Videos con audio:
  
  
  • Subtítulos cerrados sincronizados (Closed Captions): Obligatorios para personas sordas o en entornos ruidosos. Deben incluir diálogos, identificación de los interlocutores y sonidos de ambiente o efectos sonoros esenciales.
  • Transcripción textual completa: Documento textual que recopila todo el audio y la descripción de las escenas visuales principales, disponible para descarga o lectura directa.
  • Audiodescripción (Audio Description): Pista de audio secundaria que describe las acciones, gestos y cambios de escena relevantes que no se deducen del diálogo oral, para personas con ceguera o baja visión.
  • Reproductor accesible: El reproductor de video y audio debe poder controlarse completamente mediante teclado (reproducir, pausar, ajustar volumen y activar subtítulos).
    
    
• Archivos de solo audio (Podcasts, mensajes institucionales): Deben ofrecer siempre una transcripción textual completa y exacta accesible junto al archivo.

Tablas de datos accesibles

Las tablas deben utilizarse exclusivamente para presentar información tabular estructurada con relaciones lógicas entre filas y columnas:

• Título de tabla con <caption>: Toda tabla debe incluir un elemento <caption> al inicio que resuma de forma clara y concisa el propósito y contenido de los datos.
• Encabezados con <th> y atributo scope: Las celdas de cabecera deben usar la etiqueta <th> indicando explícitamente su alcance mediante scope="col" para columnas y scope="row" para filas.
• PROHIBICIÓN TERMINANTE: Jamás utilizar la etiqueta <table> con fines de maquetación, layout, distribución visual o alineación de diseño. El diseño visual debe resolverse exclusivamente con CSS Grid o Flexbox.

Documentos descargables (PDFs Accesibles)

Muchos de los manuales, reportes y normativas de YPF se distribuyen en formato PDF. Para cumplir con la normativa argentina e internacional, los documentos PDF deben cumplir los siguientes requisitos:

• PDFs Etiquetados (Tagged PDF): Deben crearse a partir de documentos fuente estructurados (Microsoft Word, Adobe InDesign) exportando las etiquetas semánticas de encabezados, párrafos y listas.
• Texto real seleccionable: El documento no puede ser una imagen escaneada de texto. Si proviene de escaneos, debe procesarse previamente con Reconocimiento Óptico de Caracteres (OCR) de alta calidad.
• Jerarquía de encabezados y orden de lectura: Mantener una estructura de títulos lógica que permita a los lectores de pantalla recorrer el índice del documento.
• Metadatos completos: Definir el título descriptivo del documento y el idioma principal en las propiedades del archivo PDF.
• Alternativas de texto: Todas las imágenes, logotipos y gráficos incluidos dentro del documento PDF deben contar con su correspondiente texto alternativo configurado en la herramienta de autor.

Lenguaje claro y accesibilidad cognitiva

El lenguaje claro beneficia a todas las personas y resulta indispensable para usuarios con diversidad cognitiva, dislexia, personas con baja alfabetización digital o usuarios que operan en situaciones de estrés y cansancio físico:

• Frases cortas y directas: Priorizar oraciones de menos de 25 palabras y redactar en voz activa ("El equipo de soporte revisará la solicitud" en lugar de "La solicitud será revisada por el equipo de soporte").
• Estructura visual aireada: Dividir textos largos en párrafos breves, utilizando listas con viñetas y encabezados descriptivos que permitan el escaneo visual rápido.
• Consistencia terminológica corporativa: Utilizar siempre el mismo término para la misma acción en todos los portales (evitar alternar entre "Ingresar", "Acceder" e "Iniciar sesión" en diferentes secciones de un mismo sitio).
• Explicación de siglas y acrónimos: Aclarar el significado completo de cualquier acrónimo o término técnico la primera vez que se menciona en el documento (ej. "World Wide Web Consortium (W3C)").

Sinergia entre accesibilidad web y SEO técnico

Existe una relación directa y fundamental entre la accesibilidad web y el SEO técnico: los motores de búsqueda no "ven" una página web como un usuario vidente, sino que procesan su código HTML puro, recorren el árbol semántico de etiquetas, siguen enlaces textuales e interpretan el contenido mediante rastreadores automáticos, de una manera prácticamente idéntica a cómo opera un lector de pantalla u otra tecnología de asistencia.

Construir sitios semánticamente sólidos, predecibles y accesibles produce beneficios inmediatos y simultáneos:

• Mejor comprensión del contenido: Las etiquetas semánticas comunican el rol y la jerarquía de cada bloque sin ambigüedad.
• Mejor estructura semántica: El árbol del documento se vuelve lógico y fácil de indexar.
• Mejor rastreo (Crawling): Los bots recorren la arquitectura de información sin perderse en trampas de navegación.
• Mejor indexación: La información clave se clasifica con mayor precisión y relevancia temática.
• Mejor experiencia de usuario (UX): Reducción de la tasa de rebote y mayor tiempo de permanencia e interacción.

"La accesibilidad no reemplaza una estrategia SEO, pero muchas de sus prácticas contribuyen significativamente a mejorar la calidad técnica de un sitio web."

Titles (Título de página)

La etiqueta <title> es el elemento de metadatos más determinante de un documento web. Es lo primero que verbalizan los lectores de pantalla al cargar una página, el texto visible en las pestañas del navegador y el titular que encabeza cada resultado en los motores de búsqueda:

• Unicidad: Cada página debe tener un único <title> dentro de su etiqueta <head> y debe ser completamente distintivo dentro del sitio web.
• Claridad descriptiva: Debe resumir con precisión y concisión el tema o propósito de la página.
• Evitar títulos genéricos o vagos: Títulos como "Inicio", "Página", "Documento" o simplemente "YPF" generan confusión tanto a usuarios con múltiples pestañas abiertas como a los algoritmos de indexación.
• Patrón corporativo recomendado: Utilizar el formato estandarizado [Nombre de página] | YPF .
• Ejemplos:

• • Accesibilidad Web | YPF
  • Lineamientos UX | YPF
  • Sistema de Diseño | YPF

Ejemplo de implementación:

<title>Accesibilidad Web | YPF</title>

Meta Description

La etiqueta <meta name="description"> provee un resumen sintético del contenido de la página, habitualmente utilizado por los buscadores como fragmento descriptivo (snippet) en los resultados de búsqueda:

• Una por página: Cada página debe contar con una única meta description exclusiva y personalizada.
• Redactada para humanos: Debe redactarse en lenguaje claro, natural y comprensible, resumiendo fielmente el objetivo principal de la página.
• Longitud recomendada: Entre 140 y 160 caracteres , asegurando que se visualice completa sin ser truncada en pantallas de escritorio ni dispositivos móviles.

Ejemplo de implementación:

<meta name="description" content="Guía de accesibilidad web para portales YPF basada en WCAG 2.2 y buenas prácticas de diseño y desarrollo.">

Encabezados semánticos (<h1>, <h2>, <h3>)

Los encabezados estructuran el mapa mental del contenido y benefician simultáneamente la accesibilidad (permiten a los usuarios de lectores de pantalla navegar por el índice de la página), el SEO (los motores de búsqueda interpretan la jerarquía temática del contenido) y la organización editorial general:

• Un único <h1> por página: Sintetiza el propósito o tema central del documento.
• Jerarquía lógica estricta: Avanzar de forma descendente y secuencial (<h1> → <h2> → <h3>). Nunca omitir niveles (por ejemplo, nunca pasar de <h2> a <h4>).
• No usar encabezados con fines visuales: Si un texto necesita mayor tamaño pero no es un titular, se debe aplicar una clase tipográfica del Design System y no una etiqueta <h1>-<h6> . Del mismo modo, nunca insertar encabezados vacíos como separadores.

Enlaces descriptivos y significativos

Los hipervínculos deben redactarse de modo que su destino y función sean comprensibles por sí mismos, incluso cuando se lean aislados del párrafo que los contiene:

• Evitar textos ambiguos o genéricos:
  
  
  • NO recomendado: <a href="manual.pdf">Click aquí</a>
  • NO recomendado: <a href="manual.pdf">Leer más</a>

• Redacción contextual recomendada:
  
  
  • Recomendado: <a href="manual.pdf">Descargar Guía de Accesibilidad (PDF)</a>


• Beneficios compartidos:
  
  
  • Comprensión: El usuario sabe con certeza adónde será dirigido antes de hacer clic.
  • Navegación: Las personas usuarias de lectores de pantalla pueden recorrer el listado de enlaces del sitio sin desorientarse.
  • Rastreo e indexación: Los motores de búsqueda comprenden de forma precisa la relación temática entre la página de origen y la de destino.
  • Experiencia de usuario: Incrementa la confianza, la usabilidad y la previsibilidad en la interacción.

Imágenes y texto alternativo (alt)

El atributo alt es el puente directo entre la inclusión digital y la indexación visual en motores de búsqueda:

• Nunca omitir el atributo alt: Una etiqueta <img> sin atributo alt es un error técnico grave. Provoca que el lector de pantalla verbalice la ruta cruda del archivo (ej. "img_1904_final.webp") y que los buscadores no puedan catalogar el gráfico.
• Alt descriptivo e informativo: Cuando la imagen aporta contenido o información contextual, describir con precisión y concisión lo que representa. Esto mejora la comprensión sensorial y permite que motores como Google Imágenes indexen la imagen adecuadamente en su contexto temático.
• Alt vacío para imágenes decorativas: Cuando la imagen sea meramente ornamental o acompañe a un texto adyacente idéntico, debe incluirse alt="" (sin espacios). De esta manera, las tecnologías de asistencia la ignoran y los motores de búsqueda descartan contenido decorativo irrelevante.

PDFs y documentos descargables

Cuando se ofrecen documentos descargables dentro de los portales de YPF, los enlaces deben alertar con claridad sobre las características del archivo antes de iniciar la descarga:

• Indicar el formato: Especificar claramente si se trata de un PDF, ZIP u otro formato.
• Indicar el tamaño del archivo: Informar el peso estimado (ej. 2.4 MB) para favorecer a personas que navegan con planes de datos móviles limitados o conexiones inestables.
• Describir el contenido: El texto del hipervínculo debe comunicar el contenido exacto del archivo descargable.

Ejemplo de implementación:

<a href="guia-accesibilidad.pdf" download>Guía de Accesibilidad Web (PDF, 2.4 MB)</a>

URLs descriptivas y amigables

La estructura de las URLs influye directamente en la legibilidad humana, el mantenimiento del código y la eficiencia del rastreo técnico:

• URLs recomendadas (legibles y semánticas):
  
  
  • /accesibilidad-web
  • /lineamientos/diseno-ux
    
    
• URLs a evitar (opacas y basadas en parámetros):
  
  
  • /pagina?id=9028
  • /documento.aspx?item=123
    
    
• Impacto: Las URLs semánticas aumentan la previsibilidad para las personas, previenen errores al compartir enlaces y facilitan que los motores de búsqueda clasifiquen la jerarquía de los directorios del sitio.

Datos estructurados (Introducción)

Los datos estructurados constituyen un estándar de etiquetado técnico que utiliza vocabularios universales (como Schema.org ) para describir de forma explícita qué representa cada pieza de información a los motores de búsqueda.

Aunque no alteran el diseño visual visible en pantalla, enriquecen la presencia en los resultados de búsqueda (generando "rich snippets" o fragmentos enriquecidos) y facilitan que asistentes virtuales y buscadores comprendan los datos clave:

• Schema.org: Vocabulario estándar respaldado por los principales motores de búsqueda para clasificar entidades y propiedades web.
• Breadcrumbs (Migas de pan): Permite reflejar la ruta de navegación jerárquica del usuario en los resultados de búsqueda.
• Article / NewsArticle: Especifica titulares, fecha de publicación, autoría e imágenes de noticias y artículos técnicos.
• FAQ (Preguntas Frecuentes): Permite mostrar preguntas y respuestas directamente en los resultados, mejorando el acceso rápido a la información.
• Organization: Define la identidad corporativa de YPF (logo institucional, datos de contacto, enlaces a redes sociales y canales oficiales).