flutter-improving-accessibility by flutter/skills
npx skills add https://github.com/flutter/skills --skill flutter-improving-accessibility设计布局以适应动态缩放和高可见性。Flutter 会根据操作系统级别的无障碍设置自动计算字体大小。
利用 Flutter 的无障碍功能组件目录来操作暴露给辅助技术(如 TalkBack 或 VoiceOver)的语义树。
Semantics :使用此组件为组件树添加描述其含义的注释。在构建自定义组件时,使用 SemanticsRole 枚举(例如,button、link、heading)分配特定的角色。MergeSemantics :包装复合组件,将所有子组件的语义合并为屏幕阅读器的一个可选节点。ExcludeSemantics :使用此组件来丢弃所有子组件的语义,将冗余或纯装饰性的子组件从无障碍工具中隐藏。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
Flutter Web 在单个画布上渲染 UI,需要一个专门的 DOM 层来向浏览器暴露结构。
aria-label="启用无障碍功能")来启用它。TabBar、MenuAnchor、Table)来自动映射 ARIA 角色。对于自定义组件,请显式分配 SemanticsRole 值,以确保屏幕阅读器正确解释这些元素。区分自适应和响应式设计范式,以构建通用应用程序。
复制此清单以在 UI 开发期间跟踪无障碍功能合规性:
Semantics 中,并分配适当的 SemanticsRole。MergeSemantics 对复杂的复合组件进行分组,以防止屏幕阅读器疲劳。ExcludeSemantics 将装饰性元素对屏幕阅读器隐藏。在最终确定视图或组件时运行此循环:
Semantics、调整约束或修改颜色。重复此过程,直到屏幕阅读器能够清晰、逻辑地遍历 UI。如果目标是 Web 并且需要默认启用无障碍功能,请在运行应用程序之前初始化语义绑定。
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
import 'package:flutter/foundation.dart';
void main() {
if (kIsWeb) {
SemanticsBinding.instance.ensureSemantics();
}
runApp(const MyApp());
}
如果构建一个充当列表项的自定义组件,请显式定义其语义角色,以便辅助技术和 Web ARIA 映射能够正确解释它。
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
class CustomListItem extends StatelessWidget {
final String text;
const CustomListItem({super.key, required this.text});
@override
Widget build(BuildContext context) {
return Semantics(
role: SemanticsRole.listItem,
label: text,
child: Padding(
padding: const EdgeInsets.all(12.0), // 如果可交互,确保点击目标 > 48px
child: Text(
text,
style: const TextStyle(fontSize: 16), // 确保对比度比率 > 4.5:1
),
),
);
}
}
每周安装量
1.9K
代码仓库
GitHub 星标数
808
首次出现
13 天前
安全审计
安装于
codex1.9K
gemini-cli1.9K
opencode1.9K
github-copilot1.9K
cursor1.9K
kimi-cli1.8K
Design layouts to accommodate dynamic scaling and high visibility. Flutter automatically calculates font sizes based on OS-level accessibility settings.
Utilize Flutter's catalog of accessibility widgets to manipulate the semantics tree exposed to assistive technologies (like TalkBack or VoiceOver).
Semantics : Use this to annotate the widget tree with a description of the meaning of the widgets. Assign specific roles using the SemanticsRole enum (e.g., button, link, heading) when building custom components.MergeSemantics : Wrap composite widgets to merge the semantics of all descendants into a single selectable node for screen readers.ExcludeSemantics : Use this to drop the semantics of all descendants, hiding redundant or purely decorative sub-widgets from accessibility tools.Flutter web renders UI on a single canvas, requiring a specialized DOM layer to expose structure to browsers.
aria-label="Enable accessibility").TabBar, MenuAnchor, Table) for automatic ARIA role mapping. For custom components, explicitly assign SemanticsRole values to ensure screen readers interpret the elements correctly.Differentiate between adaptive and responsive paradigms to build universal applications.
Copy this checklist to track accessibility compliance during UI development:
Semantics and assign the appropriate SemanticsRole.MergeSemantics to prevent screen reader fatigue.ExcludeSemantics.Run this loop when finalizing a view or component:
Semantics, adjust constraints, or modify colors. Repeat until the screen reader provides a clear, logical traversal of the UI.If targeting web and requiring accessibility by default, initialize the semantics binding before running the app.
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
import 'package:flutter/foundation.dart';
void main() {
if (kIsWeb) {
SemanticsBinding.instance.ensureSemantics();
}
runApp(const MyApp());
}
If building a custom widget that acts as a list item, explicitly define its semantic role so assistive technologies and web ARIA mappings interpret it correctly.
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
class CustomListItem extends StatelessWidget {
final String text;
const CustomListItem({super.key, required this.text});
@override
Widget build(BuildContext context) {
return Semantics(
role: SemanticsRole.listItem,
label: text,
child: Padding(
padding: const EdgeInsets.all(12.0), // Ensures > 48px tap target if interactive
child: Text(
text,
style: const TextStyle(fontSize: 16), // Ensure contrast ratio > 4.5:1
),
),
);
}
}
Weekly Installs
1.9K
Repository
GitHub Stars
808
First Seen
13 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex1.9K
gemini-cli1.9K
opencode1.9K
github-copilot1.9K
cursor1.9K
kimi-cli1.8K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装