Suggestion: Better CSS Accessibility on “Required” fields
-
I am attempting to format some of the field labels that are generated, and I wish to modify the label on *required* fields. Presently, the HTML for a required field is similar to the following:
<p class="ctct-form-field ctct-form-field-email"><label for="email___123abc">Email <abbr title="required">*</abbr></label><input required type="email" name="email___123abc" id="email___123abc" value="" placeholder="Enter your email address"class="ctct-email"/></p>Note: There’s an error in that there is no space before the “class” attribute on the “input” tag.
I see that the required field is formatted with an asterisk surrounded in an “abbr” tag. While workable, it’s not flexible. If instead of using an asterisk, you gave the <p> element an additional class of “ctct-form-field-required”, one could use something like:
.ctct-form-field-required label:after {content: '*'; color: #f00;}to format the label. They could put the asterisk (or whatever they want) before or after the label, they could use CSS to add a colon after field names, and most importantly, they could have CSS distinguish between required and non-required fields.
With the way it is now, if I want the asterisk to appear before the label, I would need to use CSS to specifically target the label with the specific “for” attribute value, hide the “abbr” tag on it, and add my other CSS code to handle the preceeding asterisk – a lot more work than it could be with the added class, especially if one simply wants to do it to all required field labels.
Having that class applied to the containing element (in this case the ‘p’ tag), would also allow conditional formatting of the required fields themselves (in addition to the labels) without having to reference the ID of every field one wants to do it to.
-
Those
tag[attribute]selectors would work on the form elements, but not on their labels. Some jQuery could handle the labels based on those selectors on the form elements, but that wouldn’t be as simple or efficient as having a special class applied to the entire element that contains both the field and the label.To give an example, lets say I have a form with three required fields. Lets also say I want to have a red asterisk on the left side of each label of the required fields, and a colon on the right side of each label.
First I would need to hide the trailing asterisk:
.ctct-form-wrapper form label abbr { display: none; }Then I would add a colon to the end of all labels:
.ctct-form-wrapper form label:after { content: ':'; margin-right: 4px; }Then I would place a red asterisk before the required labels:
.ctct-form-wrapper .ctct-form-field-email label:before, label[for="first_name___185a1b2c3d4e5f6g7h8i9j0k1l2m90"]:before, label[for="last_name___234n1o2p3q4r5s6t7u8v9w0x1y2z56"]:before { content: '*'; color: #ff0000; margin-right: 4px; }Currently, that last bit of CSS may need to be applied to each required field individually as shown, and removing the “Required” property of a field at a later date would require modification to the CSS.
If a special class is added to the container of all required fields, such as “.ctct-form-field-required”, all “required” element labels could be styled without targeting individual field containers. That would remove the need to edit CSS when new required fields are added or the Required property is removed from an old field.
- The topic ‘Suggestion: Better CSS Accessibility on “Required” fields’ is closed to new replies.
