Pruebas de accesibilidad

Para garantizar que tu app sea accesible, verifícala con estándares públicos como las Web Content Accessibility Guidelines (WCAG) 2, la EN 301 549, y utiliza recursos como la Voluntary Product Accessibility Template (VPAT) para autoevaluar tu producto. Para más detalles sobre estas normativas, echa un vistazo a la página principal de página de accesibilidad.

Te recomendamos utilizar escáneres de accesibilidad automatizados para probar lo siguiente:

• Para Android:

  1. Instala el Accessibility Scanner para Android
  2. Habilita el Accessibility Scanner desde Ajustes de Android > Accesibilidad > Accessibility Scanner > Activado.
  3. Navega hasta el botón con icono de 'casilla de verificación' (checkbox) del Accessibility Scanner para iniciar un escaneo.

• Para iOS:

  1. Abre la carpeta iOS de tu app de Flutter en Xcode.
  2. Selecciona un simulador como objetivo y haz clic en el botón Run.
  3. En Xcode, selecciona Xcode > Open Developer Tools > Accessibility Inspector.
  4. En el Accessibility Inspector, selecciona Inspection > Enable Point to Inspect, y luego selecciona los distintos elementos de la interfaz de usuario en tu app de Flutter en ejecución para inspeccionar sus atributos de accesibilidad.
  5. En el Accessibility Inspector, selecciona Audit en la barra de herramientas y luego selecciona Run Audit para obtener un informe de posibles problemas.

• Para la web:

  1. Abre Chrome DevTools (o herramientas similares en otros navegadores).
  2. Inspecciona el árbol HTML bajo el host de semántica, que contiene los atributos ARIA generados por Flutter.
  3. En Chrome, la pestaña "Elements" tiene una subpestaña "Accessibility" que se puede utilizar para inspeccionar los datos exportados al árbol de semántica.

Prueba tu app utilizando la Accessibility Guideline API de Flutter. Esta API verifica si la UI de tu app cumple con las recomendaciones de accesibilidad de Flutter. Estas abarcan recomendaciones para contraste de texto, tamaño de objetivo y etiquetas de objetivo.

El siguiente fragmento muestra cómo utilizar la Guideline API en un Widget de ejemplo llamado AccessibleApp:

import 'package:flutter_test/flutter_test.dart';
import 'package:your_accessible_app/main.dart';
​
void main() {
  testWidgets('Follows a11y guidelines', (tester) async {
    final SemanticsHandle handle = tester.ensureSemantics();
    await tester.pumpWidget(const AccessibleApp());
​
    // Checks that tappable nodes have a minimum size of 48 by 48 pixels
    // for Android.
    await expectLater(tester, meetsGuideline(androidTapTargetGuideline));
​
    // Checks that tappable nodes have a minimum size of 44 by 44 pixels
    // for iOS.
    await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));
​
    // Checks that touch targets with a tap or long press action are labeled.
    await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));
​
    // Checks whether semantic nodes meet the minimum text contrast levels.
    // The recommended text contrast is 3:1 for larger text
    // (18 point and above regular).
    await expectLater(tester, meetsGuideline(textContrastGuideline));
    handle.dispose();
  });
}

Para probar estas evaluaciones, ejecútalas en una nueva app creada con flutter create. Cada botón en la pantalla principal de esa app sirve como un objetivo táctil con texto renderizado en una fuente de 18 puntos.

Puedes agregar pruebas de la Guideline API junto con otras pruebas de Widgets, o en un archivo separado, como test/a11y_test.dart en este ejemplo.

Puedes depurar la accesibilidad visualizando los nodos semánticos creados para tu app web utilizando la siguiente bandera de línea de comandos en modos profile y release:

flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true

Con la bandera activada, los nodos semánticos aparecen encima de los Widgets; puedes verificar que los elementos semánticos estén colocados donde deberían. Si los nodos semánticos están mal posicionados, por favor presenta un informe de error.