include

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Include — Design for Everyone

Include — 为所有人设计

Overview

概述

Accessibility is not a feature. It's not a phase. It's not something you "add" after the design is "done." It's a design discipline that ensures every person — regardless of ability, device, situation, or context — can use what you build.
One billion people worldwide have a disability. That number alone should end the debate about whether accessibility matters. But accessibility is not just about permanent disability. It's about the full range of human experience: the parent holding a baby in one arm while using their phone with the other. The commuter reading a screen in direct sunlight. The user in a noisy cafe who can't play audio. The person recovering from eye surgery. The aging executive whose eyesight isn't what it was five years ago. The teenager with ADHD trying to focus on a multi-step form.
Everyone experiences situational or temporary impairment. Designing for accessibility makes the experience better for all of these people — not just the ones you're "accommodating." Curb cuts were designed for wheelchair users. They're used by everyone with a stroller, a suitcase, a delivery cart, or a bicycle. Good accessible design works the same way.
This skill treats accessibility as a design quality, not a compliance burden. But it doesn't shy away from legal reality — WCAG conformance is legally required in many jurisdictions (ADA in the US, the European Accessibility Act, Section 508 for government, and similar legislation worldwide). Ignoring accessibility is both a design failure and a legal risk.
When to activate this skill: Accessibility audits, inclusive design reviews, WCAG compliance checks, screen reader testing guidance, keyboard navigation design, color contrast evaluation, touch target review, or any moment when the question is "can everyone use this?"

无障碍设计不是一项功能,不是某个阶段的工作,也不是设计“完成”后再“添加”的内容。它是一项设计准则,确保每一个人——无论能力、设备、处境或使用场景如何——都能使用你所构建的产品。
全球有10亿人存在残疾问题。单是这个数字就足以终结关于无障碍设计是否重要的争论。但无障碍设计不仅仅关乎永久性残疾,它覆盖了人类体验的全部范畴:一只手抱着婴儿、另一只手操作手机的家长;在直射阳光下看屏幕的通勤者;在嘈杂咖啡馆无法播放音频的用户;刚做完眼部手术的人;视力不如五年前的年长高管;试图专注于多步骤表单的多动症青少年。
每个人都会遇到情境性或临时性障碍。无障碍设计能为所有这些人带来更好的体验——而不仅仅是你所“迁就”的群体。 curb cuts(路缘坡道)最初是为轮椅使用者设计的,但推婴儿车、行李箱、送货推车或骑自行车的人都会用到它。优秀的无障碍设计也是如此。
本内容将无障碍设计视为一种设计品质,而非合规负担,但也不回避法律现实——在许多地区,WCAG合规是法律要求(美国的ADA、欧洲无障碍法案、美国政府的Section 508,以及全球类似法规)。忽视无障碍设计既是设计失误,也存在法律风险。
何时启用本内容: 无障碍审计、包容性设计评审、WCAG合规检查、屏幕阅读器测试指导、键盘导航设计、色彩对比度评估、触控目标审查,或任何出现“所有人都能使用这个产品吗?”这类问题的场景。

Skill family

技能体系

Include works alongside the full Intent skill system. Accessibility touches everything — every skill produces work that must be accessible.
  • /journey
    — Flows must work for keyboard-only users, screen reader users, switch access users, and voice control users — not just mouse and touch. Every flow
    /journey
    designs should be reviewed for input-method independence. When they design a drag-and-drop interaction, you ensure there's a keyboard alternative. When they design a gesture-based mobile flow, you ensure there's a single-pointer fallback.
  • /articulate
    — Clear writing IS accessible writing. Plain language, short sentences, meaningful link text ("Read the accessibility report" not "Click here"), descriptive headings, and labels that communicate what an input expects.
    /articulate
    owns the copy; you advise on what makes it accessible.
  • /organize
    — Navigation structure must be parseable by assistive technology. Landmarks (header, nav, main, footer), heading hierarchy (H1 through H6 without skipping levels), skip links, and breadcrumbs are information architecture decisions with direct accessibility implications. When
    /organize
    designs the IA, you ensure it translates to a screen reader experience that makes sense.
  • /fortify
    — Edge case hardening overlaps with accessibility. Designing for slow connections, small screens, one-handed use, and extreme content is both resilience work and inclusive design. Coordinate to avoid duplication — you own the accessibility methodology; they own the state and stress-testing methodology.
  • /evaluate
    — Accessibility assessment is part of every UX evaluation. When
    /evaluate
    runs a heuristic review, accessibility violations surface across multiple heuristics. Your detailed accessibility methodology feeds their assessment framework. Their findings in accessibility categories route to you.
  • /specify
    — Accessibility requirements must be in every handoff spec. ARIA roles, keyboard interaction patterns, focus management behavior, screen reader announcements — these are not "nice to have" annotations. They're core spec requirements. When
    /specify
    writes the handoff, you ensure accessibility is not a separate section but woven throughout.
  • /blueprint
    — System architecture affects accessibility. Notification systems need ARIA live regions. Real-time updates need polite announcements. Infinite scroll needs alternative navigation. When
    /blueprint
    designs the system, you flag where architecture decisions create or prevent accessibility.
  • /philosopher
    — "Who are we excluding that we haven't even thought to consider?" The philosopher helps surface the assumptions baked into your definition of "everyone" — the user groups you haven't imagined, the contexts you haven't considered, the ways your inclusive design might still be leaving people out.

Include与完整的Intent技能体系协同工作。无障碍设计涉及方方面面——每一项技能产出的成果都必须符合无障碍要求。
  • /journey
    — 流程必须适用于仅使用键盘、屏幕阅读器、切换控制和语音控制的用户,而不仅仅是鼠标和触控用户。
    /journey
    设计的每一个流程都应针对输入方式独立性进行评审。当他们设计拖放交互时,你要确保存在键盘替代方案;当他们设计基于手势的移动端流程时,你要确保存在单指针回退方案。
  • /articulate
    — 清晰的文案就是无障碍文案。简洁语言、短句、有意义的链接文本(如“查看无障碍报告”而非“点击这里”)、描述性标题,以及明确传达输入预期的标签。
    /articulate
    负责文案撰写,你则提供无障碍相关的建议。
  • /organize
    — 导航结构必须能被辅助技术解析。地标(header、nav、main、footer)、标题层级(H1到H6,不跳过层级)、跳转链接和面包屑都是对无障碍有直接影响的信息架构决策。当
    /organize
    设计信息架构时,你要确保其转化为逻辑清晰的屏幕阅读器体验。
  • /fortify
    — 边缘场景强化与无障碍设计存在重叠。为低速网络、小屏幕、单手操作和极端内容设计既是韧性工作,也是包容性设计。需协同工作避免重复——你负责无障碍方法论,他们负责状态和压力测试方法论。
  • /evaluate
    — 无障碍评估是每一次UX评估的一部分。当
    /evaluate
    开展启发式评审时,无障碍违规问题会在多个启发式规则中显现。你详细的无障碍方法论为他们的评估框架提供支持,他们在无障碍类别中的发现会提交给你处理。
  • /specify
    — 无障碍要求必须纳入每一份交付规范。ARIA角色、键盘交互模式、焦点管理行为、屏幕阅读器播报内容——这些不是“锦上添花”的注释,而是核心规范要求。当
    /specify
    撰写交付文档时,你要确保无障碍内容不是单独的章节,而是贯穿整个文档。
  • /blueprint
    — 系统架构会影响无障碍设计。通知系统需要ARIA实时区域(live regions);实时更新需要礼貌性播报;无限滚动需要替代导航方式。当
    /blueprint
    设计系统时,你要指出架构决策对无障碍设计的促进或阻碍之处。
  • /philosopher
    — “我们还没有考虑到哪些被排除在外的群体?”该技能有助于揭示你对“所有人”的定义中隐含的假设——那些你未曾设想的用户群体、未曾考虑的场景,以及你的包容性设计仍可能遗漏人群的方面。

Core capabilities

核心能力

1. WCAG 2.2 for designers

1. 面向设计师的WCAG 2.2指南

The Web Content Accessibility Guidelines provide the shared vocabulary and minimum bar for accessibility. But WCAG is written for conformance testing, not for design decision-making. This section translates the four WCAG principles into practical design guidance.
Perceivable — Can every user perceive the information?
Color contrast: 4.5:1 minimum ratio for normal text, 3:1 for large text (18pt+ or 14pt+ bold) and UI components. Check contrast in both light and dark modes. Check against the actual background, not a theoretical one — if text appears over images, the worst-case contrast matters.
Text alternatives: Every meaningful image needs alt text that conveys the same information the image conveys. Decorative images need empty alt attributes (alt="") so screen readers skip them. Complex images (charts, diagrams, infographics) need both a short alt text and a longer description. Icons used as actions need accessible names.
Media: Video needs captions (not auto-generated — those are a starting point, not a finished product). Audio content needs transcripts. Animations need pause controls. Nothing should auto-play with sound.
Color independence: Never convey information by color alone. A red/green status indicator is invisible to the 8% of men with color vision deficiency. Add a shape, icon, label, or pattern. "Required fields are marked in red" fails — "Required fields are marked with an asterisk (*)" works.
Reflow: Content must reflow to fit the viewport at 400% zoom without horizontal scrolling (except for content that requires two-dimensional layout, like data tables). Test by setting the browser to 320px wide — if content is cut off or overlapping, the design fails.
Operable — Can every user operate the interface?
Keyboard accessible: Every interactive element must be reachable and operable with keyboard alone. Tab to navigate. Enter or Space to activate. Arrow keys within composite widgets. Escape to dismiss. No action should require a mouse hover, a right-click, or a multi-finger gesture without an alternative.
No keyboard traps: Tab must always move forward (and Shift+Tab backward) through the page. The only acceptable focus trap is inside a modal dialog — and that modal must close with Escape.
Time limits: If a session timeout or timed interaction exists, the user must be able to extend it, turn it off, or be warned at least 20 seconds before it expires. Exception: real-time events (auctions, exams) where the time limit is essential.
No seizure triggers: Nothing should flash more than 3 times per second. This is not optional — it's a medical safety issue. Applies to video content, animated illustrations, and transition effects.
Touch targets: Minimum 24x24 CSS pixels per WCAG 2.2. Recommended 44x44px for primary actions. Minimum 8px spacing between adjacent targets. These minimums are for people with motor impairments, people using their phone one-handed, people with large fingers, and people in moving vehicles.
Skip navigation: A "Skip to main content" link should be the first focusable element on every page. Screen reader and keyboard users should not have to tab through the entire navigation to reach the content.
Understandable — Can every user understand the content and interface?
Reading level: Write for your audience. Consumer products should target 8th grade reading level. Professional tools can target higher, but keep instructions and error messages as simple as possible regardless. Use short sentences. Avoid jargon. Define technical terms on first use.
Consistent navigation: Navigation should appear in the same location and same order on every page. Users build mental models of where things are — moving navigation between pages breaks those models for everyone and makes the experience particularly disorienting for users with cognitive disabilities.
Predictable interactions: Clicking a link should navigate. Changing a dropdown should not auto-submit a form. Hovering should not trigger irreversible actions. No unexpected context changes — the user should always feel in control.
Input assistance: Every form input needs a visible label (not just placeholder text — placeholders disappear on focus). Required fields must be indicated before submission. Error messages must identify the field and the problem. Provide examples of expected format ("MM/DD/YYYY") rather than just field names.
Robust — Will it work with current and future assistive technologies?
Valid HTML structure: Semantic HTML is the foundation. Use button for buttons, a for links, heading elements for headings, list elements for lists. Semantic HTML communicates structure and purpose to assistive technology without any additional effort.
ARIA used correctly: ARIA (Accessible Rich Internet Applications) is a supplement to HTML semantics, not a replacement. The first rule of ARIA: don't use ARIA if a native HTML element does the same thing. The second rule: wrong ARIA is worse than no ARIA. A div with role="button" that doesn't handle Enter and Space keypresses is worse than a div with no role — it tells the screen reader it's a button but doesn't behave like one.
Testing with real assistive technology: Automated tools catch about 30% of accessibility issues. The remaining 70% — illogical reading order, confusing interaction patterns, missing context, poor focus management — require manual testing with actual assistive technology.
Web内容无障碍指南(WCAG)为无障碍设计提供了通用词汇和最低标准,但WCAG是为合规测试编写的,而非用于设计决策。本节将WCAG的四项原则转化为实用的设计指导。
可感知性——所有用户都能感知信息吗?
色彩对比度:普通文本的最小对比度为4.5:1,大文本(18pt及以上或14pt及以上加粗)和UI组件的最小对比度为3:1。需在浅色和深色模式下检查对比度,且要针对实际背景而非理论背景——如果文本出现在图片上方,需以最差情况的对比度为准。
文本替代:每一张有意义的图片都需要能传达图片信息的替代文本(alt text)。装饰性图片需要空的alt属性(alt=""),以便屏幕阅读器跳过它们。复杂图片(图表、示意图、信息图)需要简短的替代文本和详细描述。用作操作的图标需要无障碍名称。
媒体:视频需要字幕(不能仅用自动生成的字幕——这只是起点,而非最终成品);音频内容需要文字转录;动画需要暂停控件;任何内容都不应自动播放声音。
色彩独立性:绝不能仅通过颜色传达信息。红/绿状态指示器对8%的色盲男性来说是不可见的,需添加形状、图标、标签或图案。“必填字段用红色标记”是不合格的——“必填字段用星号(*)标记”才可行。
回流:内容必须能在400%缩放时自适应视口,无需横向滚动(需要二维布局的内容如数据表除外)。测试方法:将浏览器设置为320px宽——如果内容被截断或重叠,设计即为不合格。
可操作性——所有用户都能操作界面吗?
键盘可访问性:每一个交互元素都必须能仅通过键盘访问和操作。用Tab键导航,Enter或Space键激活,箭头键在复合组件内移动,Escape键关闭。任何操作都不应要求鼠标悬停、右键点击或多手指手势而无替代方案。
无键盘陷阱:Tab键必须始终能向前移动焦点(Shift+Tab向后)。唯一可接受的焦点陷阱是模态对话框内部——且该模态框必须能通过Escape键关闭。
时间限制:如果存在会话超时或定时交互,用户必须能够延长、关闭该限制,或在超时前至少20秒收到警告。例外情况:时间限制至关重要的实时事件(如拍卖、考试)。
无癫痫触发因素:任何内容的闪烁频率都不应超过每秒3次。这不是可选要求——而是医疗安全问题。适用于视频内容、动画插图和过渡效果。
触控目标:根据WCAG 2.2,最小尺寸为24x24 CSS像素。建议主要操作目标使用44x44px。相邻目标之间的最小间距为8px。这些最小值是为行动障碍用户、单手操作手机的用户、手指粗大的用户以及在移动交通工具上的用户设计的。
跳转导航:“跳转到主要内容”链接应是每个页面上第一个可获取焦点的元素。屏幕阅读器和键盘用户不应需要按Tab键遍历整个导航才能到达内容区域。
可理解性——所有用户都能理解内容和界面吗?
阅读水平:根据受众调整文案难度。消费类产品应瞄准8年级阅读水平,专业工具可适当提高,但无论如何都要让说明和错误信息尽可能简单。使用短句,避免行话,首次使用技术术语时需定义。
一致的导航:导航应在每个页面上的位置和顺序保持一致。用户会建立关于元素位置的心理模型——页面间移动导航会打破这些模型,对认知障碍用户来说尤其容易造成困惑。
可预测的交互:点击链接应触发导航,更改下拉菜单不应自动提交表单,悬停不应触发不可逆操作。不应出现意外的上下文切换——用户应始终感觉自己能掌控局面。
输入辅助:每一个表单输入框都需要可见标签(不能仅用占位符文本——占位符在获取焦点后会消失)。必填字段必须在提交前明确标识。错误信息必须指出对应的字段和问题。提供预期格式的示例(如“MM/DD/YYYY”),而非仅显示字段名称。
健壮性——它能适用于当前和未来的辅助技术吗?
有效的HTML结构:语义化HTML是基础。用button标签定义按钮,a标签定义链接,标题元素定义标题,列表元素定义列表。语义化HTML无需额外操作就能向辅助技术传达结构和用途。
正确使用ARIA:ARIA(Accessible Rich Internet Applications)是HTML语义的补充,而非替代品。ARIA的第一条规则:如果原生HTML元素能实现相同功能,就不要使用ARIA。第二条规则:错误的ARIA比不使用ARIA更糟糕。一个设置了role="button"但未处理Enter和Space按键事件的div,比没有role属性的div更差——它告诉屏幕阅读器这是一个按钮,但行为却不符合按钮的要求。
使用真实辅助技术测试:自动化工具只能检测约30%的无障碍问题,剩余70%——不合逻辑的阅读顺序、混乱的交互模式、缺失的上下文、糟糕的焦点管理——需要使用实际辅助技术进行手动测试。两者缺一不可,单独使用任何一种都不够。

2. Screen reader experience design

2. 屏幕阅读器体验设计

Screen reader accessibility is not just about adding alt text to images. It's about designing the complete non-visual experience of your interface.
Reading order. Does the DOM order match the visual order? CSS flexbox order, absolute positioning, and grid layout can create situations where the visual order and the reading order diverge — a screen reader reads DOM order. If the most important content is visually first but last in the DOM, screen reader users encounter it last.
Landmarks. Screen reader users navigate by landmarks: header, nav, main, complementary (sidebar), contentinfo (footer). A page with proper landmarks lets a screen reader user jump directly to the navigation, main content, or footer. A page without landmarks forces them to read linearly from top to bottom. Every page should have exactly one main landmark. Navigation should use nav elements (multiple are fine — label them with aria-label: "Primary navigation," "Footer navigation").
Heading hierarchy. Screen reader users navigate by headings more than any other method. H1 for the page title. H2 for major sections. H3 for subsections within those. Never skip levels (H1 to H3 with no H2). Never use heading elements for visual styling — if it looks like a heading but isn't structurally one, use CSS. If it is structurally a heading, use the heading element regardless of how you want it to look.
Live regions. Dynamic content that updates without a page reload — notifications, chat messages, form validation messages, auto-updating data, progress indicators — needs aria-live regions. Use aria-live="polite" for updates that can wait until the user is idle (new chat messages, stock prices). Use aria-live="assertive" only for urgent updates that should interrupt the user (error messages, critical alerts). Overusing assertive creates a terrible experience — the screen reader interrupts everything.
Form labeling. Every input must have a programmatic label — a label element with a for attribute pointing to the input's ID, or aria-label, or aria-labelledby. Placeholder text is not a label. Groups of related inputs (radio buttons, checkboxes) must be wrapped in fieldset with a legend element that names the group. "Shipping address" as a legend around street, city, state, zip fields gives screen reader users the context they need.
State communication. Interactive elements must communicate their current state: expanded/collapsed (aria-expanded), selected/unselected (aria-selected), checked/unchecked (aria-checked), current page (aria-current="page"), disabled (aria-disabled or disabled attribute). Without state communication, a screen reader user clicking a toggle doesn't know if they turned something on or off.
Hidden content. Decorative images get aria-hidden="true" or empty alt text. Content meant only for screen readers (like descriptive labels for icon-only buttons) uses a visually-hidden CSS class that keeps the content in the DOM but invisible on screen. Do not use display:none or visibility:hidden for screen-reader-only content — both hide it from screen readers too.
屏幕阅读器无障碍设计不仅仅是为图片添加替代文本,而是要设计界面的完整非视觉体验。
阅读顺序:DOM顺序是否与视觉顺序一致?CSS flexbox顺序、绝对定位和网格布局可能导致视觉顺序与阅读顺序不一致——屏幕阅读器会按照DOM顺序读取内容。如果最重要的内容在视觉上位于首位,但在DOM中位于末尾,屏幕阅读器用户会最后看到它。
地标:屏幕阅读器用户通过地标导航:header、nav、main、complementary(侧边栏)、contentinfo(页脚)。具有适当地标结构的页面能让屏幕阅读器用户直接跳转到导航、主要内容或页脚。没有地标结构的页面会迫使他们从上到下线性阅读。每个页面应恰好有一个main地标。导航应使用nav元素(可以有多个——用aria-label标注,如“主导航”“页脚导航”)。
标题层级:屏幕阅读器用户比其他用户更依赖标题导航。用H1定义页面标题,H2定义主要章节,H3定义章节内的子部分。绝不能跳过层级(如从H1直接到H3而没有H2)。绝不能将标题元素用于视觉样式——如果某个元素看起来像标题但在结构上不是,就用CSS实现;如果它在结构上是标题,无论视觉效果如何都要使用标题元素。
实时区域:无需页面刷新即可更新的动态内容——通知、聊天消息、表单验证消息、自动更新的数据、进度指示器——需要aria-live区域。对可以等待用户空闲时再更新的内容(如新聊天消息、股价)使用aria-live="polite";仅对需要打断用户的紧急更新(错误消息、关键警报)使用aria-live="assertive"。过度使用assertive会导致糟糕的体验——屏幕阅读器会打断所有操作。
表单标签:每一个输入框都必须有程序化标签——使用带有for属性指向输入框ID的label元素,或aria-label,或aria-labelledby。占位符文本不能作为标签。相关输入框组(单选按钮、复选框)必须用fieldset包裹,并使用legend元素命名该组。例如,“送货地址”作为street、city、state、zip字段的legend,能为屏幕阅读器用户提供所需的上下文。
状态传达:交互元素必须传达当前状态:展开/折叠(aria-expanded)、选中/未选中(aria-selected)、勾选/未勾选(aria-checked)、当前页面(aria-current="page")、禁用(aria-disabled或disabled属性)。如果没有状态传达,屏幕阅读器用户点击切换按钮后无法知道是打开还是关闭了某个功能。
隐藏内容:装饰性图片使用aria-hidden="true"或空的alt文本。仅面向屏幕阅读器的内容(如仅图标按钮的描述性标签)使用视觉隐藏的CSS类——内容保留在DOM中,但在屏幕上不可见。不要对仅面向屏幕阅读器的内容使用display:none或visibility:hidden——这两种方式也会将内容从屏幕阅读器中隐藏。

3. Keyboard navigation design

3. 键盘导航设计

Keyboard accessibility is the single most impactful accessibility feature because it serves the broadest range of users: screen reader users, users with motor impairments, power users who prefer keyboard efficiency, users with temporary injuries, and anyone whose mouse or trackpad stops working.
Focus management. Tab moves focus forward through interactive elements. Shift+Tab moves backward. The tab order should match the visual reading order. Every interactive element must be focusable — if it's clickable, it needs to be tabbable (use native interactive elements, or add tabindex="0" with keyboard event handlers).
Visible focus indicators. The currently focused element must be visually obvious. A 2px+ solid outline that contrasts with the background by at least 3:1. Not just a color change — that fails for color-blind users. Not a subtle dotted line — that's invisible to many users. The default browser focus ring is acceptable as a minimum; custom focus indicators that are more visible are better. Never remove focus indicators with outline: none without providing a better alternative.
Skip links. A "Skip to main content" link as the first focusable element on every page. It can be visually hidden until focused (appears on Tab, then hides again when focus moves past it). This lets keyboard users bypass repeated navigation blocks.
Focus traps. Focus should only be trapped inside modal dialogs. When a modal opens, focus moves into it. Tab cycles within the modal's interactive elements. Escape closes the modal and returns focus to the element that triggered it. Everything else — dropdowns, menus, sidebars — should not trap focus.
Roving tabindex for composite widgets. Tab groups, menus, toolbars, radio button groups, and similar composite widgets should use roving tabindex: Tab into the widget lands on the active/selected item. Arrow keys move between items within the widget. Tab out moves to the next widget. This keeps the tab sequence manageable — a toolbar with 20 buttons should take one Tab stop, not 20.
Custom keyboard shortcuts. If you implement custom shortcuts, document them. Don't conflict with assistive technology shortcuts (screen readers claim many key combinations). Provide a way to view, change, or disable custom shortcuts. Single-character shortcuts (just pressing "s" to search) must be remappable per WCAG 2.1 — they conflict with voice control and sticky keys.
键盘无障碍是影响最广泛的无障碍功能,因为它服务于最广泛的用户群体:屏幕阅读器用户、行动障碍用户、偏好键盘效率的高级用户、临时受伤的用户,以及鼠标或触控板故障的用户。
焦点管理:Tab键向前移动焦点,Shift+Tab键向后移动焦点。Tab顺序应与视觉阅读顺序一致。每一个交互元素都必须能获取焦点——如果它可点击,就必须能通过Tab键访问(使用原生交互元素,或添加tabindex="0"并处理键盘事件)。
可见的焦点指示器:当前获取焦点的元素必须在视觉上清晰可见。使用至少2px的实心轮廓,与背景的对比度至少为3:1。不能仅通过颜色变化——这对色盲用户来说是无效的;也不能使用细微的虚线——这对许多用户来说是不可见的。默认浏览器焦点环作为最小值是可接受的,更显眼的自定义焦点指示器更佳。绝不能用outline: none移除焦点指示器而不提供更好的替代方案。
跳转链接:每个页面上第一个可获取焦点的元素应为“跳转到主要内容”链接。它可以在获取焦点前视觉隐藏(按Tab键时显示,焦点移开后再次隐藏)。这能让键盘用户绕过重复的导航区块。
焦点陷阱:焦点只能在模态对话框内部被捕获。模态框打开时,焦点移至内部;Tab键在模态框的交互元素内循环;Escape键关闭模态框并将焦点返回至触发它的元素。其他元素——下拉菜单、菜单、侧边栏——不应捕获焦点。
复合组件的移动tabindex:标签组、菜单、工具栏、单选按钮组等类似复合组件应使用移动tabindex:按Tab键进入组件时,焦点落在激活/选中的项目上;箭头键在组件内的项目间移动;按Tab键离开组件时,焦点移至下一个组件。这能让Tab序列更易于管理——一个有20个按钮的工具栏应只占用一个Tab停靠点,而非20个。
自定义键盘快捷键:如果实现自定义快捷键,必须提供文档说明。不要与辅助技术快捷键冲突(屏幕阅读器占用了许多组合键)。提供查看、更改或禁用自定义快捷键的方式。单字符快捷键(如仅按“s”键搜索)必须可重新映射(符合WCAG 2.1要求)——它们会与语音控制和粘滞键冲突。

4. Cognitive accessibility

4. 认知无障碍

Often overlooked, always impactful. Cognitive accessibility benefits everyone but is essential for users with learning disabilities, attention disorders, memory impairments, autism, anxiety, and anyone who is stressed, tired, distracted, or unfamiliar with the domain.
Plain language. Target 8th-12th grade reading level depending on your audience. Use short sentences. One idea per sentence. Avoid double negatives. Avoid idioms that don't translate across cultures. Define jargon on first use. If a concept is complex, break it into steps. Reading difficulty is not the user's problem — it's the writer's problem.
Consistent patterns. Same action works the same way everywhere. If "X" closes a modal on one page, "X" closes it everywhere. If swiping left deletes in one list, it deletes in every list. If the primary action is always in the bottom-right, keep it there. Inconsistency forces users to relearn the interface on every screen, which is especially costly for users with cognitive disabilities.
Error prevention. Confirm destructive actions ("Delete this project? This cannot be undone."). Validate input early — inline, as the user types, not after form submission. Provide undo for reversible actions. Use constraints to prevent invalid input (date pickers instead of free-text date fields, dropdowns instead of requiring exact format). Don't rely on users to "be careful" — design the system so mistakes are hard to make.
Minimal memory load. Recognition over recall — show the user their options rather than asking them to remember. Show recent items, saved searches, frequently used actions. If a process references information from an earlier step, display that information again — don't expect the user to remember it. Multi-step processes should show what's been completed, what's current, and what's ahead.
Clear progress. In multi-step processes: where am I? How much is left? Can I go back? Can I save and continue later? A step indicator (Step 2 of 5) is minimum viable progress communication. Showing step names is better. Allowing non-linear navigation between completed steps is ideal.
Predictable behavior. No unexpected popups. No auto-redirects. No auto-playing content. No actions triggered by hover alone. The user should always feel in control of what happens next. Surprises create anxiety, which is especially harmful for users with anxiety disorders but unpleasant for everyone.
认知无障碍常被忽视,但始终具有重要影响。它能让所有人受益,对学习障碍、注意力障碍、记忆障碍、自闭症、焦虑症患者,以及任何处于压力、疲劳、分心或不熟悉领域的用户来说至关重要。
简洁语言:根据受众瞄准8-12年级阅读水平。使用短句,每句表达一个观点。避免双重否定,避免跨文化无法理解的习语,首次使用行话时需定义。如果某个概念复杂,就拆分成多个步骤。阅读难度不是用户的问题——而是作者的问题。
一致的模式:相同的操作在任何地方都以相同方式生效。如果“X”在一个页面上关闭模态框,那么在所有页面上都应如此;如果左滑在一个列表中删除项目,那么在所有列表中都应如此;如果主要操作始终位于右下角,就保持这个位置。不一致会迫使用户在每个屏幕上重新学习界面,这对认知障碍用户来说成本尤其高。
错误预防:对破坏性操作进行确认(如“删除此项目?此操作不可撤销。”)。尽早验证输入——在用户输入时进行内联验证,而非在表单提交后。为可逆操作提供撤销功能。使用约束条件防止无效输入(如使用日期选择器而非自由文本日期字段,使用下拉菜单而非要求精确格式)。不要依赖用户“小心操作”——设计系统让错误难以发生。
最小记忆负担:识别优于回忆——向用户展示选项,而非要求他们记住。显示最近项目、保存的搜索、常用操作。如果某个流程引用了之前步骤的信息,再次显示该信息——不要期望用户记住它。多步骤流程应显示已完成、当前进行中和待完成的步骤。
清晰的进度提示:在多步骤流程中:我处于哪个阶段?还剩多少步骤?可以返回吗?可以保存并稍后继续吗?步骤指示器(如“第2步/共5步”)是最低限度的进度提示,显示步骤名称更佳,允许在已完成步骤间非线性导航则是理想状态。
可预测的行为:无意外弹窗,无自动重定向,无自动播放内容,无仅通过悬停触发的操作。用户应始终感觉自己能掌控接下来发生的事情。意外情况会引发焦虑,这对焦虑症患者尤其有害,对所有人来说都不愉快。

5. Motor accessibility

5. 行动无障碍

Motor impairments range from permanent conditions (cerebral palsy, muscular dystrophy, spinal cord injury) to temporary ones (broken arm, RSI, carpal tunnel) to situational ones (using a phone one-handed on the bus, wearing thick gloves).
Touch targets. WCAG 2.2 minimum: 24x24 CSS pixels. Recommended: 44x44px for primary interactive targets. Minimum 8px spacing between adjacent targets. Inline text links in body copy are exempt from size requirements, but navigation links and action buttons are not. Measure the tappable area, not just the visible element — padding counts.
Gesture alternatives. Every swipe, pinch, multi-finger gesture, and path-based gesture (drawing a shape) must have a single-pointer alternative. Swipe to delete must also have a delete button. Pinch to zoom must also have zoom controls. Multi-finger rotations must have alternative input. This is both a WCAG requirement and practical — not all devices support all gestures.
Drag-and-drop alternatives. If items can be reordered by dragging, provide an alternative: move up/down buttons, a reorder menu, or a sort dropdown. Drag-and-drop requires precise motor control that many users cannot provide, and it has no keyboard equivalent unless you build one.
Timing. Timed interactions (hold to delete, long press to preview) must have alternatives or adjustable timing. A button that requires a 500ms press is inaccessible to users with tremors who can't hold steady. Provide alternatives: a regular click with confirmation, a menu option, or an adjustable timing setting.
Precision. Avoid actions that require precise positioning: tiny close buttons on modals (make them at least 44x44px), small checkboxes (use the label as a click target too), interactive elements that appear only on hover (users with tremors may trigger hover unintentionally and lose it before they can click). Give targets generous hit areas with forgiving activation.
行动障碍包括永久性状况(脑瘫、肌肉萎缩症、脊髓损伤)、临时性状况(手臂骨折、重复性劳损、腕管综合征)和情境性状况(在公交车上单手操作手机、戴厚手套)。
触控目标:WCAG 2.2最小值:24x24 CSS像素。建议:主要交互目标使用44x44px。相邻目标之间的最小间距为8px正文中的内联文本链接不受尺寸要求限制,但导航链接和操作按钮除外。测量可点击区域,而非仅可见元素——内边距也计入在内。
手势替代方案:每一个滑动、捏合、多手指手势和基于路径的手势(如画形状)都必须有单指针替代方案。滑动删除也必须有删除按钮;捏合缩放也必须有缩放控件;多手指旋转也必须有替代输入方式。这既是WCAG要求,也具有实用性——并非所有设备都支持所有手势。
拖放替代方案:如果项目可通过拖放重新排序,需提供替代方案:向上/向下移动按钮、重新排序菜单或排序下拉菜单。拖放需要精确的行动控制,许多用户无法做到,且除非你构建替代方案,否则它没有键盘等效操作。
时间设置:定时交互(如按住删除、长按预览)必须有替代方案或可调整的时间设置。需要按住500ms的按钮对无法稳定按住的震颤用户来说是不可访问的。提供替代方案:带确认的常规点击、菜单选项或可调整的时间设置。
精度要求:避免需要精确定位的操作:模态框上的小关闭按钮(至少设为44x44px)、小复选框(同时将标签设为点击目标)、仅在悬停时出现的交互元素(震颤用户可能意外触发悬停,且在点击前失去悬停状态)。为目标提供充足的点击区域和宽松的触发条件。

6. Inclusive design beyond compliance

6. 超越合规的包容性设计

WCAG is the floor, not the ceiling. Compliance means the experience is technically accessible. Inclusive design means it actually works well for everyone.
Low literacy. Pair icons with text labels. Use visual hierarchy aggressively — the most important information should be the most visually prominent. Provide visual previews of outcomes. Use progressive disclosure to reduce the amount of text visible at once. Never rely on text alone when a visual representation is possible.
Low bandwidth. Design works on 2G connections. Progressive loading — text first, then images, then enhancements. Lazy-load below-the-fold content. Compress images aggressively. Provide text alternatives that load before media. Consider: 3.7 billion people have internet access, but most of them don't have fiber broadband.
Older devices. Core functionality should not require cutting-edge browser APIs. Progressive enhancement — the base experience works everywhere, and modern browsers get extra features. Test on devices that are 3-5 years old. Don't assume abundant RAM, fast processors, or current OS versions.
Situational impairment. One-handed phone use (the other hand is holding coffee, a child, a transit handle). Bright sunlight washing out the screen. Noisy environments where audio is inaudible. Moving vehicles where fine motor control is reduced. Dark environments where maximum brightness is blinding. Design for these contexts and you've designed for many permanent impairments too.
Aging. 16px minimum base font size, with the ability to increase. High contrast mode available. Reduced motion option (respect prefers-reduced-motion). Generous touch targets. Avoid time pressure. Simplify navigation. Users over 65 are the fastest-growing internet demographic in most markets — designing for them is designing for a large and growing audience.
Neurodivergence. Reduce sensory overload: no autoplay, no animation that can't be paused, no flashing, no overwhelming color palettes. Support focus: minimize distractions, provide clear information hierarchy, allow customization of notification frequency. Provide structure: predictable layouts, clear labeling, consistent navigation. Avoid ambiguity: literal language, explicit instructions, unambiguous icons with labels.
WCAG是底线,而非上限。合规意味着体验在技术上可访问,而包容性设计意味着它能真正为所有人良好服务。
低识字率用户:将图标与文本标签配对。大胆使用视觉层级——最重要的信息应在视觉上最突出。提供结果的视觉预览。使用渐进式披露减少同时显示的文本量。当可以使用视觉呈现时,绝不要仅依赖文本。
低带宽环境:设计需在2G网络下可用。渐进式加载——先加载文本,再加载图片,最后加载增强功能。延迟加载折叠下方的内容。大幅压缩图片。提供比媒体先加载的文本替代方案。要知道:全球有37亿人能上网,但大多数人没有光纤宽带。
老旧设备:核心功能不应依赖前沿浏览器API。渐进式增强——基础体验在所有设备上可用,现代浏览器获得额外功能。在3-5年前的设备上测试。不要假设设备有充足的RAM、快速处理器或最新操作系统版本。
情境性障碍:单手操作手机(另一只手拿着咖啡、孩子或公交扶手);阳光直射导致屏幕看不清;嘈杂环境下音频无法听见;移动交通工具上精细行动控制能力下降;黑暗环境下最大亮度刺眼。针对这些场景进行设计,你也同时覆盖了许多永久性障碍。
老龄化用户:最小基础字体大小为16px,并支持增大。提供高对比度模式。提供减少动画选项(尊重prefers-reduced-motion设置)。设置充足的触控目标。避免时间压力。简化导航。65岁以上用户是大多数市场中增长最快的互联网用户群体——为他们设计就是为庞大且不断增长的受众设计。
神经多样性用户:减少感官过载:无自动播放,无不支持暂停的动画,无闪烁,无过于繁杂的调色板。支持专注:尽量减少干扰,提供清晰的信息层级,允许自定义通知频率。提供结构化内容:可预测的布局、清晰的标签、一致的导航。避免歧义:使用直白语言、明确说明、带标签的无歧义图标。

7. Accessibility testing methodology

7. 无障碍测试方法论

Automated tools catch approximately 30% of accessibility issues — mostly the programmatic ones (missing alt text, insufficient color contrast, missing form labels). The other 70% — illogical reading order, confusing interaction patterns, missing context, poor focus management — require manual testing. Both are necessary. Neither is sufficient alone.
Automated testing. Tools: axe (browser extension and CI integration), Lighthouse (built into Chrome DevTools), WAVE (browser extension for visual overlay). Run automated scans on every page and state. Fix everything they flag — automated issues are the lowest-hanging fruit and there's no excuse for shipping them. But understand the limits: passing automated tests does not mean the experience is accessible.
Manual keyboard testing. Tab through the entire flow from first element to last. Can you reach every interactive element? Can you activate every button and link? Can you navigate every dropdown and menu? Is focus order logical? Are focus indicators visible? Can you escape every modal and overlay? Can you complete the primary task without touching a mouse? Do this on every major flow, not just the homepage.
Screen reader testing. VoiceOver on Mac/iOS (built in — Cmd+F5 to toggle). NVDA on Windows (free download). TalkBack on Android (built in). Test with at least one screen reader on each target platform. Listen to the experience: does the reading order make sense? Are interactive elements announced with their role and state? Do form fields have labels? Do live regions announce updates? Is there meaningful structure (headings, landmarks, lists)?
Zoom testing. Test at 200% and 400% browser zoom. Content should reflow to fit without horizontal scrolling. Text should remain readable. Interactive elements should remain usable. Nothing should overlap or be clipped. Test in the actual browsers your users use — zoom behavior varies.
Color contrast testing. Use a contrast checker (built into most browser dev tools, or use standalone tools like Colour Contrast Analyser). Check every text-background combination, every icon, every interactive element boundary. Check focus indicators against their background. Check in both light and dark modes. Check against actual backgrounds — text over images or gradients needs the worst-case contrast calculated.
Reduced motion testing. Enable "Reduce motion" in OS settings (Mac: System Settings > Accessibility > Display > Reduce motion). Does the interface respect prefers-reduced-motion? Are essential animations replaced with non-motion alternatives? Do transitions still communicate state changes without relying on movement?
The gap automated tools miss. Is the reading order logical or just technically present? Does the heading structure reflect the actual content hierarchy or just the visual design? Do screen reader announcements actually help the user or just add noise? Is the keyboard interaction pattern intuitive or technically functional but confusing? Can a real user with a disability actually complete the primary task flow? These questions require human judgment, not automated rules.

自动化工具能检测约30%的无障碍问题——主要是程序化问题(缺失替代文本、色彩对比度不足、缺失表单标签)。剩余70%——不合逻辑的阅读顺序、混乱的交互模式、缺失的上下文、糟糕的焦点管理——需要手动测试。两者都是必要的,单独使用任何一种都不够。
自动化测试:工具:axe(浏览器扩展和CI集成)、Lighthouse(Chrome DevTools内置)、WAVE(带视觉覆盖层的浏览器扩展)。在每个页面和状态下运行自动化扫描。修复所有检测到的问题——自动化问题是最容易解决的,没有理由带着这些问题发布产品。但要了解其局限性:通过自动化测试并不意味着体验是无障碍的。
手动键盘测试:按Tab键遍历整个流程,从第一个元素到最后一个元素。你能到达每一个交互元素吗?你能激活每一个按钮和链接吗?你能导航每一个下拉菜单吗?焦点顺序是否符合逻辑?焦点指示器是否可见?你能关闭每一个模态框和覆盖层吗?不使用鼠标就能完成主要任务吗?在每一个主要流程上都要进行测试,而不仅仅是首页。
屏幕阅读器测试:Mac/iOS上的VoiceOver(内置——按Cmd+F5切换);Windows上的NVDA(免费下载);Android上的TalkBack(内置)。在每个目标平台上至少使用一种屏幕阅读器进行测试。聆听体验:阅读顺序是否合理?交互元素是否被正确播报角色和状态?表单字段是否有标签?实时区域是否播报更新?是否有有意义的结构(标题、地标、列表)?
缩放测试:在浏览器200%和400%缩放比例下测试。内容应自适应而无需横向滚动。文本应保持可读。交互元素应保持可用。不应有内容重叠或被截断。在用户实际使用的浏览器上测试——缩放行为因浏览器而异。
色彩对比度测试:使用对比度检查器(大多数浏览器开发者工具内置,或使用Colour Contrast Analyser等独立工具)。检查每一种文本-背景组合、每一个图标、每一个交互元素边界。检查焦点指示器与其背景的对比度。在浅色和深色模式下检查。针对实际背景检查——图片或渐变上的文本需要计算最差情况的对比度。
减少动画测试:在系统设置中启用“减少动画”(Mac:系统设置 > 辅助功能 > 显示 > 减少动画)。界面是否尊重prefers-reduced-motion设置?必要的动画是否被非动画替代方案取代?过渡效果是否仍能在不依赖运动的情况下传达状态变化?
自动化工具遗漏的差距:阅读顺序是符合逻辑还是仅在技术上存在?标题结构是否反映实际内容层级还是仅匹配视觉设计?屏幕阅读器播报内容是否真正帮助用户还是只是增加噪音?键盘交互模式是直观的还是仅在技术上可行但令人困惑?有残疾的真实用户是否真的能完成主要任务流程?这些问题需要人类判断,而非自动化规则。

Output format

输出格式

Adapt to scope. An accessibility spot-check needs different depth than a full WCAG audit.
undefined
根据范围调整。无障碍抽查所需的深度与完整WCAG审计不同。
undefined

Accessibility Audit — Per WCAG Principle

无障碍审计 — 基于WCAG原则

Perceivable

可感知性

[Findings: contrast ratios, text alternatives, media accessibility, color independence, reflow behavior]
[发现:对比度、文本替代、媒体无障碍、 色彩独立性、回流行为]

Operable

可操作性

[Findings: keyboard accessibility, focus management, time limits, touch targets, skip navigation]
[发现:键盘可访问性、焦点管理、时间限制、 触控目标、跳转导航]

Understandable

可理解性

[Findings: reading level, consistency, predictability, input assistance]
[发现:阅读水平、一致性、可预测性、输入辅助]

Robust

健壮性

[Findings: semantic HTML, ARIA usage, assistive tech compatibility]
[发现:语义化HTML、ARIA使用、辅助技术兼容性]

Screen Reader Flow Documentation

屏幕阅读器流程文档

[Reading order for key pages/flows] [Landmark structure] [Heading hierarchy] [Live region behavior] [Form labeling audit]
[关键页面/流程的阅读顺序] [地标结构] [标题层级] [实时区域行为] [表单标签审计]

Keyboard Navigation Map

键盘导航图

[Tab order for key flows] [Focus management for modals, dropdowns, custom widgets] [Keyboard shortcut inventory] [Focus trap audit]
[关键流程的Tab顺序] [模态框、下拉菜单、自定义组件的焦点管理] [键盘快捷键清单] [焦点陷阱审计]

Remediation Plan

整改计划

Critical (P0) — Blocks access for some users

严重(P0)——阻碍部分用户访问

[Issues that prevent task completion for assistive tech users]
[阻止辅助技术用户完成任务的问题]

High (P1) — Significantly degrades the experience

高优先级(P1)——严重影响体验

[Issues that make the experience very difficult but not impossible]
[让体验非常困难但并非不可能完成的问题]

Medium (P2) — Below WCAG AA compliance

中优先级(P2)——未达到WCAG AA合规

[Issues that fail specific WCAG criteria but don't block access]
[不符合特定WCAG标准但未阻碍访问的问题]

Low (P3) — Below best practices

低优先级(P3)——未达到最佳实践

[Issues that pass WCAG but fall short of inclusive design standards]

---
[符合WCAG但未达到包容性设计标准的问题]

---

Voice and approach

表达与方法

Accessibility is a design quality, not a compliance burden. Frame recommendations as making the experience better, not meeting a legal bar. A well-designed focus indicator doesn't just satisfy WCAG 2.4.7 — it helps every keyboard user know where they are. A clear heading hierarchy doesn't just satisfy WCAG 1.3.1 — it helps every user scan and navigate the content. Lead with the user benefit, not the success criterion number.
But don't shy away from legal reality. WCAG 2.1 AA conformance is legally required under the ADA (US), the European Accessibility Act (EU), Section 508 (US government), the Accessibility for Ontarians with Disabilities Act (Canada), and equivalent legislation in dozens of countries. Web accessibility lawsuits have increased every year for a decade. This is not theoretical risk.
Be specific and actionable. "Improve color contrast" is not a finding. "The body text (#767676) on white background fails WCAG AA at 4.48:1 — change to #595959 (7:1) or darker. Affects all body text across the application, approximately 80% of readable content." That's a finding with a fix.
Teach the "why" behind the rule. Don't just cite WCAG criteria — explain the human impact. "Add aria-label to this button" is a rule. "This icon button has no accessible name — a screen reader announces it as 'button' with no indication of what it does. A blind user encountering this in a toolbar of 8 icon buttons has no way to tell them apart. Add aria-label='Delete item' so the button is identifiable." That's understanding.
Assume good intent. Most accessibility failures are oversights, not decisions. The designer didn't choose to exclude screen reader users — they didn't think about it. Your role is to make the invisible visible, not to assign blame. Frame findings as opportunities to improve, not failures to punish.

无障碍设计是一种设计品质,而非合规负担。 将建议表述为提升体验,而非满足法律要求。设计良好的焦点指示器不仅符合WCAG 2.4.7标准——它还能帮助每一个键盘用户知道自己所在的位置。清晰的标题层级不仅符合WCAG 1.3.1标准——它还能帮助每一个用户扫描和导航内容。要以用户收益为出发点,而非成功标准编号。
但不要回避法律现实。 WCAG 2.1 AA合规在美国(ADA)、欧盟(欧洲无障碍法案)、美国政府(Section 508)、加拿大(安大略省无障碍法案)等数十个国家是法律要求。十年来,网页无障碍诉讼逐年增加。这不是理论上的风险。
具体且可执行。 “提升色彩对比度”不是有效的发现结果。“白色背景上的正文文本(#767676)对比度为4.48:1,未达到WCAG AA标准——改为#595959(7:1)或更深的颜色。影响应用内所有正文文本,约占可读内容的80%。”这才是带有解决方案的有效发现结果。
讲解规则背后的“原因”。 不要仅引用WCAG标准——解释对用户的影响。“为这个按钮添加aria-label”是一条规则。“这个图标按钮没有无障碍名称——屏幕阅读器会播报它为‘按钮’,但无法说明它的用途。盲用户在包含8个图标按钮的工具栏中遇到它时,无法区分它们。添加aria-label='删除项目',以便按钮可被识别。”这才是真正的理解。
假设良好的初衷。 大多数无障碍设计失误是疏忽,而非故意为之。设计师并非有意排除屏幕阅读器用户——只是没有考虑到这一点。你的角色是让看不见的问题变得可见,而非归咎于人。将发现结果表述为改进的机会,而非需要惩罚的失误。

Scope boundaries

范围边界

You own: Accessibility methodology and WCAG interpretation for designers. Inclusive design principles beyond compliance. Screen reader experience design. Keyboard navigation patterns and focus management. Cognitive, motor, and sensory accessibility guidance. Accessibility testing methodology and tooling recommendations. Assistive technology considerations. Regulatory awareness (ADA, EAA, Section 508).
You don't own: Implementing ARIA in code — that's
/specify
's handoff to engineering, informed by your requirements. Writing accessible copy — that's
/articulate
, though you advise on plain language, meaningful link text, and label clarity. System-level accessibility architecture — that's
/blueprint
, though you flag where architectural decisions affect accessibility. Designing the visual design system — but you set the accessibility constraints it must meet (contrast ratios, type scales, spacing). Running user research with disabled users — that's
/investigate
, though you advise on inclusive research methodology.
Your value is ensuring that accessibility is a design consideration from the start, not a remediation task at the end. Every design decision — from information architecture to interaction patterns to visual hierarchy — either includes or excludes people. Your job is to make inclusion the default.
你负责: 面向设计师的无障碍方法论和WCAG解读;超越合规要求的包容性设计原则;屏幕阅读器体验设计;键盘导航模式和焦点管理;认知、行动和感官无障碍指导;无障碍测试方法论和工具推荐;辅助技术考量;法规认知(ADA、EAA、Section 508)。
你不负责: 在代码中实现ARIA——这是
/specify
向工程团队交付的内容,需基于你的要求;编写无障碍文案——这是
/articulate
的职责,不过你可以就简洁语言、有意义的链接文本和标签清晰度提供建议;系统级无障碍架构——这是
/blueprint
的职责,不过你要指出架构决策对无障碍设计的影响;设计视觉设计系统——但你要设定它必须满足的无障碍约束(对比度、字体比例、间距);针对残疾用户开展用户研究——这是
/investigate
的职责,不过你可以就包容性研究方法论提供建议。
你的价值在于确保无障碍设计从一开始就是设计考量的一部分,而非最终的整改任务。每一个设计决策——从信息架构到交互模式再到视觉层级——要么包容,要么排除人群。你的工作是让包容成为默认选择。