Remediación del Escáner de Accesibilidad

¿Está su equipo usando el Escáner de Accesibilidad de Android de Google?

Esta sección proporcionará consejos de remediación para las reglas que verifica el escáner. Lea más sobre cómo aprovechar Escáner de Accesibilidad y Axe DevTools Mobile.

Visite las directrices del Escáner de Accesibilidad de Google para ver su lista completa de verificaciones actuales, descripciones y actualizaciones.

Etiquetado de Contenido

Falta de Etiqueta de Elemento

El contenido dentro de la vista puede estar perdiendo información contextual.

Para cualquier vista que proporcione información al usuario, proporcione una de las siguientes para resolver este problema de accesibilidad:

• android:contentDescription: En la mayoría de los casos, añadir una descripción del contenido es todo lo que se necesita.
• android:hint: Se pueden añadir sugerencias para describir el tipo de datos que el usuario debe introducir en vistas de texto editables.
• android:labelFor: Esta etiqueta le permitirá asignar una vista como etiqueta para otra vista.

Imágenes Decorativas

Las imágenes decorativas que no proporcionan información importante pueden marcarse como no importantes para la accesibilidad.

Para XML: android:importantForAccessibility="no"

O para Compose:

Image(
      imageVector = Icons.Filled.AccountCircle,
      contentDescription = null // decorative
    )

Elemento Etiquetado con Tipo o Estado

Una de sus vistas puede tener un estado redundante. Android proporciona vistas predeterminadas con estados como activado, desactivado, marcado o no marcado. Añadir un estado a la lectura puede resultar en una experiencia confusa.

Para resolver este problema de accesibilidad, asegúrese de que:

• Las casillas de verificación tienen una etiqueta asociada para contexto
• Las descripciones de estado no se añaden a la descripción de la vista

<TextView
      android:id="@+id/edit_text_label"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:labelFor="@+id/example"
      android:text="Check Label" />

<androidx.appcompat.widget.AppCompatCheckBox
      android:id="@+id/example"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/with_text"/>

Descripciones de Elementos Duplicadas

Se encontraron varias vistas dentro de la jerarquía que tienen descripciones idénticas.

Esto no es un fallo de WCAG y puede haber casos donde esto sea un requisito. Si las descripciones de contenido están duplicadas, asegúrese de que cada una proporcione suficiente contexto para que el usuario sepa cuál sería el resultado de interactuar con la vista.

Propósito del Enlace Poco Claro

Cualquier enlace debe contener suficiente texto para transmitir su propósito. Al usar descripciones como "Haz Clic Aquí", debe asegurarse de que el texto circundante contenga suficiente información para descifrar el propósito del enlace.

Implementación - Elementos Clicables

Enlaces Clicables

Los enlaces deben mostrarse claramente y ser fácilmente accesibles desde el menú contextual local. Google sugiere utilizar URLSpan o la clase de conveniencia Linkify para mostrar hipervínculos en la interfaz de usuario de una aplicación para aumentar la probabilidad de que estos enlaces sean detectados y activados.

Vistas Clicables Duplicadas

Uno de los elementos clicables en su vista se superpone con otro elemento clicable. Puede resolver este problema de accesibilidad de una de las siguientes maneras:

• Mover los elementos clicables para que no colisionen o se superpongan.
• Si las vistas no pueden moverse, asegúrese de que ambas vistas tengan un área de toque de tamaño adecuado y que cualquiera pueda interactuar con los elementos sin problema.

Etiqueta de Elemento Editable

Los campos editables deben tener una etiqueta que describa el propósito del campo.

Un ejemplo con EditText:

<TextView
      android:id="@+id/edit_text_label"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:labelFor="@+id/edit_text"
      android:text="Enter your username" />

<EditText
      android:id="@+id/edit_text"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:hint="Hint" />

Un ejemplo con CheckBox:

Utilice un TextView y asígnelo con el elemento CheckBox:

val checkBox: CheckBox = ....... // Role: CheckBox
val label: TextView = ....... // Role: Label
label.setLabelFor(checkBox.getId()) // Associate the Checkbox with its Name

Tipo de Elemento no Compatible

Parece que puede tener una vista personalizada. Edite el AccessibilityNodeInfo para proporcionar el className con un propósito apropiado para la vista.

val frameLayout = findViewById<FrameLayout>(R.id.custom_view)
frameLayout.setAccessibilityDelegate(object : View.AccessibilityDelegate() {
      override fun onInitializeAccessibilityNodeInfo(
          host: View,
          info: AccessibilityNodeInfo
      ) {
            info.className = "ClassName"
            info.contentDescription = "ContentDescription"
            super.onInitializeAccessibilityNodeInfo(host, info)           
      }
})

Orden de Travesía

Si puede navegar por sus vistas usando TalkBack de una manera que tenga sentido contextual, esto puede ser un falso positivo y no necesita ser abordado.

Si TalkBack no proporciona la misma información que al leer la aplicación sin tecnología asistiva, puede considerar editar el orden de las vistas. Dado que puede ser complicado acertar y puede incluir accidentalmente añadir un bucle infinito, aconsejamos no editar el orden de travesía. Para alterar el orden de travesía, utilice android:accessibilityTraversalBefore y android:accessibilityTraversalAfter.

Escalado de Texto

Cualquier elemento de texto debe usar píxeles escalables (sp) en lugar de píxeles independientes de densidad (dp) para permitir que el texto se ajuste a la configuración de accesibilidad del tamaño de fuente del dispositivo.

Tamaño del Área Táctil

Para recomendaciones y consejos de remedio sobre áreas visuales y pulsables de controles activos, consulte la Regla de Tamaño del Área Táctil de nuestra biblioteca Android.

Bajo Contraste

El contraste de color entre el texto y su fondo debe cumplir con los umbrales mínimos de relación de WCAG 2 AA. Aprenda sobre esta relación y encuentre consejos para remediar el Bajo Contraste en la Regla de Contraste de Color de nuestra biblioteca Android.