更改 html 的焦點

Question

我有一個帶有提交按鈕的表單的頁面。 單擊提交按鈕后，我希望將焦點集中到 go 到“成功”或“失敗”消息。 現在屏幕閱讀器一旦按下按鈕就不會離開。 它停留在“按繼續按鈕”上，然后我用我的箭頭導航。 我希望它專注於

標簽取代屏幕上的按鈕並在按繼續后閱讀消息。

<form>
<h1> Start Password Reset> </h1>
<input placeholder="Email">
<input type="submit" name="Continue" value="Continue">
<p id="success"> Success Message Here </p>
<p id="failure"> Failure Message Here </p>
</form>

Answer 1

焦點通常適用於可操作的元素。 像這樣的狀態消息是不可操作的。 聚焦它（這需要用焦點指示器標記它，以便訪問）可能會讓用戶誤以為他們可以激活它。

我得到的印象是您想將注意力集中在該消息上，僅此而已。 如果是這樣，您可以設置樣式以吸引注意力，還可以將其定位在實時區域中，以便輔助技術將消息通知用戶。

為此，您可以使活動區域最初為空，然后在用戶激活按鈕后用一條或另一條消息填充它。

將屬性 role="status" 應用於“p”元素使其成為這樣一個活動區域。

給“p”元素一個 id="xyz" 屬性和一個 aria-controls="xyz" 屬性的按鈕也會顯式地將最終消息與按鈕相關聯。

如果按鈕在被激活后消失，您將需要選擇最有用和最直觀的元素來移動焦點，這通常是用戶可以使用的元素。