对于vuejs，使用aria标签，screen-reader llive NVDA会自动读取它

Question

对于vuejs，使用aria标签，屏幕-reader live 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) 对于上面的特定代码，是否需要脚本代码隐藏 and/or 数据块才能使其正常工作？

iii) 上面的 vue 标记语言是否还有其他明显的 errors/additions 可以帮助 aria 工作？

另外：请参阅我之前的相关问题：

Answer 1

在 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>

这似乎有点奇怪，但我想如果你在 <b-form-group> 上指定 aria-label，你是为表单指定它而不是专门为 <input> 字段指定，所以有出现在父项上的 ARIA 属性 <div> 是正确的。

看起来vuejs中的description属性对应于在<input>.

中添加了一个aria-describedby

但是如果您尝试指定多种类型的标签，则需要小心。如果 <input> 具有多个标签，例如 <label> 元素、aria-label 属性和 aria-labelledby 属性，则存在优先顺序。将仅使用一个标签。参见“Accessible Name and Description Computation 1.1”。（在这种情况下，aria-labelledby 具有最高优先级。）

I don't automatically hear [the label]

“自动”是什么意思？页面加载时，不会读取标签。但是，如果您 tab 到输入字段，您将听到标签朗读。

ARIA 属性不需要插件或任何东西。它们是 HTML 语言的一部分。

对于vuejs，使用aria标签，screen-reader llive NVDA会自动读取它

For vuejs, using an aria label, will a screen-reader llive NVDA automatically read it

javascript

vue.js

accessibility

markup

wai-aria