UX可用性和所有接口

1）为什么这很重要

在法律和伦理上：界面不应排除视力障碍，听力，运动能力，认知特征的人。
业务效果：用户越多,转换和保留越高,SEO越好,代码质量越好。
操作上：可用性是一个过程，而不是"随机虚假"。

2）基础和原则（POUR）

Perceivable（感知性）：对比度、文本替代、字幕。
Operable（可管理性）：所有内容都可以从键盘、可见焦点、暂停/停止动画中获得。
可理解性：可预测的导航，清晰的错误，简单的措辞。
Robust（可靠性）：正确的HTML/ARIA语义,与辅助技术的兼容性。

3）语义，标题和ARIA

语义标记以前是ARIA：'<button>','<nav>','<form>','<table>'-按预期。
标题层次结构：每个页面一个'<h1>，接下来是逻辑结构'<h2>'-'<h3>'。
Landmarks：'<header>','<main>','<aside>','<footer>','<nav>'-帮助屏幕阅读器。
ARIA仅在需要时："role"，"aria-label"，"aria-describedby"，"aria-expanded"，"aria-live"。
通过"aria-invalid"，"aria-errormessage"的状态/错误。

4）键盘和焦点管理

完整的键盘可控性："Tab/Shift+Tab"-顺序，"Enter/Space"-激活，"Esc"-输出。
可见的焦点始终是；不要断开连线。
焦点陷阱：在调制解调器中-循环焦点，关闭后焦点回到源头。
隐藏的元素不应按排序排列（"display：none"，"aria-hidden="true"）。
跳转链接："Skip to main content"-在页面开头。

5）颜色，对比度和印刷品

文本对比：至少4。普通文本为5：1，主要文本为3：1。
不要仅仅依靠颜色：复制图标/模式/签名。
点击目标的大小：最少40-48 px，周围有足够的字段。
字体：可读耳机,字符串1.4–1.6、45-90字符串的长度。

6）运动，动画和癫痫发作

尊重系统标记-添加简化的动画/禁用视差。
避免闪烁>3次/秒。
所有自动驾驶都必须具有Pause/Stop/Hide。

7）形式，错误和验证

明确链接标签和字段："<label for="id">"。
播放器不是标签。
字段旁边和顶部错误摘要中的错误消息；通过"aria-describedby"链接。
解释输入格式，示例，掩码；指定单位和货币。
错误时不要重置已填充的字段；保持对问题领域的关注。

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8）组件和交互： 模式

按钮vs链接：动作='<button>'，过渡='<a>'。
禁忌/手风琴：导航箭头，"aria-controls"，"aria-selected"。
调制解调器/对话：'role='dialog'，'aria-modal='true'，焦点陷阱'Esc'关闭。
Tooltip/Popover：键盘上的可用性,定时器不会干扰阅读。
Drag＆Drop：替代方案-"上下移动"按钮，键盘箭头；不仅仅是鼠标。

9）媒体： 视频/音频/图形

视频：字幕，解密（transcript），备用音频描述轨道（AD）。
音频：文本解密。
图表/图表：文本摘要（"重要内容"），数据表，轴描述性签名。
现场区域：'aria-live='polite'/'assertive'-小心不要太频繁"尖叫"。

10）表格和清单

11） i18n、locali和RTL

Html根上的"lang"属性；本地数字/日期/货币格式。
RTL支持（阿拉伯语/希伯来语）：图标镜像，导航顺序，游标。
避免在图标中缝制单词（文本必须可翻译）。
简单的措辞，避免行话；术语表。

12）时间，会议，kapchi和替代品

Taymauts-带有警告和扩展选项。
CAPTCHA：更喜欢替代品（问题，看不见的机器人分析仪，邮件/电话确认）；如果使用的是文本替代品，而不仅仅是视觉。
身份验证：支持密码管理器,"显示密码",WebAuthn。

13）感官和运动障碍的可用性

手势必须具有等效的点击/键盘。
不需要长时间扣留/双击,别无选择。
"Pointer cancellation"：必须在放手时执行动作，而不是"按下"以提供取消的机会。

14）状态、通知和异同

对于动态消息使用'role='status'/'alert'。
不要用"粘性"横幅覆盖焦点。
Toast通知-在焦点/悬停和键盘访问时暂停。

15）测试计划（手动和汽车）

• 仅通过键盘通过所有关键脚本。
• 检查每个项目的焦点可见性。
• 放大到200%-接口保持功能,没有水平滚动。
• 启用"减少移动"系统模式-不会干扰动画。
• 使用屏幕阅读器（NVDA/VoiceOver）通过脚本,确保正确的角色/标签/顺序。

• 组件级别的可用性。
• 检查对比，替代文本，标题顺序，ARIA有效性。
• 关键屏幕的语义（role tree）快照。

16）可用性质量指标

A11y Coverage：通过支票单的组件份额。
Keyboard-only Pass Rate：键盘通过的脚本百分比。
Contrast Violations/1k元素。
SR Flow Time：使用屏幕阅读器通过脚本的时间。
用户反馈：关于可用性、响应时间和修复的投诉。

17）组件支票清单

• 没有冗余ARIA的正确语义/角色
• 签名的标签,'aria-'是正确的
• 完全键盘操控,可见焦点
• 正常文本/图标/边界的对比
• 错误和状态由Scrinrider发声
• prefers-reduced动作的尊重
• 点击区域大小≥ 40-48 px
• 本地化和RTL不会破坏布局

18）反模式

没有角色/键盘的"Div按钮"。
隐藏焦点"outline： none"别无选择。
播放器代替标签。
错误仅限于颜色。
调制解调器没有焦点陷阱，没有"Esc"。
没有键盘的仅拖曳。
没有禁用选项的长自动滚动/视差。

19）角色和过程

团队中的A11 y所有者（产品/设计/Dev）。
Dan的定义（DoD）包括可用性。
设计评论：检查对比度，焦点，标签。
评论代码：语义/ARIA，键盘测试。
定期审核和改进计划。

20）迭代实现

• 语义/标题，对比，焦点和键盘，基本形式和错误。

• 调制解调器，禁忌/手风琴，带文本摘要的表格/图形，视频字幕，减少的动画。

• CI中的自动测试，RTL/i18n，度量，定期审核，团队培训。

21）模式和嗅觉

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22） Mini-FAQ

是否需要单独的"视障人士版本"？
没有。一个自适应的可用版本，适用于所有具有设置的人。

仅检查对比度是否足够?

没有。对比只是其中的一部分。需要键盘，焦点，语义，表格错误，媒体等。

ARIA会决定一切吗？
ARIA不会纠正不正确的语义。首先是正确的标签，然后是ARIA澄清。

结果

可用性是系统学科：语义 键盘/焦点 对比/颜色 形式/错误 媒体/图形 测试计划和指标。让可用性成为DoD和团队文化的一部分-您的产品将变得非常多功能、可靠和方便。