How to do accessible inline errors for form selects?

We need to update our forms to be accessibility compliant. I am looking for information on how to write an inline error for a form select. I have the form field labeled and have an inline error, but the readers do not announce the error.

Here is what we are using

<div class="select-wrapper">
   <label for="securityQuestion" class="control-label bolded">Security Question</label>
   <select id="securityQuestion" name="securityQuestion" class="form-control">
     <option value="0">Select a Question</option>
     <option value="10">What is your mother's maiden name?</option>
     <option value="9">What's your town of birth?</option>
     <option value="11">What is your father's middle name?</option>
     <option value="12">What street did you live on when you were 10 years old?</option>
   </select>
   <div class="clear form-error-msg" id="securityQuestion_error"><span class="shop-icon icon" aria-label="Attention">r</span><span id="error-msg-text">Please select a security hint question.</span></div>
 </div>

So if the user doesn't select an option and submits we dynamically inject an error jut after to from field as shown above. This works fine for inputs and text boxes, but for the select, the reader skips it.

I been reading different blogs and specs and have read many times, don't use selects, but use radios or text boxes instead.

So any ideas?