I have been told that adding the field description below a field is not the way how screen readers expect it as they are reading from top to bottom and blind people are getting told what they should enter after the input box, what is not the correct usability and will confuse them a lot.

Screen reader should read this order:

  1. Description
  2. Label
  3. Input

Today code:

<div class="form-item form-type-textfield form-item-form-key">
  <label for="edit-form-key">Field Key <span class="form-required ym-required" title="This field is required.">*</span></label>
<input type="text" id="edit-form-key" name="form_key" value="address" size="60" maxlength="128" class="form-text required">
<div class="description">Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.</div>
</div>

Accessible version:

<div class="form-item form-type-textfield form-item-form-key">
  <div class="description">Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.</div>
  <label for="edit-form-key">Field Key <span class="form-required ym-required" title="This field is required.">*</span></label>
<input type="text" id="edit-form-key" name="form_key" value="address" size="60" maxlength="128" class="form-text required">
</div>