How To Display Read-Only (or Non-Editable) Parts of a Form

How To Display Read-Only (or Non-Editable) Parts of a Form

How should you display the parts of a form that are read-only? There are three main implementations that I have seen, and unfortunately the accessible version is the one I’ve seen used the least. The problem arises from the the way the screen readers interact with forms in Web pages. When a screen reader encounters a form it switches into “forms mode.” In this mode the screen reader will only read the form input elements and any corresponding labels. If additional plain text is inserted between two form elements, the screen reader will skip over the plain text and go directly to the next form input field.

Take the following three examples. In each of these examples the First Name, Last Name, and Email Address fields should be editable, but the Login ID should be non-editable and read-only.

Correct Implementation

Making the “Login ID” field and the data “jdoe” both form elements allows the proper semantic meaning to be defined, and also allows for screen reader users to more easily read this information. Using the readonly attribute prevents users from changing any of the information. Additionally, CSS can be used to make it clear that the input element is not editable. In this example the border is removed from the input field. When a screen reader user encounters this form their screen reader will switch to “forms mode” and they will very easily be able to read the “Login ID” information because it will be part of the form. Screen reader users will also know that the field is read only.

<form name="form1" method="post" action="">
 <p>
   <label for="first">First Name</label>
   <input type="text" name="first" id="first" value="John">
 </p>
 <p>
   <label for="last">Last Name</label>
   <input type="text" name="last" id="last" value="Doe">
 </p>
 <p>
   <label for="login">Login ID</label>
   <input name="login" type="text" id="login" readonly value="jdoe" style="border:none;">
 </p>
 <p>
   <label for="email">Email Address</label>
   <input name="email" type="text" id="email" value="jdoe@internet.com">
 </p>
</form>




Incorrect Implementation #1 – Unattached Form Labels

Making the “Login ID” field a label element and the data “jdoe” plain text is a popular implementation because the “Login ID” is still visually “labelling” something on the page. The problem is that label elements can only provide semantic meaning for a form input element. Without explicitly declaring that relationship, the user will have to intuit the relationship between “Login ID” and “jdoe”. Additionally, when a screen reader user interacts with this form, they will most likely not even know this text exists because when in “forms mode”, a screen reader will not read this text. The screen reader user would have to explicitly change their reading mode and go looking for information that was missed the first time they read through the page.

<form name="form2" method="post" action="">
 <p>
   <label for="first2">First Name</label>
   <input type="text" name="first2" id="first2" value="John">
 </p>
 <p>
   <label for="last2">Last Name</label>
   <input type="text" name="last2" id="last2" value="Doe">
 </p>
 <p>
 <label for="login2">Login ID</label>
 jdoe </p>
 <p>
   <label for="email2">Email Address</label>
   <input name="email2" type="text" id="email2" value="jdoe@internet.com">
 </p>
</form>



jdoe



Incorrect Implementation #2 – Not Using Form Elements

This implementation treats both the “Login ID” field and the data “jdoe” as plain text. This is a popular implementation because the user should not be able to edit the information, so why should it be a form element at all? Visually this works, but semantically and for screen reader users it is problematic. The information should be part of the form, but it should be treated as read-only. When a screen reader user interacts with this form as it is now, they will most likely not even know this text exists because when in “forms mode”, a screen reader will not read this text. The screen reader user would have to explicitly change their reading mode and go looking for information that was missed the first time they read through the page.

<form name="form3" method="post" action="">
  <p>
    <label for="first3">First Name</label>
    <input type="text" name="first3" id="first3" value="John">
  </p>
  <p>
    <label for="last3">Last Name</label>
    <input type="text" name="last3" id="last3" value="Doe">
  </p>
  <p>Login ID<br />jdoe</p>
  <p>
    <label for="email3">Email Address</label>
    <input name="email3" type="text" id="email3" value="jdoe@internet.com">
  </p>
</form>


Login ID
jdoe