<p>COMPONENT DOCUMENTATION Aetna AEM Website Accessibility Remediation Version 1.0</p><p>© 2018 Primacy / Proprietary & Confidential / theprimacy.com COMPONENT DOCUMENTATION</p><p>Aetna AEM Website Accessibility Remediation</p><p>1. Project</p><p>Aetna.com</p><p>2. HTML Component</p><p>3.</p><p>4. Last Updated</p><p>2017-11-01</p><p>5. Site Example https://www.aetna.com/insurance-producer/forms/individual-market/licensing-appointment.html </p><p>6. Equivalent JSP Component(s)</p><p>None</p><p>7.</p><p>8. HTML Changes</p><p><div class="form basicformcomponent section"> <div class="row-fluid"> <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 2</div> <div class="wizard-title"> <h4 h2 class="formSubheading">Contact Information</h4 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 h2 class="formSubheading">1) Contact Information</h5 h2> </div> </div> </div> </div></p><p>4.25.18 © 2018 Primacy / Proprietary & Confidential / theprimacy.com 2 / 83 COMPONENT DOCUMENTATION</p><p>Aetna AEM Website Accessibility Remediation <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" size="9" maxlength="9" data-rule-required="true" data- msg-required="Please enter the tax ID number Tax ID should be a 9 digit numeric value" class="low-width" data- rule-minlength="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" aria-required="true"> </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="">Select Phone or Email</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 [email protected])</label> <div class="text-input-wrapper"> <input type="text" id="email3" name="email3" placeholder="[email protected]" 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></p><p>4.25.18 © 2018 Primacy / Proprietary & Confidential / theprimacy.com 3 / 83 COMPONENT DOCUMENTATION</p><p>Aetna AEM Website Accessibility Remediation </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> <label><span class="required-field">*</span>Phone</label></legend> <label for="Phone1">Enter a 10 digit phone number</label> <div class="phone-wrapper"> <div class="col col1"> <input type="text" aria-label="Phone - Area Code Telephone 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 Telephone 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 Telephone 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 2</div> <div class="wizard-title"> <h4>Licensing & Appointment 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 "> <h5 h2 class="formSubheading">2)&nbsp;Licensing &amp; Appointment Inquiry</h5 h2> </div></p><p>4.25.18 © 2018 Primacy / Proprietary & Confidential / theprimacy.com 4 / 83 COMPONENT DOCUMENTATION</p><p>Aetna AEM Website Accessibility Remediation </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 question about</legend> <div class="checkBox"> <input type="radio" id="question_about-adding-appointment-for-another-state" name="question_about" value="Adding appointment for another state" data-rule-required="true" data-msg- required="Please select an option" /> <label for="question_about-adding-appointment-for-another-state"><span></span>Adding appointment for another state</label> </div> </fieldset> </div> </div> </div> <div class="responsiveLayout section"> <div class="visible-desktop"> <div class="selection basicformcomponent section"> <div class="row-fluid"> <div class="span12"> <div class="checkBox"> <input type="radio" id="question_about-i-need-to-update-my-license" name="question_about" value="I need to update my license" data-rule-required="true" data-msg-required="Please select an option" /> <label for="question_about-i-need-to-update-my-license"><span></span>I need to update my license</label> </div> </div> </div> </div> <div class="filefield basicformcomponent section"> <div class="row-fluid"> <div class="span12"> <label for="attachment_file1-txt">Attachment 1</label> <div class="choose-file-btn-wrapper"> <a href="#" class="choose-file-btn blueBtn">Choose file <span class="sr-only">Choose file for attachment #1</span></a> </div> <div class="choose-file-txt-wrapper"> <input type="text" name="attachment_file1-txt" id="attachment_file1-txt" readonly="readonly" class="choose-file-txt" /> <label for="attachment_file1" class="hidden">Attachment 1</label> </div> <input type="file" id="attachment_file1" name="attachment_file1" class="hidden"> </div> </div> </div> <div class="filefield basicformcomponent section"> <div class="row-fluid"> <div class="span12"> <label for="attachment_file2-txt">Attachment 2</label> <div class="choose-file-btn-wrapper"> <a href="#" class="choose-file-btn blueBtn">Choose file <span class="sr-only">Choose file for attachment #2</span></a> </div> <div class="choose-file-txt-wrapper"> <input type="text" name="attachment_file2-txt" id="attachment_file2-txt" readonly="readonly" class="choose-file-txt" /> </div> <label for="attachment_file2" class="hidden">Attachment 2</label></p><p><input type="file" id="attachment_file2" name="attachment_file2" class="hidden"> </div></p><p>4.25.18 © 2018 Primacy / Proprietary & Confidential / theprimacy.com 5 / 83 COMPONENT DOCUMENTATION</p><p>Aetna AEM Website Accessibility Remediation </div> </div> </div> </div> <div class="selection basicformcomponent section"> <div class="row-fluid"> <div class="span12"> <div class="checkBox"> <input type="radio" id="question_about-other" name="question_about" value="Other" data-rule- required="true" data-msg-required="Please select an option" /> <label for="question_about-other"><span></span>Other</label> </div></p><p><div class="filefield 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></p><p></div> </div> </div></p><p></div> </fieldset></p><p></div> </div> </div></p><p><div class="responsiveLayout section"> <div class="hidden-desktop"> <div class="narrowContainer section"> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="articleModule parbase section"> <div class="articleModule "> <p style="margin: 0 0 25px 25px;">Note: If you wish to update or renew your license, please visit the site on your desktop computer.</p> </div> </div> </div> </div> </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="[email protected]" /></p><p>4.25.18 © 2018 Primacy / Proprietary & Confidential / theprimacy.com 6 / 83 COMPONENT DOCUMENTATION</p><p>Aetna AEM Website Accessibility Remediation </div> <div class="hiddenfield basicformcomponent section"> <input type="hidden" name="from" value="[email protected]" /> </div> <div class="hiddenfield basicformcomponent section"> <input type="hidden" name="subject" value="Licensing and Appointment Inquiry" /> </div> <div class="hiddenfield basicformcomponent section"> <input type="hidden" name="mailmsg_template" value="../templates/licensing-appointment.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> <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> </div> <script type="text/javascript"> // before code, objects</p><p>$(function() { if (Aetna.isCQPreviewMode) { // js dialog code $('#contact-email, #contact-phone').hide(); $('#contact-email input, #contact-phone input').addClass('ignore');</p><p>$('select[name="bestwaytocontact"]').change(function() { var selectedWay = $(this).val(); $('#contact-email, #contact-phone').hide(); $('#contact-email input, #contact-phone input').addClass('ignore').val('-');</p><p> if (selectedWay == 'Email') { $('#contact-email').show(); $('#contact-email input').removeClass('ignore').val(''); } else { $('#contact-phone').show(); $('#contact-phone input').removeClass('ignore').val(''); } });</p><p>// list variables overwrite</p><p>} }); </script> </div></p><p>9. CSS Changes</p><p>File: </p><p>4.25.18 © 2018 Primacy / Proprietary & Confidential / theprimacy.com 7 / 83 COMPONENT DOCUMENTATION</p><p>Aetna AEM Website Accessibility Remediation 10. JavaScript Changes</p><p>11. Notes</p><p>4.25.18 © 2018 Primacy / Proprietary & Confidential / theprimacy.com 8 / 83</p>