<div id="readability-page-1" class="page"><article data-pagefind-body=""> <div id="contents_list" markdown="1">
<h2 id="목차">목차</h2>
<ul>
<li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li>
<li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li>
<li><a href="#%EA%B5%AC%EA%B8%80-play-console%EC%97%90%EC%84%9C-%EC%A0%91%EA%B7%BC%EC%84%B1-%EA%B2%80%EC%82%AC">구글 Play Console에서 접근성 검사</a></li>
<li><a href="#%EC%9C%84%EC%A0%AF%EC%9D%98-%EC%A0%91%EA%B7%BC%EC%84%B1-%ED%96%A5%EC%83%81">위젯의 접근성 향상</a>
<ul>
<li><a href="#iconbutton%EC%9D%98-%EC%A0%91%EA%B7%BC%EC%84%B1">IconButton의 접근성</a></li>
<li><a href="#textfield%EC%9D%98-%EC%A0%91%EA%B7%BC%EC%84%B1">TextField의 접근성</a></li>
<li><a href="#%EC%A0%91%EA%B7%BC%EC%84%B1-%ED%96%A5%EC%83%81%EC%9D%84-%EC%9C%84%ED%95%9C-semantics-%EC%9C%84%EC%A0%AF">접근성 향상을 위한 Semantics 위젯</a></li>
<li><a href="#%EC%83%89%EC%83%81-%EB%8C%80%EB%B9%84%EC%99%80-%EB%B2%84%ED%8A%BC-%ED%81%AC%EA%B8%B0">색상 대비와 버튼 크기</a></li>
</ul>
</li>
<li><a href="#%EC%A0%91%EA%B7%BC%EC%84%B1-%ED%85%8C%EC%8A%A4%ED%8A%B8">접근성 테스트</a></li>
<li><a href="#%EC%99%84%EB%A3%8C">완료</a></li>
</ul>
</div>
<h2 id="개요">개요</h2>
Flutter에서는 앱의 접근성(Accessibility)을 검사하고 향상시키는 방법을 제공합니다.
<ul>
<li><a href="https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility" rel="nofollow noreferrer" target="_blank">https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility</a></li>
</ul>
이번 블로그 포스트에서는 Flutter로 개발한 앱의 접근성을 향상시키는 방법을 알아보겠습니다.
<h2 id="구글-play-console에서-접근성-검사">구글 Play Console에서 접근성 검사</h2>
구글 Play Console로 이동한 다음 <code>테스트(Testing) &gt; 사전 출시 보고서(Pre-launch report) &gt; 세부정보(Details) &gt; 접근성(Accessibility)</code>에서 다음과 같이 앱의 접근성을 검사하고 결과를 확인할 수 있습니다.
<picture>
 <source srcset="/assets/images/category/flutter/2025/accessibility/accessibility_check.avif" type="image/avif">
 <source srcset="/assets/images/category/flutter/2025/accessibility/accessibility_check.webp" type="image/webp">
 <img src="https://deku.posstree.com/assets/images/category/flutter/2025/accessibility/accessibility_check.png" alt="Flutter - Accessibility check on Google Play Console">
</picture>
앱을 배포하기전에 공개/비공개/내부 테스트를 진행한 경우, 이 부분에서 접근성 결과를 확인할 수 있습니다. 여기서 특별히 문제가 발견되지 않았다면 앱의 접근성이 양호하다고 볼 수 있습니다.
이 부분에서 문제가 발견되었다면, 이번 블로그 포스트에서 소개한 내용을 통해 앱의 접근성을 향상시킬 수 있습니다.
<h2 id="위젯의-접근성-향상">위젯의 접근성 향상</h2>
특정 위젯은 접근성 향상을 위해 추가적인 속성을 제공합니다. 접근성 향상을 위한 속성이 없는 위젯도 <code>Semantics</code> 위젯을 사용하여 접근성을 향상시킬 수 있습니다.
<h3 id="iconbutton의-접근성">IconButton의 접근성</h3>
<code>IconButton</code> 위젯을 사용하면, <code>Screen Reader</code>가 해당 위젯을 인식하지 못할 수 있습니다. 이때는 <code>Semantics</code> 위젯을 사용하여 <code>IconButton</code> 위젯을 감싸거나, <code>IconButton</code> 위젯의 <code>Tooltip</code> 속성을 사용하여 접근성을 향상시킬 수 있습니다.
<ul>
<li><code>Semantics</code> 위젯을 사용한 예시</li>
</ul>
<pre tabindex="0" data-language="dart"><code>Semantics(
 button: true,
 label: 'Add',
 child: IconButton(
 icon: Icon(Icons.add),
 onPressed: () {},
 ),
)</code></pre>
<ul>
<li><code>Tooltip</code> 속성을 사용한 예시</li>
</ul>
<pre tabindex="0" data-language="dart"><code>IconButton(
 icon: Icon(Icons.add),
 onPressed: () {},
 tooltip: 'Add',
)</code></pre>
<h3 id="textfield의-접근성">TextField의 접근성</h3>
<code>TextField</code> 위젯을 사용할 때, <code>labelText</code> 속성 또는 <code>hintText</code> 속성을 사용하여 접근성을 향상시킬 수 있습니다.
<ul>
<li><code>labelText</code> 속성을 사용한 예시</li>
</ul>
<pre tabindex="0" data-language="dart"><code>TextField(
 decoration: InputDecoration(
 labelText: 'Email',
 ),
)</code></pre>
<ul>
<li><code>hintText</code> 속성을 사용한 예시</li>
</ul>
<pre tabindex="0" data-language="dart"><code>TextField(
 decoration: InputDecoration(
 hintText: 'Email',
 ),
)</code></pre>

<h3 id="접근성-향상을-위한-semantics-위젯">접근성 향상을 위한 Semantics 위젯</h3>
<code>Semantics</code> 위젯을 사용하여 접근성을 향상시킬 수 있습니다. 예를 들어 <code>Switch</code> 위젯을 사용할 때, <code>Semantics</code> 위젯으로 <code>Switch</code> 위젯을 감싼 후, <code>label</code> 속성을 사용하여 접근성을 향상시킬 수 있습니다.
<pre tabindex="0" data-language="dart"><code>Semantics(
 label: 'Enable push notifications',
 child: Switch(
 value: _value,
 onChanged: (value) {
 setState(() {
 _value = value;
 });
 },
 ),
)</code></pre>
또한, <code>InkWell</code> 위젯을 사용할 때에도 <code>Semantics</code> 위젯을 사용하여 접근성을 향상시킬 수 있습니다.
<pre tabindex="0" data-language="dart"><code>Semantics(
 label: 'Open profile',
 child: InkWell(
 onTap: () {
 // Open profile
 },
 child: Icon(Icons.person),
 ),
)</code></pre>
<h3 id="색상-대비와-버튼-크기">색상 대비와 버튼 크기</h3>
접근성 향상을 위해 색상 대비나 버튼 크기를 조정해야할 때가 있습니다. 이 부분은 적절한 색상 대비와 버튼 크기를 사용하여 접근성을 향상시킬 수 있습니다.
적절한 색상 대비와 크기를 점검하기 위해서는 다음과 같이 <code>Flutter</code>에서 제공하는 접근성 테스트를 활용할 수 있습니다.
<h2 id="접근성-테스트">접근성 테스트</h2>
<code>Flutter</code>에서는 접근성을 위한 테스트를 제공합니다. 이를 통해 위젯이 접근성을 준수하는지 확인할 수 있습니다.
<code>Flutter</code>의 위젯을 테스트하는 코드에서 다음과 같이 접근성 테스트를 추가할 수 있습니다.
<pre tabindex="0" data-language="dart"><code>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();
});</code></pre>
이 테스트 코드를 통해, 색상 대비와 버튼 크기, 스크린 리더가 인식할 수 있는 레이블 등을 확인할 수 있습니다.
<h2 id="완료">완료</h2>
이것으로 <code>Flutter</code>로 개발한 앱의 접근성을 향상시킬 수 있는 방법에 대해 알아보았습니다. 또한 <code>Flutter</code>에서 제공하는 접근성 테스트를 통해 접근성을 준수하는지 확인하는 방법에 대해서도 알아보았습니다.
여러분도 <code>Flutter</code>로 개발한 앱의 접근성 향상을 위해 테스트 코드를 작성해 보고, 접근성 향상을 위한 방법들을 적용해 보시기 바랍니다. <code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code> <h2>앱 홍보</h2> <div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다. </div> <h2>책 홍보</h2> </article></div>

dev-yakuza

Flutter로 개발한 앱의 접근성(Accessibility)을 향상시키는 방법을 알아보겠습니다.

[Flutter] 앱 접근성(Accessibility)

댓글