Тестирование Мобильной Доступности: Соответствие WCAG для iOS и Android

// Пример правильной метки доступности
button.accessibilityLabel = "Добавить в корзину"
button.accessibilityHint = "Добавляет товар в корзину покупок"
button.accessibilityTraits = .button

// Плохой пример - отсутствие контекста
button.accessibilityLabel = "Добавить" // Слишком расплывчато

// Создание пользовательского ротора для разделов таблицы
let customRotor = UIAccessibilityCustomRotor(name: "Разделы") { predicate in
    // Пользовательская логика навигации
    return UIAccessibilityCustomRotorItemResult(
        targetElement: nextSection,
        targetRange: nil
    )
}
accessibilityCustomRotors = [customRotor]

// Объявить изменения пользователям программы чтения с экрана
UIAccessibility.post(
    notification: .announcement,
    argument: "Корзина обновлена, содержит 3 товара"
)

// Уведомить об изменениях макета
UIAccessibility.post(
    notification: .layoutChanged,
    argument: firstNewElement
)

// Декоративные изображения
decorativeImage.isAccessibilityElement = false

// Информативные изображения
productImage.accessibilityLabel = "Синие кроссовки, размер 10"

// Сложные изображения (графики, диаграммы)
chartView.accessibilityLabel = "График доходов"
chartView.accessibilityValue = "Q1: $50K, Q2: $75K, Q3: $100K, Q4: $125K"

// Кнопка с четким описанием
addButton.contentDescription = "Добавить товар в корзину"

// ImageView с осмысленным описанием
productImage.contentDescription = "Красный кожаный кошелек с золотой молнией"

// Декоративные изображения - скрыть от TalkBack
decorativeIcon.importantForAccessibility =
    View.IMPORTANT_FOR_ACCESSIBILITY_NO

// Группировка связанных элементов
containerLayout.contentDescription = "Карточка профиля пользователя"
containerLayout.importantForAccessibility =
    View.IMPORTANT_FOR_ACCESSIBILITY_YES

ViewCompat.addAccessibilityAction(
    emailItem,
    "Удалить письмо"
) { view, arguments ->
    deleteEmail(view)
    true
}

ViewCompat.addAccessibilityAction(
    emailItem,
    "Пометить как прочитанное"
) { view, arguments ->
    markAsRead(view)
    true
}

// Объявлять изменения динамического контента
statusTextView.accessibilityLiveRegion =
    View.ACCESSIBILITY_LIVE_REGION_POLITE

// Для срочных объявлений
errorTextView.accessibilityLiveRegion =
    View.ACCESSIBILITY_LIVE_REGION_ASSERTIVE

// Программное объявление
view.announceForAccessibility("Загрузка завершена")

// Пометить представление как заголовок для навигации
titleTextView.accessibilityHeading = true

// Или используя ViewCompat
ViewCompat.setAccessibilityHeading(titleTextView, true)

// Пример iOS
saveButton.accessibilityLabel = "Сохранить документ"
saveButton.accessibilityHint = "Сохраняет ваш документ в облачное хранилище"

// Пример Android
saveButton (как обсуждается в [Cross-Platform Mobile Testing: Strategies for Multi-Device Success](/blog/cross-platform-mobile-testing)) (как обсуждается в [Appium 2.0: New Architecture and Cloud Integration for Modern Mobile Testing](/blog/appium-2-architecture-cloud)).contentDescription = "Сохранить документ"
saveButton.tooltipText = "Сохраняет ваш документ в облачное хранилище"

// Динамические метки на основе состояния
fun updatePlayButtonLabel() {
    playButton.contentDescription = when (mediaPlayer.isPlaying) {
        true -> "Приостановить аудио"
        false -> "Воспроизвести аудио"
    }
}

// Корзина с количеством товаров
fun updateCartLabel(itemCount: Int) {
    cartButton.contentDescription = when (itemCount) {
        0 -> "Корзина покупок, пуста"
        1 -> "Корзина покупок, 1 товар"
        else -> "Корзина покупок, $itemCount товаров"
    }
}

// iOS - Поддержка Dynamic Type с правильным контрастом
extension UIColor {
    static func accessibleText(on background: UIColor) -> UIColor {
        // Рассчитать яркость и вернуть подходящий цвет текста
        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)
    }
}

// Плохо: Только цвет указывает состояние
statusIndicator.setBackgroundColor(Color.RED) // Состояние ошибки

// Хорошо: Цвет + иконка + текст
statusIndicator.apply {
    setBackgroundColor(Color.RED)
    setImageResource(R.drawable.ic_error)
    contentDescription = "Ошибка: Соединение не удалось"
}

// Хорошо: Паттерн + цвет для графиков
chartView.apply {
    // Использовать разные паттерны/текстуры для серий данных
    series1.pattern = Pattern.SOLID
    series2.pattern = Pattern.STRIPED
    series3.pattern = Pattern.DOTTED
}

// iOS - Обеспечение минимальной сенсорной цели
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 - Минимальная сенсорная цель с ViewCompat
fun ensureMinimumTouchTarget(view: View) {
    ViewCompat.setMinimumWidth(view, 48.dp)
    ViewCompat.setMinimumHeight(view, 48.dp)
}

// Добавить делегата касания для маленьких кликабельных областей
val parent = smallIcon.parent as View
parent.post {
    val delegateArea = Rect()
    smallIcon.getHitRect(delegateArea)

    // Расширить область касания на 12dp во всех направлениях
    delegateArea.inset(-12.dp, -12.dp)

    parent.touchDelegate = TouchDelegate(delegateArea, smallIcon)
}

<!-- Пример Разметки 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="Отменить" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:minWidth="48dp"
        android:text="Подтвердить" />
</LinearLayout>

// iOS - Пользовательский порядок фокуса
override var accessibilityElements: [Any]? {
    get {
        return [
            titleLabel,
            descriptionLabel,
            primaryButton,
            secondaryButton,
            closeButton
        ]
    }
    set {}
}

// Пропустить декоративные элементы
decorativeView.isAccessibilityElement = false

// Android - Порядок обхода доступности
titleTextView.accessibilityTraversalBefore = descriptionTextView.id
descriptionTextView.accessibilityTraversalBefore = actionButton.id

// Группировка связанного контента
cardView.apply {
    importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_YES
    contentDescription = "Карточка товара: ${product.name}, ${product.price}"
}

// iOS - Захват фокуса в модальном окне
override func accessibilityPerformEscape() -> Bool {
    dismissModal()
    return true
}

// Обеспечить перемещение фокуса в модальное окно при показе
UIAccessibility.post(notification: .screenChanged, argument: modalTitle)

// Объявлять при загрузке нового контента
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        if (isLastItemVisible && loadingMore) {
            recyclerView.announceForAccessibility(
                "Загрузка дополнительных элементов"
            )
        }
    }
})

// Поддержка Dynamic Type
titleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
titleLabel.adjustsFontForContentSizeCategory = true

// Пользовательские шрифты с масштабированием Dynamic Type
let customFont = UIFont(name: "CustomFont", size: 17)!
bodyLabel.font = UIFontMetrics(forTextStyle: .body)
    .scaledFont(for: customFont)
bodyLabel.adjustsFontForContentSizeCategory = true

// Прослушивание изменений размера
NotificationCenter.default.addObserver(
    forName: UIContentSizeCategory.didChangeNotification,
    object: nil,
    queue: .main
) { _ in
    self.updateLayout()
}

<!-- Использовать единицы sp для размеров текста -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:textAppearance="?attr/textAppearanceBody1" />

// Обработка экстремального масштабирования шрифтов
fun isLargeFontScale(): Boolean {
    val fontScale = resources.configuration.fontScale
    return fontScale >= 1.3f
}

// Настройка макета для крупного текста
if (isLargeFontScale()) {
    linearLayout.orientation = LinearLayout.VERTICAL
} else {
    linearLayout.orientation = LinearLayout.HORIZONTAL
}

# Запуск из Xcode
Xcode > Open Developer Tool > Accessibility Inspector

# Функции:
# - Режим инспекции (наведение на элементы)
# - Вкладка аудита (автоматизированные проверки)
# - Анализатор контраста цвета
# - Просмотрщик иерархии элементов

# Запустить аудит доступности из терминала
xcrun simctl spawn booted log stream --predicate \
  'subsystem == "com.apple.accessibility"' --level=debug

# Установить из Google Play Store
# Или через ADB:
adb install accessibility-scanner.apk

# Использование:
# 1. Включить сканер в настройках Специальных возможностей
# 2. Нажать на плавающую кнопку действия
# 3. Перейти на экран для тестирования
# 4. Нажать на галочку для сканирования

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

    // Проверить доступность элементов
    let addButton = app.buttons["Добавить в корзину"]
    XCTAssertTrue(addButton.exists)
    XCTAssertTrue(addButton.isHittable)

    // Проверить метки доступности
    XCTAssertEqual(
        addButton.label,
        "Добавить в корзину"
    )

    // Проверить минимальную сенсорную цель
    let frame = addButton.frame
    XCTAssertGreaterThanOrEqual(frame.width, 44)
    XCTAssertGreaterThanOrEqual(frame.height, 44)
}

import androidx.test.espresso.accessibility.AccessibilityChecks

class AccessibilityTest {
    init {
        // Включить проверки доступности для всех тестов
        AccessibilityChecks.enable()
    }

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

// Пользовательский matcher для размера сенсорной цели
fun hasMinimumTouchTarget(minSize: Int) = object : TypeSafeMatcher<View>() {
    override fun describeTo(description: Description) {
        description.appendText("имеет минимальную сенсорную цель $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"]
  )

  # Запустить пользовательский аудит доступности
  sh("ruby scripts/accessibility_audit.rb")
end

# Пользовательский скрипт аудита
def audit_accessibility
  violations = []

  # Проверить изображения без меток доступности
  violations += find_unlabeled_images

  # Проверить маленькие сенсорные цели
  violations += find_small_touch_targets

  # Проверить низкий контраст
  violations += find_contrast_violations

  if violations.any?
    fail "Найдено #{violations.count} нарушений доступности"
  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() {
        // Навигация по всем основным экранам
        // Проверки доступности выполняются автоматически
        navigateToHome()
        navigateToProfile()
        navigateToSettings()
    }
}

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

echo "Запуск проверок доступности..."

# Проверка отсутствующих меток доступности (iOS)
missing_labels=$(grep -r "UIImage\|UIButton" --include="*.swift" | \
  grep -v "accessibilityLabel" | wc -l)

if [ "$missing_labels" -gt 0 ]; then
  echo "Предупреждение: Элементы UI потенциально без меток доступности"
fi

# Проверка жестко закодированных цветов (должны использовать семантические цвета)
hardcoded_colors=$(grep -r "UIColor(red:" --include="*.swift" | wc -l)

if [ "$hardcoded_colors" -gt 5 ]; then
  echo "Предупреждение: Найдены жестко закодированные цвета. Рассмотрите использование семантических цветов"
fi

# Запуск модульных тестов доступности
npm run test:accessibility

if [ $? -ne 0 ]; then
  echo "Тесты доступности не прошли. Пожалуйста, исправьте перед коммитом."
  exit 1
fi

echo "Проверки доступности пройдены!"

// 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: []
  };

  // Запустить автоматизированные тесты
  const testResults = JSON.parse(
    execSync('npm run test:accessibility:json').toString()
  );

  // Категоризировать результаты
  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);
    }
  });

  // Рассчитать оценку соответствия
  const total = report.violations.length +
                report.warnings.length +
                report.passed.length;
  report.complianceScore =
    ((report.passed.length / total) * 100).toFixed(2);

  // Сгенерировать HTML отчет
  const html = generateHTMLReport(report);
  fs.writeFileSync('accessibility-report.html', html);

  // Провалить сборку при обнаружении критических нарушений
  if (report.violations.length > 0) {
    console.error(`Найдено ${report.violations.length} нарушений доступности`);
    process.exit(1);
  }

  console.log(`Соответствие доступности: ${report.complianceScore}%`);
}

generateAccessibilityReport();