Adding aria-label to dropdown using contact7 form plugin

Question

Am using contact7 plugin to design form for my client. I want to make it ADA compliant, somehow not able to add aria-label to dropdown boxes. This is how my code looks in contact7 plugin [select* companysize class:form-control "10-100" "101-500" "501-1000" "1001-2000"]. I can not add label as clients wants the label as invisible.

Answer 1

Since WordPress comes with jQuery bundled, you can either use jQuery or JS. Here are axamples of both. What you would have to do is find the class or id of the input field and change it in the below examples as well as the aria label value you desire. If you have multiple inputs, you would select them using their class and then add the attribute to them in the loop.

jQuery Example

jQuery(document).ready(function( $ ) {
    
  let $input = $( '#nameInput' );
  $input.attr( 'aria-label','aria-value' );
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="nameInput" />

JS Example

let inputField = document.getElementById( 'nameInput' );

inputField.setAttribute('aria-label','value of label');

<input id="nameInput" />