The first thing we have to do is ensure that the JavaScript for the A11yHCM plugin is loaded. Include the JS file in the head of the page, after bootstrap.min.js and jquery.min.js. Observe the following code:

    <script src="js/alert.js"></script>
    <script src="js/carousel.js"></script>
    <script src="js/a11yhcm.js"></script>

Let's add the new High Contrast Mode option to the Profile drop-down. We will also include a contrast icon from Font Awesome, and we want to load styles/myphoto-hcm.css:

    <ul class="navbar-nav pull-right">
   <li class="nav-item dropdown ">
      <a href="#" class="nav-link dropdown-toggle" data-toggle= 
         "dropdown" role="button"
         aria-haspopup="true" aria-expanded="false"> Profile <span 
         class="caret"></span>
      </a>
      <div class="dropdown-menu dropdown-menu-right">
         <a class="dropdown-item" href="#" data-toggle="modal" data-
            target="#profile-modal">
         <i class="fa fa-user"></i> Profile
         </a>
         <a class="dropdown-item" href="#" data-toggle="modal" data-
            target= "#settings-modal">
         <i class="fa fa-cogs"></i> Settings
         </a>
         <a class="dropdown-item a11yhcm" href="#" data-
            a11yhcm="styles/myphoto-hcm.css">
         <i class="fa fa-adjust"></i> High Contrast Mode
         </a> 
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#"><i class="fa fa-sign-
            out"></i> Logout</a>
      </div>
   </li>
</ul>

Take a look at the screenshot in figure 6.13 to see the menu in action:

Great. Now, of course, when we click on High Contrast Mode, we won't able to see any visual changes as we haven't actually created styles/myphoto-hcm.css. However, if we inspect the DOM, we should be able to see the CSS file referenced in the head. Take a look at the following screenshot:

Click on the High Contrast Mode button again, and the link element should be removed. Take a look at the following screenshot:

That's great, our plugin is working. Let's pass in a non-default value to be used as the ID for the link element to ensure that that's also working as expected:

    <a href="#" class="dropdown-item a11yhcm" data-
    a11yhcm="styles/myphoto-hcm.css" a11yhcm-id="myphoto-hcm">

Take a look at the following screenshot:

That's perfect. All functionality is working just like we wanted. Now, let's get to the CSS!