Vistas Superpuestas

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Garantizar que los elementos de la interfaz de usuario en pantalla no se superpongan visualmente

Not for use with personal data

¡Aprende cómo usamos inteligencia artificial para esta regla!

Qué Verificamos

Un elemento es cualquier elemento visible de la interfaz de usuario en pantalla, como una etiqueta de texto, una imagen o un botón. Las vistas que contienen información no deben intersectarse con otra vista, ya sea parcial o totalmente. Las vistas superpuestas pueden hacer que el contenido sea ilegible o completamente oculto, especialmente cuando el Tipo Dinámico aumenta el tamaño del texto.

Esta regla refuerza una práctica recomendada según las Guías de Interfaz Humana de Apple. Puedes desactivar esta regla desde el Tablero Móvil o ignorar la regla en pruebas escritas para iOS.

Ejemplo Fallido ❌

An iOS phone screen showing documentation with enlarged text that overlaps an image. A red focus ring indicates that the top part of the text is difficult to read

Texto agrandado overlaps another element on screen

El texto que se superpone a la imagen se vuelve parcialmente o completamente ilegible

Esto puede ocurrir con tamaños de texto predeterminados, o aparecer solo después de que un usuario aumenta su tamaño de Tipo Dinámico en Configuración

Ejemplo Exitoso ✅

An iOS phone screen showing documentation with enlarged text that is properly spaced, with no overlapping bounds

Todos los elementos en pantalla están spaced so their bounds do not intersect

El texto es legible tanto en tamaños de Tipo Dinámico predeterminados como en tamaños más grandes

Las restricciones de diseño adecuadas garantizan que los elementos mantengan un espacio adecuado incluso cuando el texto se amplía

A Simple Vista

Esta regla tiene un impacto menor para los usuarios
Las vistas (elementos de la interfaz de usuario visibles como etiquetas de texto e imágenes) no deben superponerse entre sí
El Tipo Dinámico puede aumentar el tamaño del texto en tiempo de ejecución, causando que elementos previamente separados se superpongan

Impacto para los Usuarios

Los usuarios con visión son los más afectados, particularmente aquellos que usan configuraciones más grandes de Tipo Dinámico. Cuando las vistas informativas se superponen, el contenido puede volverse parcialmente o completamente ilegible. Los usuarios que dependen de tamaños de texto más grandes son más propensos a encontrar este problema, incluso si el diseño parece correcto en tamaños predeterminados.

Confirmar Problema de Vistas Superpuestas

Observe los límites de cada vista informativa en la pantalla.
Se aplicará una de las siguientes:
- Inaccesible: Los límites de una vista se intersectan con otra vista.
- Accesible: Ninguna vista informativa tiene límites superpuestos.
Si la pantalla contiene elementos de texto, aumente el tamaño del Tipo Dinámico en Configuración y repita la verificación para confirmar que las vistas no comiencen a superponerse en tamaños más grandes.

Corregir Problemas

Las vistas superpuestas son causadas más comúnmente por restricciones de diseño faltantes o insuficientes que no consideran el Tipo Dinámico. La corrección exacta variará según el diseño, pero el objetivo es asegurar que los elementos informativos siempre tengan suficiente espacio entre ellos.

UIKit

Asegúrate de que las restricciones entre los elementos informativos vecinos proporcionen un espacio adecuado. Si no existe una restricción entre dos elementos que están muy cerca, agrega una para que no puedan superponerse cuando el Tipo Dinámico aumente su tamaño.

SwiftUI

Asegúrate de que cada vista tenga modificadores de diseño que eviten que sus límites se superpongan con las vistas vecinas. Usa HStack y VStack como contenedores principales para que el sistema de diseño gestione el espacio automáticamente. Evita utilizar ZStack como contenedor principal para vistas que contienen texto, ya que coloca elementos uno encima del otro.

React Native

Asegúrate de que las vistas que contienen texto u otro contenido escalable no tengan un maxHeight configurado, lo que puede causar que el contenido se recorte o se empuje hacia elementos adyacentes a medida que aumenta el tamaño del texto. Al utilizar un diseño flexible, considera agregar un valor para la propiedad gap para mantener un espacio consistente entre los elementos.

¿Puedo Ignorar Esta Regla?

Vistas Superpuestas tiene un Impacto menor para los usuarios y refuerza una práctica recomendada de Apple más que un requisito estricto de WCAG. Puedes desactivar esta regla completamente desde el Tablero Móvil, o ignorar hallazgos individuales en tus pruebas de iOS. Aprende más sobre ignorando reglas.