1
Flutter Widget Tree
2
        ↓
3
Semantics Tree (의미 정보)
4
        ↓
5
HTML DOM + ARIA 속성
6
        ↓
7
브라우저 접근성 API
8
        ↓
9
스크린 리더

1
import 'package:flutter/foundation.dart';
2
import 'package:flutter/semantics.dart';
3

4
void main() {
5
  runApp(const MyApp());
6

7
  if (kIsWeb) {
8
    SemanticsBinding.instance.ensureSemantics();
9
  }
10
}

1
// kIsWeb 사용 시 foundation.dart 임포트 필요
2
import 'package:flutter/foundation.dart';

1
// 자동으로 button 역할이 할당됨
2
ElevatedButton(
3
  onPressed: () => print('클릭'),
4
  child: Text('제출'),
5
)
6

7
// 자동으로 tablist, tab 역할이 할당됨
8
TabBar(
9
  tabs: [
10
    Tab(text: '홈'),
11
    Tab(text: '설정'),
12
  ],
13
)

1
import 'package:flutter/material.dart';
2
import 'package:flutter/semantics.dart';
3

4
class CustomButton extends StatelessWidget {
5
  final VoidCallback onTap;
6
  final Widget child;
7

8
  const CustomButton({
9
    required this.onTap,
10
    required this.child,
11
    super.key,
12
  });
13

14
  @override
15
  Widget build(BuildContext context) {
16
    return Semantics(
17
      role: SemanticsRole.button,
18
      button: true,
19
      child: GestureDetector(
20
        onTap: onTap,
21
        child: child,
22
      ),
23
    );
24
  }
25
}

1
class MyCustomListWidget extends StatelessWidget {
2
  const MyCustomListWidget({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return Semantics(
7
      role: SemanticsRole.list,
8
      explicitChildNodes: true,
9
      child: Column(
10
        children: <Widget>[
11
          Semantics(
12
            role: SemanticsRole.listItem,
13
            child: const Padding(
14
              padding: EdgeInsets.all(8.0),
15
              child: Text('첫 번째 항목'),
16
            ),
17
          ),
18
          Semantics(
19
            role: SemanticsRole.listItem,
20
            child: const Padding(
21
              padding: EdgeInsets.all(8.0),
22
              child: Text('두 번째 항목'),
23
            ),
24
          ),
25
        ],
26
      ),
27
    );
28
  }
29
}

1
// 버튼 역할
2
Semantics(
3
  role: SemanticsRole.button,
4
  button: true,
5
  label: '제출하기',
6
  child: CustomButtonWidget(),
7
)
8

9
// 링크 역할
10
Semantics(
11
  role: SemanticsRole.link,
12
  link: true,
13
  label: '자세히 보기',
14
  child: GestureDetector(
15
    onTap: () => launchUrl(uri),
16
    child: Text('자세히 보기'),
17
  ),
18
)

1
Column(
2
  crossAxisAlignment: CrossAxisAlignment.start,
3
  children: [
4
    Semantics(
5
      role: SemanticsRole.heading,
6
      header: true,
7
      child: Text(
8
        '주요 기능',
9
        style: Theme.of(context).textTheme.headlineMedium,
10
      ),
11
    ),
12
    SizedBox(height: 16),
13
    Text('기능에 대한 상세 설명...'),
14
  ],
15
)

1
Semantics(
2
  role: SemanticsRole.table,
3
  child: Table(
4
    children: [
5
      TableRow(
6
        children: [
7
          Semantics(
8
            role: SemanticsRole.cell,
9
            child: Text('이름'),
10
          ),
11
          Semantics(
12
            role: SemanticsRole.cell,
13
            child: Text('나이'),
14
          ),
15
        ],
16
      ),
17
    ],
18
  ),
19
)

1
import 'package:flutter_test/flutter_test.dart';
2

3
void main() {
4
  testWidgets('접근성 가이드라인 준수', (WidgetTester tester) async {
5
    await tester.pumpWidget(MyApp());
6

7
    // 시맨틱 정보 확인
8
    final semantics = tester.getSemantics(find.byType(CustomButton));
9
    expect(semantics.hasFlag(SemanticsFlag.isButton), isTrue);
10
  });
11
}