Accessible Read-only Forms
There are times when we want to allow users to read, but not edit, information in web forms. HTML includes two attributes that can be used to prevent users from editing fields: readonly and disabled. While readonly does exactly what its name suggests, it has the frustrating restriction of only working with input type="text" and textarea fields. And, while disabled works with all types of fields, it presents two significant accessibility concerns:
- Disabled fields are removed from the tab order and may be missed by screen readers in "forms mode".
- In Internet Explorer, the default color of text in disabled fields (#a0a0a0) provides insufficient contrast (2.5:1) and cannot be changed with CSS styles.
The following example demonstrates how form fields can be made read-only using JavaScript. The script works by finding fields with class="readonly" and making them read-only by setting the readonly property (for text inputs and textareas), supressing click events (for checkboxes and buttons), or resetting changes (for radio buttons and selects). As a fallback, these fields also use the HTML disabled attribute -- if the script runs, the disabled property is turned off; if the script does not run, the fields remain un-editable.
Example
Styles
To visually indicate that the fields are read-only, a simple style rule can be included:
.readonly { background: #eeeeee; }
Note, however, that applying a background color to a field will set its border style to solid . To avoid this effect (at least in Internet Explorer), use a background image instead, e.g.:
.readonly { background-image: url(readonlybackground.png); }
Scripts
Download the JavaScript used for this example: readonlyforms.js
More Information
If you have questions or suggestions, please email accessibility@msfw.com.
