1

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?

ALSO: Please see my related earlier question:

bspinner Question

JosephDoggie
  • 1,514
  • 4
  • 27
  • 57
  • 1
    Do you want to break down what you are trying to achieve here (do an "Explain it like I am 5" explanation). I think you have either over complicated something simple or are trying to do something that isn't quite right, but it isn't immediately clear if you are trying to create an alert on page load, an aria-live region that updates, an alert popup that you need to dismiss to continue etc. – GrahamTheDev Nov 03 '21 at 01:23

1 Answers1

1

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • This is a fine answer. To make it tabbale, add tabindex="0" for completeness (then screen reader can pick up without clicking). – JosephDoggie Nov 03 '21 at 12:43
  • Also, it seems the requirement that I am working off DOES require an 'automatic' announcement of "data loading" upon submit (much like what you get visually with a spinner), and to keep it announcing every 3 seconds. Is this feasible with this technology? Perhaps I will ask a follow-up question.... – JosephDoggie Nov 03 '21 at 13:01
  • 1
    I would **not** add `tabindex='0"` unless the element is not natively focusable **and** the element is an interactive element. Do **not** put `tabindex="0"` on non-interactive elements. That makes it more confusing for the screen reader user. They expect to TAB to elements that are interactive and can navigate to static elements using other screen reader shortcut keys. – slugolicious Nov 03 '21 at 21:06
  • 1
    Regarding automatic announcements, that's a totally separate topic from what you originally asked. The OP is asking about the label of an input. Before you post a question about how to get an automatic announcement, see my other answers regarding `aria-live` at https://stackoverflow.com/questions/69765621/ios-voice-over-and-android-fail-to-announce-text-in-span-tag/69773586#69773586 and https://stackoverflow.com/questions/69737344/how-to-announce-new-content-after-show-more-button-is-clicked/69741469#69741469 – slugolicious Nov 03 '21 at 21:09
  • https://stackoverflow.com/questions/69757550/vue-js-accessibility-for-b-spinner-audio-announcement-of-data-loading-using-a was my original question, but no one answered it. If you have an answer that is concise, as to how to get an announcement from aria automatically and have it repeat every 3 seconds or so, that would be nice. The question even currently has a bounty, but it will expire in a short number of days. – JosephDoggie Nov 03 '21 at 21:16
  • As no one was answering the above question (involving bspinner) , I found that putting a tabindex = "0" into the code for that greatly helped, so the form code above was a simplification to get ideas, and to that extent the answer given helped me solve my own problem. (As did the tabindex code). Whether this would be advisable in a different situation, I cannot say, but I take it that your advice is probably generally correct. – JosephDoggie Nov 03 '21 at 21:20
  • 1
    I'll take a look at your other question. You have a "wai-aria" tag on it so I would have seen it in my RSS feed. I probably saw vuejs in the title and skipped it but a quick look at it shows you can do what you want with `aria-live`. – slugolicious Nov 04 '21 at 20:00