Consumer Digital
Forms
Every form field used on a CareCredit web page should follow these basic styles.
When creating forms, it is especially important to provide instructions and cues that will help all users to avoid and correct mistakes. This is especially important for those with accessibility issues. In order to ensure that the forms meet the accessibility standards of the site developers should refer to the requirements in the toggle below.
WCAG2.0 guidelines for accessibility
-
Form buttons have a descriptive value. (WCAG 1.1.1)
Example:
<input type="submit" name="submit" aria-label="Submit to find a location" title="Submit to find a location" value="Submit to find a location!"> -
Form inputs have associated text labels. (WCAG 1.1.1)
Example:
<input type="text" name="firstname" id="firstname" title="First Name" aria-label="First Name" required> -
Required form elements or form elements that require a specific format, value, or length provide this information within the element's label. (WCAG 3.3.1)
Example:
<input type="text" name="description" id="description" title="Description" aria-label="Description max-length 250" required> -
If utilized, form validation cues and errors (client-side or server-side) alert users to errors in an efficient, intuitive, and accessible manner. The error is clearly identified, quick access to the problematic element is provided, and user is allowed to easily fix the error and resubmit the form. (WCAG 3.3.1)
Example:
-
Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends. (WCAG 3.3.2)
Example:
-
If an input error is detected (via client-side or server-side validation), provide suggestions for fixing the input in a timely and accessible manner. (WCAG 3.3.3)
-
If the user can change or delete legal, financial, or test data, the changes/deletions are reversible, verified, or confirmed. (WCAG 3.3.4)
Input Field/ Select List
The following are examples of the floating label input fields and select lists, with provided code.
CSS
.select, input{ width: 216px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding: 2px; height: 42px; } JavaScript
function toggleLabel(target){ var thisLabel = $("label[for='"+target.attr("id")+"']"); if(target.val() != ""){ fadeInLabel(thisLabel, target); }else{ fadeOutLabel(thisLabel, target); } } function fadeInLabel($label, $input){ $label.addClass('active'); $input.addClass('active'); } function fadeOutLabel($label, $input){ $label.removeClass('active'); $input.removeClass('active'); } Single
When a link stands on it's own, it is bold by default and hover state adds an underline.
CSS
.select, input{ width: 216px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding: 2px; height: 42px; } JavaScript
function toggleLabel(target){ var thisLabel = $("label[for='"+target.attr("id")+"']"); if(target.val() != ""){ fadeInLabel(thisLabel, target); }else{ fadeOutLabel(thisLabel, target); } } function fadeInLabel($label, $input){ $label.addClass('active'); $input.addClass('active'); } function fadeOutLabel($label, $input){ $label.removeClass('active'); $input.removeClass('active'); } Error/Validation Messages
The following are examples of error/validation messages that may occur when submitting information.
Example: White Backgrounds
Example: Dark Background in Finder Navigation
Progress Bar
The following is an example of a progress bar design that could be used to break down long winded forms.
Example
Transactional Form Fields
normal
Help text down here
hover
Help text down here
focus
Help text down here
error
This is an error
filled
Help text down here
disabled
Help text down here
normal
hover
focus
error
This is an error
filled
disabled
Transactional Selection Controls
Checks
Radios
Transactional Tool tips
Hidden Tooltip
Tooltip
Not all tooltips need to include Play Audio button
