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和團隊文化的一部分-您的產品將變得非常多功能、可靠和方便。