3.9. Accessibility

Повышает контрастность между цветами переднего и заднего планов приложения. Эту настройку можно получить из MediaQuery: MediaQuery.of(context).invertColors и переопределить через InheritedWidget:

@override
Widget build(BuildContext context) => MaterialApp(
      builder: (context, _) {
        final mediaQueryData = MediaQuery.of(context);
        return MediaQuery(
          data: mediaQueryData.copyWith(
            invertColors: false, // Переопределяем значение invertColors
          ),
          child: const HomePage(),
        );
      },
    );

Флаг контрастности invertColors в данный момент поддержан только на iOS.

Делает все шрифты устройства жирными. Эту настройку можно получить из MediaQuery: MediaQuery.of(context).boldText и аналогично переопределить через InheritedWidget:

@override
  Widget build(BuildContext context) => MaterialApp(
        builder: (context, _) {
          final mediaQueryData = MediaQuery.of(context);
          return MediaQuery(
            data: mediaQueryData.copyWith(
              boldText: false, // Переопределяем значение boldText
            ),
            child: const HomePage(),
          );
        },
      );

«Клей» между движком и слоем семантики. Подробнее было ранее рассказано в статье Bindings.

SemanticsService

Специфичный для платформы код, который работает с платформенными реализациями функциональности доступности:

• Метод announce, который позволяет отправить семантическое оповещение

  Рассмотрим простой пример работы функции announce.

  import 'package:flutter/material.dart';
  import 'package:flutter/semantics.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) => MaterialApp(
          home: Scaffold(
            body: Center(
              child: OutlinedButton(
                child: const Text('Announce message'),
                onPressed: () => SemanticsService.announce(
                  'My message',
                  TextDirection.ltr,
                ),
              ),
            ),
          ),
        );
  }
  

  Подобный код приведет к тому, что по тапу на кнопку будет произнесено сообщение "My message".

• Метод tooltip, который позволяет отправить семантическое оповещение для тултипов

  Поддерживается только Android платформой и вызывается в коде фреймворка только один раз — после показа виджета Tooltip. Выглядит как всплывающая системная подсказка, позволяющая уведомить пользователя.

  💡 SemanticsService используется в достаточно специфичных случаях. Большая часть объявлений об изменении пользовательского интерфейса и нажатиях покрывается уже имеющимся возможностями устройства. Однако бывают крайние кейсы, которые нужно дополнительно озвучивать. Хорошим примером является изменение фокуса в приложении камеры. Если включен VoiceOver и открыто приложение камеры, то каждое изменение фокуса будет сопровождаться голосом.

SemanticsEvent

События, которые отправляются приложением и обозначающие действия, которые делает пользователь. Используется для отправки в нативную часть приложения на стороне движка. Каждый Event содержит поле type, который можно считать аналогом UIAccessibility Notification на iOS и AccessibilityEvent на Android.

/// Абстрактный класс, который реализуют все события.
abstract class SemanticsEvent {
  const SemanticsEvent(this.type);
  
  /// Тип события, аналог UIAccessibility Notification/AccessibilityEvent
  final String type;

  /// Преобразует событие в Map, которая может быть закодирована с помощью
  /// [StandardMessageCodec].
  Map<String, dynamic> toMap({ int? nodeId }) {
    final Map<String, dynamic> event = <String, dynamic>{
      'type': type,
      'data': getDataMap(),
    };
    if (nodeId != null) {
      event['nodeId'] = nodeId;
    }

    return event;
  }

  /// Преобразует данные события в Map, используется методом toMap.
  Map<String, dynamic> getDataMap();
}

Рассмотрим имеющиеся во фреймворке реализации для различных событий

• AnnounceSemanticsEvent

  Событие, которое имеет тип announce и используется SemanticsService в методе announce, который мы рассмотрели ранее. Этот события используется для уведомления платформы о том, что действие следует озвучит.

• TooltipSemanticsEvent

  Событие, которое имеет тип tooltip и используется SemanticsService в методе tooltip, который мы также рассмотрели ранее. Этот события используется для уведомления платформы о том, что следует показать подсказку.

• LongPressSemanticsEvent

  Событие, которое имеет тип longPress. Используется в классе Feedback в методе forLongPress, который отправляет событие через платформенный канал SystemChannels.accessibility с именем flutter/accessibility. На устройстве после долгого нажатия это событие вызывает несколько слабых толчков вибрации.

  Данное событие используется в нескольких виджетах, например в InkWell. Если enableFeedback не был указан как параметр (т. е. он null) или enableFeedback был true и был указан параметр onLongPress, вызывается Feedback.forLongPress, который отправляет событие на сторону платформы LongPressSemanticsEvent.

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) => MaterialApp(
          home: Scaffold(
            body: Center(
              child: InkWell(
                onLongPress: () {
                  /// В момент вызова функции появится вибрация
                  print('On long press');
                },
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.green,
                ),
              ),
            ),
          ),
        );
  }
  

• TapSemanticEvent

  Событие, которое имеет тип tap и работает аналогично LongPressSemanticsEvent, используется в методе forTap. На устройстве с включенной функцией чтения экрана после нажатия вызывает слабый толчок вибрации.

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) => MaterialApp(
          home: Scaffold(
            body: Center(
              child: InkWell(
                onTap: () {
                  /// В момент вызова функции появится вибрация
                  print('On tap');
                },
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.green,
                ),
              ),
            ),
          ),
        );
  }
  

SemanticsNode и SemanticsConfiguration

Вместе с компоновкой виджетов, создаются специальные узлы SemanticsNode, который относится к одному виджету или к группе виджетов. Каждому SemanticsNode присваивается конфигурация SemanticsConfiguration.

Если заглянуть а документацию SemanticsConfiguration и почитать про параметры класса, можно обнаружить, что конфигурация задает множество значений с описанием того, что делает объект, и подходит под описания всего того, что есть в интерфейсе. Например, для объекта можно задать значения того, чем является этот объект: isButton, isTextField, isLink, задать текстовое описание с помощью attributedLabel или указать кастомное поведение, выполняющееся по нажатию на виджет, с помощью onTap.

Semantics

При разработке приложения чаще всего мы используем вспомогательные объекты, которые параметры которых используются для создания SemanticsNode и SemanticsConfiguration. Одним из таких объектов является Semantics, описательный виджет, который содержит большое количество параметров. Как и SemanticsConfiguration, этот виджет может описать все, что может показываться пользователю.

Вернемся к примеру с шаблоном и вспомним, что даже без дополнительной поддержки доступности, VoiceOver смог прочитать заголовок приложения, который находился в виджете AppBar, текст в виджете Text, кнопку и ее действие в виджете FloatingActionButton, которая использовала Icon для отображения иконки со знаком плюса. Если посмотреть на исходный код виджетов или указанных в них дочерних виджетов, то можно заметить использование виджета Semantics. Рассмотрим для примера построения заголовка AppBar:

Widget? title = widget.title;
if (title != null) {
  bool? namesRoute;
  switch (theme.platform) {
    case TargetPlatform.android:
    case TargetPlatform.fuchsia:
    case TargetPlatform.linux:
    case TargetPlatform.windows:
      namesRoute = true;
      break;
    case TargetPlatform.iOS:
    case TargetPlatform.macOS:
      break;
  }
}

title = _AppBarTitleBox(child: title);
if (!widget.excludeHeaderSemantics) {
  title = Semantics(
    namesRoute: namesRoute,
    header: true,
    child: title,
  );
}

title = DefaultTextStyle(
  style: titleTextStyle!,
  softWrap: false,
  overflow: TextOverflow.ellipsis,
  child: title,
);

Тут используется Semantics с header: true, VoiceOver прочитал title AppBar как «Заголовок <текст заголовка>».

Чтобы познакомиться с виджетом Semantics, попробуем сделать кнопку с достаточно подробным описанием для технологии чтения экрана. Первая версия будет такая:

class MyCustomButton extends StatelessWidget {
  const MyCustomButton({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('On tap');
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(16),
        ),
        padding: const EdgeInsets.all(16),
        child: const Text('Нажми на меня'),
      ),
    );
  }
}

VoiceOver или TalkBack прочитает этот элемент как «Нажми на меня». Согласитесь, не очень говорящее описание. Обновим наш код таким образом:

class MyCustomButton extends StatelessWidget {
  const MyCustomButton({super.key});

  @override
  Widget build(BuildContext context) {
    return **Semantics(
      label: 'Желтая кнопка с текстом Нажми на меня',
      button: true,
      onTap: () => ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Кнопка нажата!')),
      ),**
      child: GestureDetector(
        onTap: () {
          print('On tap');
        },
        child: Container(
          decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(16),
          ),
          padding: const EdgeInsets.all(16),
          child: const Text('Нажми на меня'),
        ),
      ),
    );
  }
}

Сравним поведение до и после добавления Semantics:

Без Semantics

С добавлением Semantics

BlockSemantics, MergeSemantics, ExcludeSemantics

Часто элементы интерфейса сложнее и состоят из нескольких элементов. Рассмотрим такой пример:

class MyCustomCard extends StatelessWidget {
  static const _cardTitle = 'Сова';
  static const _cardSubtitle = 'Что мы знаем о совах? Они являются символом игры «Что? Где? Когда?», в Греции сова символизирует мудрость и учёность, её изображение можно встретить на монетах Древней Греции и на более современных металлических кругляшах.';
  static const _cardImage =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg';

  const MyCustomCard({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('On tap');
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(16),
        ),
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              _cardTitle,
              style: TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 8),
              child: Text(
                _cardSubtitle,
                textAlign: TextAlign.center,
              ),
            ),
            Image.network(_cardImage),
          ],
        ),
      ),
    );
  }
}

Вот такой интерфейс получился:

Для технологии чтения экрана такой виджет будет читаться как «Сова, изображение, Что мы знаем о совах? Они являются символом игры “Что? Где? Когда?”, в Греции сова символизирует мудрость и учёность, её изображение можно встретить на монетах Древней Греции и на более современных металлических кругляшах».

Изображение выглядит лишним, а заголовок в целом можно и не читать, оно скорее сделано для красоты. Существует еще и другая проблема — VoiceOver считает, что на экране находится не один элемент, а несколько разных элементов. Поправим ситуацию таким образом:

class MyCustomCard extends StatelessWidget {
  static const _cardTitle = 'Сова';
  static const _cardSubtitle = 'Что мы знаем о совах? Они являются символом игры «Что? Где? Когда?», в Греции сова символизирует мудрость и учёность, её изображение можно встретить на монетах Древней Греции и на более современных металлических кругляшах.';
  static const _cardImage =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg';\

  const MyCustomCard({super.key});

  @override
  Widget build(BuildContext context) {
    return **MergeSemantics**(
      child: GestureDetector(
        onTap: () {
          print('On tap');
        },
        child: Container(
          decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(16),
          ),
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                _cardTitle,
                style: TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
              ),
              const **BlockSemantics**(
                child: Padding(
                  padding: EdgeInsets.only(top: 8),
                  child: Text(
                    _cardSubtitle,
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              **ExcludeSemantics**(
                child: Image.network(_cardImage),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Мы добавили MergeSemantics как корень виджета. Теперь все виджеты, относящиеся к semantics, будут объединены в один SemanticsNode, а читаться они будут как одно целое.

BlockSemantics блокирует все виджеты выше себя в рамках своей SemanticsNode. В текущем примере SemanticsNode ограничивается MergeSemantics. BlockSemantics делает их невидимыми для VoiceOver и Talkback, так что благодаря нему заголовок карточки "Сова" перестал читаться, ведь Text с текстом _cardTitle выше, чем BlockSemantics.

ExcludeSemantics сделал изображение невидимым для VoiceOver - теперь оно не будет озвучиваться. В отличие от BlockSemantics, ExcludeSemantics блокирует для чтения только один виджет - тот, который указан как child.

Тестировать, все ли виджеты имеют достаточно описания при включенном чтении экрана, достаточно сложно. Эту ситуацию немного исправляет showSemanticsDebugger, флаг в MaterialApp, CupertionApp и WidgetApp. Работает таким образом, что вместо виджета разработчик видит его текстовое описание, то, что будет прочитано пользователю, а также границы виджета. Например, наш финальный виджет MyCustomCard будет выглядеть таким образом: