Solution 1 :

You need to have an element with an id set to myModalLabel which hold the label for the modal:

The aria-labelledby property enables authors to reference other elements on the page to define an accessible name. For example, the following switch is named by the text content of a previous sibling element.

<span id="night-mode-label">Night mode</span>
<span role="switch" aria-checked="false" tabindex="0" aria-labelledby="night-mode-label"></span>

Source: https://www.w3.org/TR/wai-aria-practices/#naming_with_aria-labelledby

So in your case, it could be:

<div class="modal fade" id="siteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <button type="button" class="close modal-close-button" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <div class="modal-content">
                              <!-- ⬇⬇⬇⬇⬇⬇⬇⬇ -->
      <div class="modal-header" id="myModalLabel">Fill in the form</div>
                              <!-- ⬆⬆⬆⬆⬆⬆⬆⬆ -->
      <div class="modal-body">
        [pirate_forms]
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>

Problem :

I have a web page that has a broken ARIA reference upon doing a test. Specifically the aria-labelledby="myModalLabel" is showing an error. My understanding is that there needs to be an id somewhere that references myModalLabel, but I am not sure where if that’s the case.

<div class="modal fade" id="siteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <button type="button" class="close modal-close-button" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <div class="modal-content">
      <div class="modal-body">
        [pirate_forms]
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>

By