[Flutter] 앱 접근성(Accessibility)

개요

Flutter에서는 앱의 접근성(Accessibility)을 검사하고 향상시키는 방법을 제공합니다.

https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility

이번 블로그 포스트에서는 Flutter로 개발한 앱의 접근성을 향상시키는 방법을 알아보겠습니다.

구글 Play Console에서 접근성 검사

구글 Play Console로 이동한 다음 테스트(Testing) > 사전 출시 보고서(Pre-launch report) > 세부정보(Details) > 접근성(Accessibility)에서 다음과 같이 앱의 접근성을 검사하고 결과를 확인할 수 있습니다.

Flutter - Accessibility check on Google Play Console

앱을 배포하기전에 공개/비공개/내부 테스트를 진행한 경우, 이 부분에서 접근성 결과를 확인할 수 있습니다. 여기서 특별히 문제가 발견되지 않았다면 앱의 접근성이 양호하다고 볼 수 있습니다.

이 부분에서 문제가 발견되었다면, 이번 블로그 포스트에서 소개한 내용을 통해 앱의 접근성을 향상시킬 수 있습니다.

위젯의 접근성 향상

특정 위젯은 접근성 향상을 위해 추가적인 속성을 제공합니다. 접근성 향상을 위한 속성이 없는 위젯도 Semantics 위젯을 사용하여 접근성을 향상시킬 수 있습니다.

IconButton의 접근성

IconButton 위젯을 사용하면, Screen Reader가 해당 위젯을 인식하지 못할 수 있습니다. 이때는 Semantics 위젯을 사용하여 IconButton 위젯을 감싸거나, IconButton 위젯의 Tooltip 속성을 사용하여 접근성을 향상시킬 수 있습니다.

Semantics 위젯을 사용한 예시

Semantics(
  button: true,
  label: 'Add',
  child: IconButton(
    icon: Icon(Icons.add),
    onPressed: () {},
  ),
)

Tooltip 속성을 사용한 예시

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {},
  tooltip: 'Add',
)

TextField의 접근성

TextField 위젯을 사용할 때, labelText 속성 또는 hintText 속성을 사용하여 접근성을 향상시킬 수 있습니다.

labelText 속성을 사용한 예시

TextField(
  decoration: InputDecoration(
    labelText: 'Email',
  ),
)

hintText 속성을 사용한 예시

TextField(
  decoration: InputDecoration(
    hintText: 'Email',
  ),
)

접근성 향상을 위한 Semantics 위젯

Semantics 위젯을 사용하여 접근성을 향상시킬 수 있습니다. 예를 들어 Switch 위젯을 사용할 때, Semantics 위젯으로 Switch 위젯을 감싼 후, label 속성을 사용하여 접근성을 향상시킬 수 있습니다.

Semantics(
  label: 'Enable push notifications',
  child: Switch(
    value: _value,
    onChanged: (value) {
      setState(() {
        _value = value;
      });
    },
  ),
)

또한, InkWell 위젯을 사용할 때에도 Semantics 위젯을 사용하여 접근성을 향상시킬 수 있습니다.

Semantics(
  label: 'Open profile',
  child: InkWell(
    onTap: () {
      // Open profile
    },
    child: Icon(Icons.person),
  ),
)

색상 대비와 버튼 크기

접근성 향상을 위해 색상 대비나 버튼 크기를 조정해야할 때가 있습니다. 이 부분은 적절한 색상 대비와 버튼 크기를 사용하여 접근성을 향상시킬 수 있습니다.

적절한 색상 대비와 크기를 점검하기 위해서는 다음과 같이 Flutter에서 제공하는 접근성 테스트를 활용할 수 있습니다.

접근성 테스트

Flutter에서는 접근성을 위한 테스트를 제공합니다. 이를 통해 위젯이 접근성을 준수하는지 확인할 수 있습니다.

Flutter의 위젯을 테스트하는 코드에서 다음과 같이 접근성 테스트를 추가할 수 있습니다.

testWidgets('Check accessibility', (WidgetTester tester) async {
  final SemanticsHandle handle = tester.ensureSemantics();

  await tester.pumpWidget(TargetWidget());

  await expectLater(tester, meetsGuideline(androidTapTargetGuideline));
  await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));
  await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));
  await expectLater(tester, meetsGuideline(textContrastGuideline));
  handle.dispose();
});