Nombre Accesible Significativo

Qué Buscamos

El nombre accesible de un elemento no debe incluir su rasgo de accesibilidad. VoiceOver anuncia el rasgo automáticamente, por lo que incluirlo en el nombre hace que se lea en voz alta dos veces.

Esta regla impone una práctica recomendada establecida por las Directrices de Interfaz Humana de Apple. Puede desactivar esta regla desde el Panel de Control Móvil o ignorando la regla en pruebas escritas para iOS.

Ejemplo de Fallo ❌

VoiceOver announces: "Botón Me gusta, botón"

La palabra "botón" está incluida en el nombre accesible and y se anuncia nuevamente como el rasgo, creando un anuncio redundante que puede confundir a los usuarios de lectores de pantalla

Ejemplo Correcto ✅

VoiceOver announces: "Me gusta este artículo, botón"

El nombre accesible - "Me gusta este artículo" - no incluye el rasgo del elemento

VoiceOver añade el rasgo automáticamente, de modo que los usuarios escuchan cada información exactamente una vez

En Breve

• Esta regla tiene un impacto menor para los usuarios
• El nombre accesible de un elemento no debe repetir su rasgo de accesibilidad - VoiceOver anuncia el rasgo automáticamente
• Por ejemplo, un botón con el nombre "Siguiente botón" hace que VoiceOver realice el anuncio redundante: "Siguiente botón, botón"

Impacto en los Usuarios

Los usuarios de VoiceOver son los más afectados. Cuando un nombre accesible incluye el rasgo del elemento, VoiceOver anuncia el rasgo dos veces - por ejemplo, "Siguiente botón, botón" en lugar de "Siguiente, botón." Esto es redundante y puede ser confuso o distractivo para los usuarios de lectores de pantalla.

Confirmar Problema de Nombre Accesible Significativo

1. Active VoiceOver
2. Enfoque en el elemento
3. Ocurrirá una de las siguientes situaciones:
   • Inaccesible: VoiceOver anuncia el rasgo de accesibilidad del elemento dos veces - como parte del nombre accesible, y luego nuevamente como el rasgo (por ejemplo, "Siguiente botón, botón")
   • Accesible: VoiceOver anuncia el nombre accesible, seguido del rasgo (por ejemplo, "Siguiente, botón")

Corregir Problemas

Para resolver un problema de Nombre Accesible Significativo, asegúrese de que el nombre accesible no contenga el rasgo de accesibilidad del elemento. VoiceOver añade el rasgo automáticamente, por lo que incluirlo en el nombre resulta en un anuncio redundante.

UIKit

Para corregir en Storyboard:

1. Seleccione el elemento con un problema de MeaningfulAccessibleName.
2. Asegúrese de que el Panel de Inspectores esté visible.
3. Seleccione el Inspector de Identidad.
4. Bajo Accesibilidad, ingrese una etiqueta que coincida con el texto visible y no incluya el rasgo de accesibilidad del elemento.

Para corregir en el código, asegúrese de que el valor de la etiqueta de accesibilidad coincida o contenga todo el texto visible en el elemento, y no incluya su rasgo de accesibilidad:

button.title = "Next"
button.accessibilityTraits = .button

SwiftUI

Establezca una etiqueta de accesibilidad que contenga el texto visible y no incluya el rasgo de accesibilidad del elemento:

Button(action: {
    openMenu()
}) {
    Text("Next")
}.accessibility(label: Text("Next"))

React Native

Asegúrese de que el accessibilityLabel del elemento no contenga el valor de accessibilityRole del elemento:

<Button title='Order now' accessibilityLabel='order now' accessibilityRole='button'/>

Flutter

Los nombres accesibles deben describir el propósito del elemento. Evite nombres genéricos como "botón" o "imagen", y no incluya el rol en el nombre. El lector de pantalla anuncia el rol por separado.

  // Failing — name includes the role, screen reader says "Search button, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search button',
    onPressed: () {},
  )

  // Passing — name describes the action, screen reader says "Search, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

¿Puedo Ignorar Esta Regla?

Nombre Accesible Significativo tiene un Impacto menor para los usuarios y refuerza una práctica recomendada de Apple en lugar de un requisito estricto de WCAG. Puede desactivar completamente esta regla desde el Panel de Control Móvil, o ignorar hallazgos individuales en sus pruebas de iOS. Obtenga más información sobre ignorando reglas.

Recursos

Otros recursos

• Guías de interfaz humana de Apple
  • VoiceOver — Descripciones