Contact Us: Make "disabled" inputs "readonly"

[mpaiva-aem]

Navigation for screen-reader and keyboard only users often depends on focus order. Since disabled fields are removed from the focus order, they can't be navigated to using keyboard shortcuts, which are a primary mode of navigation for many AT users.

Here is how to make text inputs read-only, ensuring users can't change the content but still allowing the inputs to be recognized by assistive technologies.

• Add readonly attribute in the form element – The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.
• Add (Read only) to the label – Inform the user about the "read-only" state applied.
• Add aria-readonly="true" – Inform the assistive technology about the "read-only" state applied.
• Add a different background – Add a utility style class="usa-input bg-base-lightest" to make the read-only input different from the editable state.

Code fix example for City field

<label for="edit-city" class="usa-label control-label">City (Read only)</label>
<input 
    autocomplete="" 
    data-drupal-selector="edit-city" 
    type="text" 
    id="edit-city" 
    name="city" 
    value="" 
    size="60" 
    maxlength="30" 
    placeholder="City" 
    class="form-text usa-input bg-base-lightest" 
    aria-readonly="true"
    readonly >