Pruebas de Accesibilidad Móvil: Cumplimiento WCAG para iOS y Android

// Ejemplo de etiqueta de accesibilidad adecuada
button.accessibilityLabel = "Agregar al carrito"
button.accessibilityHint = "Agrega el artículo a tu carrito de compras"
button.accessibilityTraits = .button

// Mal ejemplo - carece de contexto
button.accessibilityLabel = "Agregar" // Demasiado vago

// Crear rotor personalizado para secciones de tabla
let customRotor = UIAccessibilityCustomRotor(name: "Secciones") { predicate in
    // Lógica de navegación personalizada
    return UIAccessibilityCustomRotorItemResult(
        targetElement: nextSection,
        targetRange: nil
    )
}
accessibilityCustomRotors = [customRotor]

// Anunciar cambios a usuarios de lector de pantalla
UIAccessibility.post(
    notification: .announcement,
    argument: "Carrito actualizado con 3 artículos"
)

// Notificar cambios de diseño
UIAccessibility.post(
    notification: .layoutChanged,
    argument: firstNewElement
)

// Imágenes decorativas
decorativeImage.isAccessibilityElement = false

// Imágenes informativas
productImage.accessibilityLabel = "Zapatos deportivos azules, talla 10"

// Imágenes complejas (gráficos, diagramas)
chartView.accessibilityLabel = "Gráfico de ingresos"
chartView.accessibilityValue = "T1: $50K, T2: $75K, T3: $100K, T4: $125K"

// Botón con descripción clara
addButton.contentDescription = "Agregar artículo al carrito"

// ImageView con descripción significativa
productImage.contentDescription = "Billetera de cuero roja con cremallera dorada"

// Imágenes decorativas - ocultar de TalkBack
decorativeIcon.importantForAccessibility =
    View.IMPORTANT_FOR_ACCESSIBILITY_NO

// Agrupar elementos relacionados
containerLayout.contentDescription = "Tarjeta de perfil de usuario"
containerLayout.importantForAccessibility =
    View.IMPORTANT_FOR_ACCESSIBILITY_YES

ViewCompat.addAccessibilityAction(
    emailItem,
    "Eliminar correo"
) { view, arguments ->
    deleteEmail(view)
    true
}

ViewCompat.addAccessibilityAction(
    emailItem,
    "Marcar como leído"
) { view, arguments ->
    markAsRead(view)
    true
}

// Anunciar cambios de contenido dinámico
statusTextView.accessibilityLiveRegion =
    View.ACCESSIBILITY_LIVE_REGION_POLITE

// Para anuncios urgentes
errorTextView.accessibilityLiveRegion =
    View.ACCESSIBILITY_LIVE_REGION_ASSERTIVE

// Anuncio programático
view.announceForAccessibility("Carga completa")

// Marcar vista como encabezado para navegación
titleTextView.accessibilityHeading = true

// O usando ViewCompat
ViewCompat.setAccessibilityHeading(titleTextView, true)

// Ejemplo iOS
saveButton.accessibilityLabel = "Guardar documento"
saveButton.accessibilityHint = "Guarda tu documento en almacenamiento en la nube"

// Ejemplo Android
saveButton.contentDescription = "Guardar documento"
saveButton.tooltipText = "Guarda tu documento en almacenamiento en la nube"

// Etiquetas dinámicas según estado
fun updatePlayButtonLabel() {
    playButton.contentDescription = when (mediaPlayer.isPlaying) {
        true -> "Pausar audio"
        false -> "Reproducir audio"
    }
}

// Carrito de compras con conteo de artículos
fun updateCartLabel(itemCount: Int) {
    cartButton.contentDescription = when (itemCount) {
        0 -> "Carrito de compras, vacío"
        1 -> "Carrito de compras, 1 artículo"
        else -> "Carrito de compras, $itemCount artículos"
    }
}

// iOS - Soportar Dynamic Type con contraste adecuado
extension UIColor {
    static func accessibleText(on background: UIColor) -> UIColor {
        // Calcular luminancia y devolver color de texto apropiado
        let backgroundLuminance = background.luminance()
        return backgroundLuminance > 0.5 ? .black : .white
    }

    func contrastRatio(with color: UIColor) -> CGFloat {
        let luminance1 = self.luminance()
        let luminance2 = color.luminance()
        let lighter = max(luminance1, luminance2)
        let darker = min(luminance1, luminance2)
        return (lighter + 0.05) / (darker + 0.05)
    }
}

// Mal: Solo el color indica estado
statusIndicator.setBackgroundColor(Color.RED) // Estado de error

// Bien: Color + icono + texto
statusIndicator.apply {
    setBackgroundColor(Color.RED)
    setImageResource(R.drawable.ic_error)
    contentDescription = "Error: Conexión fallida"
}

// Bien: Patrón + color para gráficos
chartView.apply {
    // Usar diferentes patrones/texturas para series de datos
    series1.pattern = Pattern.SOLID
    series2.pattern = Pattern.STRIPED
    series3.pattern = Pattern.DOTTED
}

// iOS - Asegurar objetivo táctil mínimo
class AccessibleButton: UIButton {
    override var intrinsicContentSize: CGSize {
        let size = super.intrinsicContentSize
        return CGSize(
            width: max(size.width, 44),
            height: max(size.height, 44)
        )
    }

    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        let expandedBounds = bounds.insetBy(dx: -10, dy: -10)
        return expandedBounds.contains(point)
    }
}

// Android - Objetivo táctil mínimo con ViewCompat
fun ensureMinimumTouchTarget(view: View) {
    ViewCompat.setMinimumWidth(view, 48.dp)
    ViewCompat.setMinimumHeight(view, 48.dp)
}

// Agregar delegado táctil para áreas clickeables pequeñas
val parent = smallIcon.parent as View
parent.post {
    val delegateArea = Rect()
    smallIcon.getHitRect(delegateArea)

    // Expandir área táctil 12dp en todas direcciones
    delegateArea.inset(-12.dp, -12.dp)

    parent.touchDelegate = TouchDelegate(delegateArea, smallIcon)
}

<!-- Ejemplo de Layout Android -->
<LinearLayout
    android:orientation="horizontal"
    android:padding="8dp">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:minWidth="48dp"
        android:layout_marginEnd="16dp"
        android:text="Cancelar" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:minWidth="48dp"
        android:text="Confirmar" />
</LinearLayout>

// iOS - Orden de enfoque personalizado
override var accessibilityElements: [Any]? {
    get {
        return [
            titleLabel,
            descriptionLabel,
            primaryButton,
            secondaryButton,
            closeButton
        ]
    }
    set {}
}

// Omitir elementos decorativos
decorativeView.isAccessibilityElement = false

// Android - Orden de recorrido de accesibilidad
titleTextView.accessibilityTraversalBefore = descriptionTextView.id
descriptionTextView.accessibilityTraversalBefore = actionButton.id

// Agrupar contenido relacionado
cardView.apply {
    importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_YES
    contentDescription = "Tarjeta de producto: ${product.name}, ${product.price}"
}

// iOS - Atrapar enfoque dentro del modal
override func accessibilityPerformEscape() -> Bool {
    dismissModal()
    return true
}

// Asegurar que el enfoque se mueva al modal cuando se muestre
UIAccessibility.post(notification: .screenChanged, argument: modalTitle)

// Anunciar cuando se carga nuevo contenido
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        if (isLastItemVisible && loadingMore) {
            recyclerView.announceForAccessibility(
                "Cargando más artículos"
            )
        }
    }
})

// Soportar Dynamic Type
titleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
titleLabel.adjustsFontForContentSizeCategory = true

// Fuentes personalizadas con escalado Dynamic Type
let customFont = UIFont(name: "CustomFont", size: 17)!
bodyLabel.font = UIFontMetrics(forTextStyle: .body)
    .scaledFont(for: customFont)
bodyLabel.adjustsFontForContentSizeCategory = true

// Escuchar cambios de tamaño
NotificationCenter.default.addObserver(
    forName: UIContentSizeCategory.didChangeNotification,
    object: nil,
    queue: .main
) { _ in
    self.updateLayout()
}

<!-- Usar unidades sp para tamaños de texto -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:textAppearance="?attr/textAppearanceBody1" />

// Manejar escalado extremo de fuentes
fun isLargeFontScale(): Boolean {
    val fontScale = resources.configuration.fontScale
    return fontScale >= 1.3f
}

// Ajustar layout para texto grande
if (isLargeFontScale()) {
    linearLayout.orientation = LinearLayout.VERTICAL
} else {
    linearLayout.orientation = LinearLayout.HORIZONTAL
}

# Lanzar desde Xcode
Xcode > Open Developer Tool > Accessibility Inspector

# Características:
# - Modo de inspección (pasar sobre elementos)
# - Pestaña de auditoría (verificaciones automatizadas)
# - Analizador de contraste de color
# - Visor de jerarquía de elementos

# Ejecutar auditoría de accesibilidad desde terminal
xcrun simctl spawn booted log stream --predicate \
  'subsystem == "com.apple.accessibility"' --level=debug

# Instalar desde Google Play Store
# O vía ADB:
adb install accessibility-scanner.apk

# Uso:
# 1. Habilitar escáner en ajustes de Accesibilidad
# 2. Tocar botón de acción flotante
# 3. Navegar a pantalla a probar
# 4. Tocar marca de verificación para escanear

func testAccessibility() {
    let app = XCUIApplication()
    app.launch()

    // Verificar que los elementos sean accesibles
    let addButton = app.buttons["Agregar al carrito"]
    XCTAssertTrue(addButton.exists)
    XCTAssertTrue(addButton.isHittable)

    // Verificar etiquetas de accesibilidad
    XCTAssertEqual(
        addButton.label,
        "Agregar al carrito"
    )

    // Verificar objetivo táctil mínimo
    let frame = addButton.frame
    XCTAssertGreaterThanOrEqual(frame.width, 44)
    XCTAssertGreaterThanOrEqual(frame.height, 44)
}

import androidx.test.espresso.accessibility.AccessibilityChecks

class AccessibilityTest {
    init {
        // Habilitar verificaciones de accesibilidad para todas las pruebas
        AccessibilityChecks.enable()
    }

    @Test
    fun testButtonAccessibility() {
        onView(withId(R.id.add_button))
            .check(matches(isDisplayed()))
            .check(matches(hasContentDescription()))
            .check(matches(hasMinimumTouchTarget(48.dp)))
    }
}

// Matcher personalizado para tamaño de objetivo táctil
fun hasMinimumTouchTarget(minSize: Int) = object : TypeSafeMatcher<View>() {
    override fun describeTo(description: Description) {
        description.appendText("tiene objetivo táctil mínimo de $minSize")
    }

    override fun matchesSafely(view: View): Boolean {
        return view.width >= minSize && view.height >= minSize
    }
}

# Fastfile
lane :accessibility_tests do
  run_tests(
    scheme: "YourApp",
    devices: ["iPhone 14 Pro"],
    only_testing: ["YourAppUITests/AccessibilityTests"]
  )

  # Ejecutar auditoría de accesibilidad personalizada
  sh("ruby scripts/accessibility_audit.rb")
end

# Script de auditoría personalizada
def audit_accessibility
  violations = []

  # Verificar imágenes sin etiquetas de accesibilidad
  violations += find_unlabeled_images

  # Verificar objetivos táctiles pequeños
  violations += find_small_touch_targets

  # Verificar bajo contraste
  violations += find_contrast_violations

  if violations.any?
    fail "Se encontraron #{violations.count} violaciones de accesibilidad"
  end
end

// build.gradle.kts
android {
    testOptions {
        unitTests {
            isIncludeAndroidResources = true
        }
    }
}

dependencies {
    androidTestImplementation("androidx.test.espresso:espresso-accessibility:3.5.1")
    androidTestImplementation("com.google.android.apps.common.testing.accessibility.framework:accessibility-test-framework:4.0.0")
}

// AccessibilityTest.kt
@RunWith(AndroidJUnit4::class)
class ContinuousAccessibilityTest {
    @get:Rule
    val activityRule = ActivityScenarioRule(MainActivity::class.java)

    @Before
    fun setup() {
        AccessibilityChecks.enable()
            .setRunChecksFromRootView(true)
            .setSuppressingResultMatcher(
                allOf(
                    matchesCheck(DuplicateSpeakableTextCheck::class.java),
                    matchesViews(withId(R.id.allowed_duplicate))
                )
            )
    }

    @Test
    fun testAllScreensAccessibility() {
        // Navegación a través de todas las pantallas principales
        // Las verificaciones de accesibilidad se ejecutan automáticamente
        navigateToHome()
        navigateToProfile()
        navigateToSettings()
    }
}

#!/bin/bash
# .git/hooks/pre-commit

echo "Ejecutando verificaciones de accesibilidad..."

# Verificar etiquetas de accesibilidad faltantes (iOS)
missing_labels=$(grep -r "UIImage\|UIButton" --include="*.swift" | \
  grep -v "accessibilityLabel" | wc -l)

if [ "$missing_labels" -gt 0 ]; then
  echo "Advertencia: Elementos UI potencialmente sin etiquetas de accesibilidad"
fi

# Verificar colores codificados (deberían usar colores semánticos)
hardcoded_colors=$(grep -r "UIColor(red:" --include="*.swift" | wc -l)

if [ "$hardcoded_colors" -gt 5 ]; then
  echo "Advertencia: Colores codificados encontrados. Considere usar colores semánticos"
fi

# Ejecutar pruebas unitarias de accesibilidad
npm run test:accessibility

if [ $? -ne 0 ]; then
  echo "Las pruebas de accesibilidad fallaron. Por favor corrija antes de hacer commit."
  exit 1
fi

echo "Verificaciones de accesibilidad pasaron!"

// accessibility-report.js
const fs = require('fs');
const { execSync } = require('child_process');

function generateAccessibilityReport() {
  const report = {
    timestamp: new Date().toISOString(),
    platform: process.env.PLATFORM,
    violations: [],
    warnings: [],
    passed: []
  };

  // Ejecutar pruebas automatizadas
  const testResults = JSON.parse(
    execSync('npm run test:accessibility:json').toString()
  );

  // Categorizar resultados
  testResults.forEach(result => {
    if (result.severity === 'error') {
      report.violations.push(result);
    } else if (result.severity === 'warning') {
      report.warnings.push(result);
    } else {
      report.passed.push(result);
    }
  });

  // Calcular puntuación de cumplimiento
  const total = report.violations.length +
                report.warnings.length +
                report.passed.length;
  report.complianceScore =
    ((report.passed.length / total) * 100).toFixed(2);

  // Generar informe HTML
  const html = generateHTMLReport(report);
  fs.writeFileSync('accessibility-report.html', html);

  // Fallar build si se encuentran violaciones críticas
  if (report.violations.length > 0) {
    console.error(`Se encontraron ${report.violations.length} violaciones de accesibilidad`);
    process.exit(1);
  }

  console.log(`Cumplimiento de accesibilidad: ${report.complianceScore}%`);
}

generateAccessibilityReport();