輔助功能：在密碼輸入中顯示/隱藏密碼按鈕

Question

密碼輸入通常帶有顯示/隱藏按鈕，但我在 web 上幾乎沒有發現任何與它們相關的可訪問性問題 - 我應該將任何類型的 ARIA 屬性附加到按鈕或密碼輸入嗎？ 它是一個復選框是否有意義，或者是一個觸發 JS 以實現效果的按鈕也很好？

不確定我應該注意什么，因為我不是很熟悉，但想了解可訪問性最佳實踐。

Answer 1

有趣的問題。

這可能是我能找到的關於這個主題的最相關的文獻：

披露是控制部分內容的可見性的按鈕。 當受控內容被隱藏時，它通常被設計為帶有向右箭頭或三角形的典型按鈕，以暗示激活按鈕將顯示其他內容。 當內容可見時，箭頭或三角形通常指向下方。

（和）

• 顯示和隱藏內容的元素具有button角色。
• 當內容可見時，具有角色按鈕的元素將aria-expanded設置為 true。 當內容區域被隱藏時，它被設置為 false。
• 可選地，具有角色按鈕的元素具有為aria-controls指定的值，該值引用包含所有顯示或隱藏內容的元素。

見https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure

我根本不是可用性專家，但看到與您的用例的聯系似乎並不瘋狂。 所以在這里回答你的問題是我要應用的 ARIA 屬性，以及一些 JavaScript。

 function toggle_visibility(el) { const control = el.getAttribute('aria-controls'); const expanded = el.getAttribute('aria-expanded') === 'false'; document.querySelector(`#${control}`).type = expanded? 'text': 'password'; el.setAttribute('aria-expanded', String(expanded)); el.textContent = expanded? 'hide': 'show'; } document.querySelector('button').addEventListener('click', ({ target }) => toggle_visibility(target));

 <div> <label for="password">password</label> <input type="password" id="password"> <button aria-controls="password" aria-expanded="false">show</button> </div>

這是 Chrome 開發工具的截屏視頻。 請注意在“輔助功能”面板中我們如何能夠引用密碼控件。

Answer 2

由於到目前為止給出的答案都沒有完全涵蓋該主題，因此我將嘗試在這里進行。
你至少有三種可能性：

1. 一個復選框；
2. 一個切換按鈕；
3. 帶有更改文本的按鈕。

復選框

這是最簡單的解決方案。

<label><input id="showPwd" type="checkbox"> Show Password</label>

然后添加一些 JavaScript 將您的密碼輸入類型從清除復選框時的password更改為選中時的text 。
從用戶的角度來看，這個解決方案也是最明顯的：屏幕閱讀器用戶和其他輔助技術的用戶通常很容易感知復選框的 state。 這種方法的另一個好處是可以立即看到狀態，而無需使用其他命令重新檢查它。

切換按鈕

不過，這涉及到一些 ARIA，但並不多。

<button id="showPwd" aria-pressed="false">Show password</button>

這樣，您將需要更改按鈕 CSS 樣式和 JavaScript 中的aria-pressed屬性的值（當然，相應地更改密碼輸入的類型）。
從用戶的角度來看，這種方法既有優點也有缺點。 屏幕閱讀器用戶的主要優勢是，當按下按鈕時，用戶將聽到“按下顯示密碼按鈕”與“顯示密碼按鈕”，這將有助於為有聽力和/或認知能力的用戶發現按鈕的狀態問題更好更快。

帶有更改文本的按鈕

一個簡單但有點過時的解決方案。 您基本上有一個顯示“顯示密碼”的<button> ，當密碼顯示時，該按鈕會顯示“隱藏密碼”。
從輔助技術用戶的角度來看，這是最糟糕的解決方案，因為當按鈕上的文本發生更改時，屏幕閱讀器不會自動通知其用戶（除非您添加一些額外的黑魔法，如 ARIA 警報，但這不值得，我當然）。 通常，當文本更改時，用戶應使用宣布當前行或 object 的命令重新檢查狀態。
跨越兩種按鈕解決方案的另一個缺點是：屏幕閱讀器通常可以按元素導航並生成相同類型的元素列表。 在這種情況下，由於表單包含更多按鈕（至少是提交按鈕），因此可能會發生混淆。 使用復選框，如果表單中沒有太多復選框，那么這種混淆的可能性就會低得多。