2

Take the following mockup as our example case:

Page Title

Page Instructions

Field 1*: [ text input ]

Field 2 : [ text input ]

Field 3*: [ text input ]

[Reset] [Submit]

We have noticed that when a screen reader (using default settings) first reads through the following page, it reads all the text content correctly. But the screen reader does not state if a given field is required on this first read through. When tabbing through to the fields after the fact, it will state if a field is required on first focus.

Is this acceptable from an accessibility stand point?

0

If the html is coded properly, then you should be ok, but it's hard to tell given the limited information. Some questions I had are:

  • Which screen reader, browser, and OS are you using?
  • Is the page reading upon loading or are you using a screen reader key (such as ins+downarrow) to read the entire page?
  • Are the required <input> fields using the required attribute or do they just have an asterisk in their label?
  • Are the labels for the fields using a <label> element with the for="id" attribute?
  • You said the required state is read when tabbing "on first focus". Does that mean it's not read if you tab off the field and then tab back to it (essentially second focus or third focus)? Or did you just mean the required state is read anytime you tab to the field?

As long as your fields look something like this, you're good:

<label for="id1">field 1</label>
<input id="id1" required>

(I know StackExchange is not for coding examples, but it was needed to answer the question.)

  • My question is more general than a specific Browser, OS, or platform. First read is upon the first load of the page, the user has not pressed anything. The inputs have the aria-required not the required attribute (we dont use html 5 required on purpose) Labels only have the asterisk (added by CSS). Whenever the user focuses on the field then the screen reader announces its required. – JeffH Oct 30 '18 at 18:38
  • Yes, I understood it was a general question, but some screen readers do read the required attribute when the page is loaded. It sounds like you're using some combination that isn't and I was curious what it was, but I suppose that's irrelevant. As long as your html code is correct, then don't worry about how each combination will read it. – slugolicious Oct 31 '18 at 0:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.