Overview
This guide helps you ensure that any form elements you add directly in HTML to your Dornsife WordPress site are accessible to people using assistive technologies.
Caution!
This guide requires some familiarity with HTML. If you are unaccustomed to editing HTML, email websiteproject@dornsife.usc.edu: we can help you find a solution that doesn't require HTML knowledge.
Creating accessible forms
Forms embedded from elsewhere (such as Google, Qualtrics, Emma)
If you are embedding a form on your Dornsife WordPress site (for example, a Google or Qualtrics registration form, or an Emma newsletter signup form), the external site will handle the HTML code. All you need to do for accessibility is make sure that the embedded form has a title attribute:
Forms created directly in HTML
If you are working with HTML code directly to create a form on your Dornsife WordPress site, it's important to use clear and understandable labels throughout the form. Doing so helps make your form accessible for people who are using assistive technology to navigate your form.
Typically, a form consists of a series of questions or prompts, with options for answering each question. These options might be in the form of a text box that a person types in, or multiple checkboxes or radio buttons they select from, or a dropdown menu or list. These options are known as form controls, and each form control must be accompanied by its own clear, descriptive label, as a <label> element.
The <label> can go before or after the form control: for instance, it makes more sense to display a label before a text box, but it makes more sense to display a label after a checkbox or radio button. To ensure that a label is associated with the correct form control, the label's for attribute must be the same as the form control's id attribute.
The following examples demonstrate how this might look:
-
Text entry control:
<label for="firstname">First name: </label>
<input id="firstname" name="firstname" type="text" />
-
Radio button control:
<fieldset>
<legend>Select your USC status: </legend>
<input id="fac" name="status" type="radio" value="faculty" />
<label for="fac">Faculty</label>
<input id="staff" name="status" type="radio" value="staff" />
<label for="staff">Staff</label>
<input id="student" name="status" type="radio" value="student" />
<label for="student">Student</label>
</fieldset>
If the form element is not accompanied by a <label> element and its label is not visible, use the aria-label attribute:
-
Correct:
<p>Enter your email address:</p>
<input id="email" type="text" aria-label="Email Address" />
-
Incorrect:
<input id="email" type="text" />
If you use placeholder text, be aware that you must still include a label: screen readers do not recognize placeholder text as labels. Additionally, placeholder text will disappear as soon as a user begins inputting their own text, while labels remain visible.
-
Correct:
<label for="email">Email: </label>
<input id="email" name="email" type="text" placeholder="ttrojan@usc.edu">
-
Incorrect:
<input id="email" name="email" type="text" placeholder="ttrojan@usc.edu">
Editing your form in WordPress
On your Dornsife WordPress site, you can edit HTML in the Text tab of a component:
Quick guide
- Click the Text tab.
- Locate any form controls. These are typically indicated by tags such as <input>, <select>, <button>, and <textarea>.
- Make sure that each form control is accompanied by a <label>, and that the label is clear and informative. The label can appear before or after the form control; just make sure that the label's for attribute is identical to the form control's id attribute.
- You can now save or update the Page.
Detailed guide (with screenshots)
- Click the Text tab.
- Locate any form controls. These are typically indicated by tags such as <input>, <select>, <button>, and <textarea>.
- Make sure that each form control is accompanied by a <label>, and that the label is clear and informative. The label can appear before or after the form control; just make sure that the label's for attribute is identical to the form control's id attribute.
- You can now save or update the Page.
References
For this guide, the following resources were consulted: