Best elements to preserve label-input relationship for non-input elements?

Question

I'm helping a friend develop an application that involves the following form setup. There's one element (the user's group) that's different from the others, in that it has to be approved by an admin before it can be changed.

Her goal was to make that distinction clear to the user, and the way she wanted to do that is to have the user's current group display as text at first, then have that effectively turn into a select element when the user clicks the Edit Group button.

We have all that in place with no issues, the only question is about the correct semantic choices for the text element representing the user's current group.

We wanted to preserve the same semantic pattern of the label-input pairs from the form above, but we weren't sure how to best represent that when the input is replaced with plain text (we notably care about this as it relates to accessibility). The current draft is to use a description list; is that the best choice for this occasion?

Thank you!

<form action="/user-settings" method="POST">
  <label for="username">Username</label> 
  <input id="username" type="text"/>
  <label for="email">Email</label>
  <input id="email" type="text"/>
  <input type="submit" value="Submit"/>
</form>
<hr>
<dl> 
  <dt>Group</dt>
  <dd>{{ current_group }}</dd>
</dl>
<button>Edit Group</button>
<form action="/group-change-request" method="POST" class="hidden">
  <select><!--group options--></select> 
  <input type="submit" value="Request Group Change"/>
</form>

score 0 · Answer 1 · answered Oct 25 '18 at 22:49

I would probably display the group as an <input readonly> instead of as plain text so that the user can still tab through the interface and hear the label of the field (assuming you have a <label for="id"> for the readonly field like you do for the other fields).

I would also include some visibly hidden text (but "visible" to a screen reader) that explains why the field is readonly and how to make it editable. Something like:

<label for="myid">group</label>
<input readonly id="myid" aria-describedby="desc">
<span id="desc" class="sr-only">The group is protected until you select the "Request Group Change" button</span>

You can see the "sr-only" class here: What is sr-only in Bootstrap 3?

Best elements to preserve label-input relationship for non-input elements?

1 Answers1