對于 vuejs，使用 aria 標簽，螢屏閱讀器實時 NVDA 會自動讀取它
目的：使 vue 專案創建的網頁可訪問。
例如，考慮這個代碼塊：
<b-form-group
label="This is a TEST form -- it's SOLE purpose is ONLY ARIA"
label-for="myForm"
aria-label="This is a form -- purpose: ONLY ARIA Aria version"
aria-describedby="local-id-live-feedback"
role="alertdialog"
aria-busy="true"
aria-live="assertive"
>
</b-form-group>
上面的代碼塊編譯。但是，當我在瀏覽器（例如 Google Chrome）中打開頁面時，我可以看到一些標簽，但除非我單擊某些內容，否則我不會自動聽到它。
問題：
i) ARIA 是在 Google Chrome 中自動啟用還是我必須添加擴展程式或一些類似的機制來啟用它？
ii) 對于上面的特定代碼，是否需要腳本代碼隱藏和/或資料塊才能使其作業？
iii) 上面的 vue 標記語言是否還有其他明顯的錯誤/補充可以幫助 aria 作業？
uj5u.com熱心網友回復：
在https://bootstrap-vue.org/docs/components/form-group 上測驗，它允許您實時編輯示例代碼、添加aria-label或其他 ARIA 屬性似乎將屬性放在<div>容器上而不是輸入欄位上。
<b-form-group
id="fieldset-1"
description="Let us know your name."
label="Enter your name"
label-for="input-1"
aria-label="foo"
aria-describedby="bar"
valid-feedback="Thank you!"
:invalid-feedback="invalidFeedback"
:state="state"
>
生成的代碼
<div id="fieldset-1" role="group" aria-invalid="true" class="form-group is-invalid" aria-label="foo" aria-describedby="bar">
<label id="fieldset-1__BV_label_" for="input-1" class="d-block">Enter your name</label>
<div>
<input id="input-1" type="text" aria-invalid="true" class="form-control is-invalid" aria-describedby="fieldset-1__BV_description_ fieldset-1__BV_feedback_invalid_">
<div tabindex="-1" id="fieldset-1__BV_feedback_invalid_" role="alert" aria-live="assertive" aria-atomic="true" class="d-block invalid-feedback">Please enter something.</div>
<div tabindex="-1" id="fieldset-1__BV_feedback_valid_" role="alert" aria-live="assertive" aria-atomic="true" class="valid-feedback">Thank you!</div>
<small tabindex="-1" id="fieldset-1__BV_description_" class="form-text text-muted">Let us know your name.</small>
</div>
</div>
這似乎有點奇怪，但我想如果您aria-label在 上指定<b-form-group>，您是為表單指定它而不是專門為<input>欄位指定它，因此在父項<div>上顯示 ARIA 屬性是正確的。
看起來descriptionvuejs 中的屬性也對應于aria-describedby添加到<input>.
但是，如果您嘗試指定多種型別的標簽，則需要小心。如果 an<input>具有多個標簽（例如<label>元素、aria-label屬性和屬性），則存在優先順序aria-labelledby。將僅使用其中一個標簽。請參閱“可訪問名稱和描述計算 1.1 ”。（在這種情況下，aria-labelledby具有最高優先級。）
我不會自動聽到[標簽]
你說的“自動”是什么意思？當頁面加載時，標簽不會被讀取。但是，如果您tab進入輸入欄位，您將聽到標簽讀取。
ARIA 屬性不需要插件或任何東西。它們是 HTML 語言的一部分。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346401.html
標籤：javascript Vue.js 可达性 标记 怀阿利亚