How do screen readers handle display flex?

Question

I am writing an HTML form in which the requiredness of some fields depends on the value of others and thus changes dynamically. I would like to present a visual cue of that requiredness by appending an asterisk to the label preceding each required field. Since it is purely visual and the semantics of the situation are well expressed by the required attribute in the appropriate tag, I would like the asterisk to be added as content from a CSS definition rather than inserting it in the HTML directly or via script.

However, adding visual content to an element preceding the required field is challenging, since CSS selector combinators seem to go forward (towards children and following siblings) but not backwards (towards parents or previous siblings).

I could of course toggle a class name in the label from the same code where I change the requiredness of the input field, but that would separate the content addition from the requiredness change into two different instructions that I would have to remember to call together, now and a year from now, so that is a constraint I would like to avoid; I would prefer toggling the requiredness of the input field and have the CSS react to that change without further involvement on my part.

So I have resorted to inverting the order of each label and its input field, and then wrapping both in a display:flex; flex-direction:column-reverse element, making the label text be rendered before its corresponding field despite being declared after it. That way, I can use a next-sibling combinator to add an asterisk to the label text of each required field:

label {
  display:inline-flex;
  flex-direction:column-reverse;
}

label>input[required]+span:after
{
  content:"*";
  color:#a21;
}

<label>
  <input type="text" required>
  <span>Field 1</span>
</label>
<label>
  <input type="text">
  <span>Field 2</span>
</label>

My question, however, is how will screen readers interpret that double inversion (once in the HTML and once in the CSS). Will they read out the text before expecting a user input?

Thanks, I always have the need to sit down, install a screen reader and find out these things by myself, but I never seem to have the time to do it :-(

Octagonal

Answer 1

Screen readers typically don't care about CSS. They read the DOM and don't care if you move things around with CSS. If I have a horizontal list of links with float:right, visually, they'll be displayed from right to left, but when I bring up a screen reader dialog that shows all the links on the page, they'll be in the order of the DOM regardless of where the CSS put them on the page.

The reason I say that screen readers "typically" don't care about CSS is that most readers will read text that is added via the content property, even though that's text added via CSS. But I wouldn't count on that behavior. In your example, I hear "label one star" when using jaws, nvda, and voiceover, but in the past, I would just hear "label one". With the next release of the screen reader or browser, it might change again. As long as you have the required property set, that's the important part.

Spic

Thank you very much for a helpful answer, slugolicious. Although I am not as worried about the screen reader reading the asterisk out loud, but about the screen reader reading the label before waiting, if it does, for a user input in the corresponding field. Would that be a problem? To be honest, I don't really know how screen readers handle forms. – Octagonal

Yes, it would be a problem, but your code is fine. The input field will have the label read in the proper order. – Spic

Answer 2

First, as said in another answer, screenreaders ignore any CSS positioning and treat the tags in the DOM order.

Now, according to H44: Using label elements to associate text labels with form controls, the order of the label and input are also important

For all input elements of type text, file or password, for all textareas and for all select elements in the Web page:

• Check that there is a label element that identifies the purpose of the control before the input, textarea, or select element

BUT, in your case, you have a very peculiar situation. Your label tag is seen before the input tag (in the DOM order) while its text content is after.

<label>
  <input type="text" required>
  <span>Field 1</span>
</label>

I would say that screenreaders would be OK with that, because they will read the input and the label as a whole announcing "Implicit label Field 1".

As long as your label tag is seen before the input[type=text], this isn't bad design (things are different for input fields of type radio or checkbox where it has to be after).

Discomfort