AEM Website Accessibility Remediation

COMPONENT DOCUMENTATION

Aetna

AEM Website Accessibility Remediation

COMPONENT DOCUMENTATION

Aetna

AEM Website Accessibility Remediation

Version 1.0

Project

Aetna.com

HTML Component

form name="MailServlet" action="https://www.aetna.com/sharedsvcsMail/MailServlet?html_genlerr_template=templates/error.html" method="POST" enctype="multipart/form-data">

<div id="errorContainer" class="errorBox" style="display: none;" role="alert" aria-live="polite" tabindex="-1"</div>

<div class="wizard-section" data-section-id="1">

<div class="visible-phone">

<div class="wizard">

<div class="wizard-info">1 of 3</div>

<div class="wizard-title">

<h4>Contact Information</h4>

h2 class="formSubheading">Contact Information</h2>

</div>

</div>

</div>

<div class="form-content-1 parsys">

<div class="responsiveLayout section">

<div class="hidden-phone">

<div class="articleModule parbase section">

<div class="articleModule ">

<h5>1) Contact Information</h5>

h2 class="formSubheading">Contact Information</h2>

</div>

</div>

</div>

</div>

<div class="textinput basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="brokername3"<span class="required-field">*</span>Broker Name</label>

<div class="text-input-wrapper">

<input type="text" id="brokername3" name="brokername3" placeholder="Broker Name" data-rule-required="true" data-msg-required="Please enter the broker name">

</div>

</div>

</div>

</div>

<div class="textinput basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="brokerfirmname3">Broker Firm Name (if applicable)</label>

<div class="text-input-wrapper">

<input type="text" id="brokerfirmname3" name="brokerfirmname3" placeholder="Broker Firm Name">

</div>

</div>

</div>

</div>

<div class="textinput basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="tin3"<span class="required-field">*</span>Tax ID Number</label>

<div class="text-input-wrapper">

<input type="text" id="tin3" name="tin3" data-rule-required="true" data-msg-required="Please enter the tax ID number" class="low-width" maxlength="9" size="9" data-rule-maxlength="9" data-msg-maxlength="Tax ID should be a 9 digit numeric value" data-rule-minlength="9" data-rule-maxlength="9" data-msg-minlength="Tax ID should be a 9 digit numeric value" data-rule-number="true" data-msg-number="Tax ID should be a 9 digit numeric value"

</div>

</div>

</div>

</div>

<div class="selection basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="bestwaytocontact"<span class="required-field">*</span>Best way to contact you</label>

<div class="selectWrap">

<select id="bestwaytocontact" name="bestwaytocontact" data-rule-required="true" data-msg-required="Please select a way to contact you">

<option value=""</option>

<option value="Email">Email</option>

<option value="Phone">Phone</option>

</select>

</div>

</div>

</div>

</div>

<div class="formsubsection basicformcomponent section">

<div id="contact-email">

<div class="form-subsection-content parsys">

<div class="textinput basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="email3"<span class="required-field">*</span>Email Address (in the format of )</label>

<div class="text-input-wrapper">

<input type="text" id="email3" name="email3" placeholder="" data-rule-required="true" data-msg-required="Please enter your email address" data-rule-email="true" data-msg-email="Please enter a valid email address">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="formsubsection basicformcomponent section">

<div id="contact-phone">

<div class="form-subsection-content parsys">

<div class="phonefield basicformcomponent section">

<div class="row-fluid">

<div class="span12">

fieldset

legend

<labelspan class="required-field">*</span>Phone</label>/legend>

label for="Phone1">Enter phone number with no dashes</label>

div class="phone-wrapper">

<div class="col col1">

<input type="text" aria-label="Phone - Area Code Phone Number - Area Code - enter 3 digits" id="Phone1" name="Phone1" placeholder="000" data-rule-required="true" data-msg-required="Field required" data-rule-maxlength="3" data-msg-maxlength="This value should have 3 characters max" data-rule-minlength="3" data-msg-minlength="This value should have at least 3 characters" data-rule-number="true" data-msg-number="Only numbers are valid" />

</div>

<div class="col col2"> - </div>

<div class="col col3">

<input type="text" aria-label="Phone - Middle 3 digits Phone Number - Middle 3 digits" id="Phone2" name="Phone2" placeholder="123" data-rule-required="true" data-msg-required="Field required" data-rule-maxlength="3" data-msg-maxlength="This value should have 3 characters max" data-rule-minlength="3" data-msg-minlength="This value should have at least 3 characters" data-rule-number="true" data-msg-number="Only numbers are valid" />

</div>

<div class="col col4"> - </div>

<div class="col col5">

<input type="text" aria-label="Phone - Last 4 digits Phone Number - Last 4 digits" id="Phone3" name="Phone3" placeholder="4567" data-rule-required="true" data-msg-required="Field required" data-rule-maxlength="4" data-msg-maxlength="This value should have 4 characters max" data-rule-minlength="4" data-msg-minlength="This value should have at least 4 characters" data-rule-number="true" data-msg-number="Only numbers are valid" />

</div>

</div>

</fieldset

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="visible-phone">

<div class="wizard-buttons">

<a href="#" class="blueBtn graybg wizard-button-next">Next</a>

</div>

</div>

</div>

<div class="wizard-section hide" data-section-id="2">

<div class="visible-phone">

<div class="wizard">

<div class="wizard-info">2 of 3</div>

<div class="wizard-title">

<h4>Billing & Enrollment Inquiry</h4>

</div>

</div>

</div>

<div class="form-content-2 parsys">

<div class="responsiveLayout section">

<div class="hidden-phone">

<div class="articleModule parbase section">

<div class="articleModule ">

<h2 h5 class="formSubheading">2) Billing &amp; Enrollment Inquiry</h2 h5

</div>

</div>

</div>

</div>

<div class="textinput basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="application_ID">Application ID</label>

<div class="text-input-wrapper">

<input type="text" id="application_ID" name="application_ID">

</div>

<p class="description-text">If known</p>

</div>

</div>

</div>

<div class="textinput basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="primary_applicant_first_name"<span class="required-field">*</span>Primary Applicant First Name</label>

<div class="text-input-wrapper">

<input type="text" id="primary_applicant_first_name" name="primary_applicant_first_name" placeholder="Primary Applicant First Name" data-rule-required="true" data-msg-required="Please enter the primary applicant first name">

</div>

</div>

</div>

</div>

<div class="textinput basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="primary_applicant_last_name"<span class="required-field">*</span>Primary Applicant Last Name</label>

<div class="text-input-wrapper">

<input type="text" id="primary_applicant_last_name" name="primary_applicant_last_name" placeholder="Primary Applicant Last Name" data-rule-required="true" data-msg-required="Please enter the primary applicant last name">

</div>

</div>

</div>

</div>

<div class="stateselection addressfield basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="address-state"<span class="required-field">*</span>State</label>

<div class="selectWrap ">

<select class="address-state" id="address-state" aria-label="State - State" name="state" data-rule-required="true" data-msg-required="Please select a state">

<option value="">State</option>

<option value="AL">Alabama</option>

<option value="AK">Alaska</option>

<option value="AZ">Arizona</option>

<option value="AR">Arkansas</option>

<option value="CA">California</option>

<option value="CO">Colorado</option>

<option value="CT">Connecticut</option>

<option value="DE">Delaware</option>

<option value="DC">District of Columbia</option>

<option value="FL">Florida</option>

<option value="GA">Georgia</option>

<option value="GU">Guam</option>

<option value="HI">Hawaii</option>

<option value="ID">Idaho</option>

<option value="IL">Illinois</option>

<option value="IN">Indiana</option>

<option value="IA">Iowa</option>

<option value="KS">Kansas</option>

<option value="KY">Kentucky</option>

<option value="LA">Louisiana</option>

<option value="ME">Maine</option>

<option value="MD">Maryland</option>

<option value="MA">Massachusetts</option>

<option value="MI">Michigan</option>

<option value="MN">Minnesota</option>

<option value="MS">Mississippi</option>

<option value="MO">Missouri</option>

<option value="MT">Montana</option>

<option value="NE">Nebraska</option>

<option value="NV">Nevada</option>

<option value="NH">New Hampshire</option>

<option value="NJ">New Jersey</option>

<option value="NM">New Mexico</option>

<option value="NY">New York</option>

<option value="NC">North Carolina</option>

<option value="ND">North Dakota</option>

<option value="OH">Ohio</option>

<option value="OK">Oklahoma</option>

<option value="OR">Oregon</option>

<option value="PA">Pennsylvania</option>

<option value="PR">Puerto Rico</option>

<option value="RI">Rhode Island</option>

<option value="SC">South Carolina</option>

<option value="SD">South Dakota</option>

<option value="TN">Tennessee</option>

<option value="TX">Texas</option>

<option value="UT">Utah</option>

<option value="VT">Vermont</option>

<option value="VA">Virginia</option>

<option value="WA">Washington</option>

<option value="WV">West Virginia</option>

<option value="WI">Wisconsin</option>

<option value="WY">Wyoming</option>

</select>

</div>

</div>

</div>

</div>

<div class="textinput basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="account_id">Account ID</label>

<div class="text-input-wrapper">

<input type="text" id="account_id" name="account_id" class="low-width">

</div>

<p class="description-text">If known</p>

</div>

</div>

</div>

<div class="selection basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<fieldset

<legend<span class="required-field">*</span>I have a billing or enrollment question regarding</legend>

<div class="checkBox">

<input type="radio" id="question_regarding-effective-date" name="question_regarding" value="Effective Date" data-rule-required="true" data-msg-required="Please select an option" />

<label for="question_regarding-effective-date"<span</span>Effective Date</label>

</div>

<div class="checkBox">

<input type="radio" id="question_regarding-eft/payment-options" name="question_regarding" value="EFT/Payment Options" data-rule-required="true" data-msg-required="Please select an option" />

<label for="question_regarding-eft/payment-options"<span</span>EFT/Payment Options</label>

</div>

<div class="checkBox">

<input type="radio" id="question_regarding-plan-changes" name="question_regarding" value="Plan Changes" data-rule-required="true" data-msg-required="Please select an option" />

<label for="question_regarding-plan-changes"<span</span>Plan Changes</label>

</div>

<div class="checkBox">

<input type="radio" id="question_regarding-rate-increase" name="question_regarding" value="Rate Increase" data-rule-required="true" data-msg-required="Please select an option" />

<label for="question_regarding-rate-increase"<span</span>Rate Increase</label>

</div>

<div class="checkBox">

<input type="radio" id="question_regarding-other" name="question_regarding" value="Other" data-rule-required="true" data-msg-required="Please select an option" />

<label for="question_regarding-other"<span</span>Other</label>

</div>

</fieldset

</div>

</div>

</div>

</div>

<div class="visible-phone">

<div class="wizard-buttons">

<a href="#" class="blueBtn graybg wizard-button-previous">Previous</a>

<a href="#" class="blueBtn graybg wizard-button-next">Next</a>

</div>

</div>

</div>

<div class="wizard-section hide" data-section-id="3">

<div class="visible-phone">

<div class="wizard">

<div class="wizard-info">3 of 3</div>

<div class="wizard-title">

<h4>Question</h4>

</div>

</div>

</div>

<div class="form-content-3 parsys">

<div class="responsiveLayout section">

<div class="hidden-phone">

<div class="articleModule parbase section">

<div class="articleModule ">

<h5 h2 class="formSubheading">3) Question</h5 h2

</div>

</div>

</div>

</div>

<div class="textinput basicformcomponent section">

<div class="row-fluid">

<div class="span12">

<label for="questions"<span class="required-field">*</span>Question</label>

<div class="text-input-wrapper">

<textarea rows="5" id="questions" name="questions" data-rule-required="true" data-msg-required="Please enter your question"</textarea

</div>

</div>

</div>

</div>

<div class="hiddenfield basicformcomponent section">

<input type="hidden" name="to" value="" />

</div>

<div class="hiddenfield basicformcomponent section">

<input type="hidden" name="from" value="" />

</div>

<div class="hiddenfield basicformcomponent section">

<input type="hidden" name="subject" value="Billing and Enrollment Inquiry" />

</div>

<div class="hiddenfield basicformcomponent section">

<input type="hidden" name="mailmsg_template" value="../templates/billing-enrollment.mt" />

</div>

<div class="hiddenfield basicformcomponent section">

<input type="hidden" name="html_editerr_template" value="templates/edit.html" />

</div>

<div class="hiddenfield basicformcomponent section">

<input type="hidden" name="html_success_template" value="../confirmation-pages/confirmation-producers.html" />

</div>

<div class="articleModule parbase section">

<div class="articleModule ">

<h2 class="formSubheading">Important!</h2>

<p>Please check this form carefully before clicking on the &quot;Submit&quot; button. Some browsers will not keep your information, and you will have to re-type all of it if you miss filling in any of the required fields.

<br

<br> Your request has been sent successfully if you receive a confirmation after clicking the &quot;Submit&quot; button.</p>

</div>

</div>

</div>

<div class="visible-phone">

<div class="wizard-buttons">

<a href="#" class="blueBtn graybg wizard-button-previous">Previous</a>

</div>

</div>

<div class="form-submit-buttons span12">

<input type="submit" class="blueBtn" value="Submit">

</div>

</div>

</form>

Last Updated

2017-0926

Site Example

Equivalent JSP Component(s)

None

HTML Changes

CSS Changes

File:

JavaScript Changes

Notes

10.31.17 © 2017 Primacy / Proprietary & Confidential / theprimacy.com 7 / 9