تكرار السؤال: …
الإجابة المختصرة
تبني Flutter شجرة Semantics تقرؤها TalkBack و VoiceOver؛ أضف تسميات واضحة للعناصر التفاعلية والصور، وأخفِ العناصر الزخرفية، والتزم بحجم لمس لا يقل عن 48×48 وتباين لوني كافٍ، واختبر ذلك آليًا.
الشرح
معظم ويدجتس Material تُنشئ دلالات تلقائيًا، لكن العناصر المخصصة (مثل GestureDetector حول أيقونة) تحتاج Semantics مع label وبيان نوعها (button). يقرأ tooltip في IconButton كتسمية. استخدم ExcludeSemantics للزخارف و MergeSemantics لدمج عناصر تُقرأ كوحدة. ويتحقق flutter_test من الإرشادات عبر meetsGuideline (حجم الهدف والتباين وتسميات العناصر). ولا تعتمد على اللون وحده لنقل المعلومة، واختبر يدويًا بتشغيل قارئ الشاشة.
مثال بالكود
Semantics(
label: 'Add to favourites',
button: true,
child: GestureDetector(
onTap: addFavourite,
child: const Icon(Icons.favorite_border),
),
)
IconButton(
tooltip: 'Delete', // read by TalkBack / VoiceOver
onPressed: onDelete,
icon: const Icon(Icons.delete),
)
ExcludeSemantics(child: DecorativeBackground()) // purely visual, nothing to announce
testWidgets('meets accessibility guidelines', (tester) async {
final handle = tester.ensureSemantics();
await tester.pumpWidget(const MyApp());
await expectLater(tester, meetsGuideline(androidTapTargetGuideline));
await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));
await expectLater(tester, meetsGuideline(textContrastGuideline));
handle.dispose();
});أخطاء شائعة
- إضافة أيقونات قابلة للنقر بلا تسمية دلالية، فيقرؤها قارئ الشاشة كـ "زر" فقط دون معنى.
- الاعتماد على اللون وحده لإظهار الأخطاء أو الحالات، فلا يدركها ضعاف البصر أو عمى الألوان.