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

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

PURPOSE: To make web-page created by vue project accessible.

For example, consider this code-block:

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

The above code-block compiles. However, when I open the page in the browser (e.g. Google Chrome), I can see some of the labeling, but I don't automatically hear it unless I click on something.

Questions:

i) Is ARIA automatically enabled within Google Chrome or do I have to add an extension or some similar mechanism to enable it?

ii) For specific code above, is there a script codebehind and/or data block required to get it to work?

iii) Are there any other obvious errors/additions to the vue markup-language above that could help get aria to work?

CodePudding user response：

Testing on https://bootstrap-vue.org/docs/components/form-group, which lets you live edit the sample code, adding aria-label or other ARIA attributes seems to put the attributes on the <div> container rather than on the input field.

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

Generated code

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

That seems a little odd but I guess if you specify aria-label on the <b-form-group>, you are specifying it for the form and not specifically for the <input> field, so having the ARIA attributes appear on the parent <div> is correct.

It also looks like the description attribute in vuejs corresponds to having an aria-describedby added to the <input>.

But you need to be careful if you're trying to specify multiple types of labels. There is an order of precedence if an <input> has multiple labels such as a <label> element, an aria-label attribute, and an aria-labelledby attribute. Only one of the labels will be used. See "Accessible Name and Description Computation 1.1". (In this case, aria-labelledby has the highest precedence.)

I don't automatically hear [the label]

What do you mean by "automatic"? When the page loads, the label won't be read. However, if you tab to the input field, you will hear the label read.

No plugins or anything are needed for ARIA attributes. They're part of the HTML language.