Back to Details

ui-ux-specialist

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

♿ Skill: UI/UX & Accessibility Specialist (v1.1.0)

♿ Skill：UI/UX与无障碍专家（v1.1.0）

Executive Summary

执行摘要

The 
ui-ux-specialist
is the champion of inclusivity and technical frontend excellence. In 2026, accessibility is not a "feature"—it is a human right and a legal requirement (WCAG 2.2). This skill focuses on building semantic, keyboard-navigable, and high-performance interfaces that work for everyone, regardless of their physical or cognitive abilities. We build for Inclusive Success.
ui-ux-specialist
是包容性和前端技术卓越的践行者。在2026年，无障碍不再是一项“功能”——它是一项人权，也是法律要求（WCAG 2.2）。本Skill专注于构建语义化、支持键盘导航且高性能的界面，让所有人无论身体或认知能力如何都能使用。我们致力于实现包容性成功。

📋 Table of Contents

📋 目录

  1. Priorities for Frontend Excellence
  2. The "Do Not" List (Anti-Patterns)
  3. WCAG 2.2 AA Standards
  4. Semantic HTML & ARIA
  5. Responsive & Fluid Interaction
  6. Inclusive Design Patterns
  7. Reference Library
  1. 前端卓越优先级
  2. “切勿”清单（反模式）
  3. WCAG 2.2 AA标准
  4. 语义化HTML与ARIA
  5. 响应式流畅交互
  6. 包容性设计模式
  7. 参考库

🏗️ Priorities for Frontend Excellence

🏗️ 前端卓越优先级

  1. Semantic Integrity: Use the right HTML tag for the right job. No "div-only" interfaces.
  2. Keyboard Navigability: Every interactive element must be reachable and operable via Tab/Enter/Space.
  3. Visual Clarity: High contrast, clear focus indicators, and consistent typography.
  4. Error Resilience: Forgiving forms and clear error recovery paths.
  5. Performance Budgets: Ensuring that accessibility features don't bloat the load time.
  1. 语义完整性：为正确的场景使用正确的HTML标签。禁止仅用
    div
    构建界面。
  2. 键盘可导航性：所有交互元素必须可通过Tab/Enter/Space键访问和操作。
  3. 视觉清晰度：高对比度、清晰的焦点指示器和一致的排版。
  4. 容错性：容错表单和清晰的错误恢复路径。
  5. 性能预算：确保无障碍功能不会增加页面加载时间。

🚫 The "Do Not" List (Anti-Patterns)

🚫 “切勿”清单（反模式）

Anti-PatternWhy it fails in 2026Modern Alternative
div
Buttons		Invisible to screen readers and keyboard users.Use 
<button>
 or 
role="button"
.
Fixed Font SizesBreaks for users with visual impairments.Use 
rem
 and responsive scaling.
Color-Only StateInaccessible to color-blind users.Use Icons and Text Labels.
Missing Focus RingsConfuses keyboard users.Use 
focus-visible
 high-contrast rings.
Autoplay VideoJarring for cognitive/vestibular disorders.Use 
prefers-reduced-motion
.
反模式2026年为何不可取现代替代方案
div
按钮		屏幕阅读器和键盘用户无法识别。使用**
<button>
**或
role="button"
。
固定字体大小对视觉障碍用户不友好。使用**
rem
**和响应式缩放。
仅用颜色区分状态色盲用户无法识别。使用图标+文本标签。
缺失焦点环让键盘用户产生困惑。使用**
focus-visible
**高对比度焦点环。
自动播放视频对认知/前庭障碍用户不友好。使用**
prefers-reduced-motion
**。

📏 WCAG 2.2 AA Standards

📏 WCAG 2.2 AA标准

Compliance is mandatory:
  • Target Size: Minimum 24x24px for all touch/click areas.
  • Focus Preservation: indicators never hidden by overlays.
  • Contrast: 4.5:1 for text; 3:1 for UI elements.
See References: WCAG 2.2 for details.
合规是强制性要求：
  • 目标尺寸：所有触摸/点击区域最小为24x24px。
  • 焦点保留：焦点指示器永远不会被遮罩层隐藏。
  • 对比度：文本对比度4.5:1；UI元素对比度3:1。
详情请见参考：WCAG 2.2。

🧱 Semantic HTML & ARIA

🧱 语义化HTML与ARIA

  • Landmarks: 
    <main>
    , 
    <nav>
    , 
    <aside>
    .
  • ARIA: Only use when native HTML is insufficient.
  • Forms: Explicit labels and 
    aria-describedby
    for hints.
  • 地标标签：
    <main>
    、
    <nav>
    、
    <aside>
    。
  • ARIA：仅在原生HTML无法满足需求时使用。
  • 表单：显式标签和用于提示的
    aria-describedby
    。

📖 Reference Library

📖 参考库

Detailed deep-dives into UI/UX Implementation:
  • WCAG 2.2 Standards: Compliance and success criteria.
  • Semantic HTML & ARIA: Building a solid foundation.
  • Inclusive Design: Designing for human diversity.
  • UI Patterns: Visual and structural design standards.
Updated: January 22, 2026 - 20:05
UI/UX实现的详细深度解析：
  • WCAG 2.2标准：合规性和成功标准。
  • 语义化HTML与ARIA：构建坚实基础。
  • 包容性设计：为人类多样性设计。
  • UI模式：视觉和结构设计标准。
更新时间：2026年1月22日 - 20:05