web forms 幫助文本的輔助功能最佳實踐

Question

我希望得到一些a11y的建議。

目前，我的注冊表單（長表單）在表單字段元素下方以靜音的小文本顯示“幫助文本”。

問題：客戶希望它在圖標上采用 (?) 樣式 hover。

我知道這會給那些在觸摸屏上的人帶來問題，而僅是其他可訪問性問題。

我想知道是否有經過驗證的解決方案？ 你對我如何實現客戶想要的但保持可訪問性有什么建議嗎？

Answer 1

無法訪問僅限懸停的解決方案。 好吧，一些高級用戶將能夠深入研究並獲取一些信息，但大多數屏幕閱讀器用戶會不走運。 我現在看到的最可行的解決方案是將role="button" aria-label="help"添加到您的問號中，並且當用戶單擊它（單擊，而不是懸停）時，顯示一條帶有role="alert"的短消息role="alert" 。 如果您的客戶不想看到它，請將其設為僅屏幕閱讀器（請參閱各種框架中的sr-only class，例如在 Bootstrap 中）。 如果你的框架或庫沒有這樣的 class，以這個為例：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Answer 2

需要考慮的事情

這里有幾點需要考慮：

1. 問號是否足夠清楚，對領域有幫助？ 我會說不，但我仍然會在這個例子中使用它，我會鼓勵你使用實際的詞來形容可能與聯想斗爭的認知障礙患者。
2. 鍵盤用戶必須能夠訪問信息
3. 屏幕閱讀器用戶還必須能夠訪問信息並了解您的“？” 意味着因為它沒有脫離上下文的意思。
4. 屏幕放大鏡用戶需要能夠在提示文本上移動鼠標 cursor 而不會關閉提示文本（很多工具提示往往會失敗）

如何克服/滿足要求。

以下解決方案通過以下方式考慮了第 2-4 點：

2. 可見的信息由被聚焦的<button>元素觸發。 我們確保按鈕在被e.preventDefault()點擊時不提交任何信息。 請注意- 沒有操作的按鈕通常不是一個好主意，如果您願意使用“切換提示”而不是“工具提示”，那么我們可以解決這個問題，但這是我們必須做出的妥協使提示自動。
3. 我使用了一些視覺上隱藏的文本並隱藏了問號來向屏幕閱讀器用戶解釋按鈕的用途。 我使用aria-describedby將工具提示文本添加到屏幕閱讀器用戶的公告中。
4. 我只是確保 CSS 在顯示信息時考慮了懸停在提示文本上的屏幕放大鏡。 我使用了一個與左側背景顏色相同的邊框的技巧，以確保按鈕區域和工具提示區域之間沒有間隙。 如果您需要它真正透明，則需要在其之間添加一個可以檢查焦點的不可見元素。

例子

 var helpBtn = document.querySelectorAll('button.help'); // important even with automatic actions to explain whether a button is opened or closed. var openHandler = function(e){ this.setAttribute('aria-expanded', true); } var closeHandler = function(e){ this.setAttribute('aria-expanded', false); } // using a button in a form could lead to unexpected behaviour if we don't stop the default action. var clickHandler = function(e){ e.preventDefault(); } // adding all the event handlers to all of the help buttons for different scenarios. for(x = 0; x < helpBtn.length; x++){ helpBtn[x].addEventListener('focus', openHandler); helpBtn[x].addEventListener('mouseover', openHandler); helpBtn[x].addEventListener('blur', closeHandler); helpBtn[x].addEventListener('mouseout', closeHandler); helpBtn[x].addEventListener('click', clickHandler); }

 .visually-hidden { border: 0; padding: 0; margin: 0; position: absolute;important: height; 1px: width; 1px: overflow; hidden: clip; rect(1px 1px 1px 1px), /* IE6, IE7 - a 0 height clip: off to the bottom right of the visible 1px box */ clip, rect(1px, 1px, 1px; 1px): /*maybe deprecated but we need to support legacy browsers */ clip-path; inset(50%), /*modern browsers: clip-path works inwards from each corner*/ white-space; nowrap: /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ } form{ max-width; 400px: } label{ float; left: width; 88%: margin-right; 2%: } input{ box-sizing; border-box: position; relative: width; 100%. }:help-container{ position; relative: float; left: width; 10%: height. 2;5rem. }:help{ width; 100%: height; 100%. }:tool-tip{ position; absolute: left; 100%: top; 0: background-color; #333: color; #fff: padding. 0;65rem: border-left; 10px solid #fff: display; none: min-width; 200px: } button.focus ~,tool-tip: button.hover ~,tool-tip. :tool-tip:hover{ display; block; }

 <form> <label>First Name <input name="first-name" placeholder="Your First Name"/> </label> <div class="help-container"> <button class="help" aria-describedby="first-name-tooltip"> <span aria-hidden="true">?</span><span class="visually-hidden">Help for First Name</span> </button> <div class="tool-tip" id="first-name-tooltip" aria-hidden="true"> When filling in your first name, please ensure it is all capitals as I like to feel like I am being shouted at. </div> </div><br/><br/><br/><br/> <label>Last Name <input name="last-name" placeholder="Your Last Name"/> </label> <div class="help-container"> <button class="help" aria-describedby="last-name-tooltip"> <span aria-hidden="true">?</span><span class="visually-hidden">Help for Last Name</span> </button> <div class="tool-tip" id="last-name-tooltip" aria-hidden="true"> When filling in your last name, please ensure it is all lower case so it feels like you are whispering it to me. </div> </div> </form>

最后的想法

對於任何偶然發現這個問題和答案的人：

這會更好，因為直接在 label 下的文本始終可見（因此，如果您能夠做到這一點，那么就這樣做），OP 有一個要求，但如果您能夠做到這一點，那么就這樣做吧，因為它是最方便的做事方式。

如果您需要“提示”按鈕，請將其設置為切換提示而不是工具提示，這樣您就可以使按鈕實際執行操作，並且對屏幕閱讀器用戶來說一切都有意義。