Example 1 — Form Rendering (Using Core Functions)

This first example is very basic, and demonstrates one of the core 4X methods for ARIA support.

In this case, when a form is submitted and a dynamic inline error message is generated, 4X is used to associate the error with the field and set focus to the field in error. This will cause screen readers to automatically announce the error message when the field receives focus. This is accomplished by setting the Description property for the form field in the accessibility tree.

Since the result of this example will not be obvious to sighted users who are not running a screen reader, it will be important to install Visual ARIA to understand what is happening. There are several options for doing this.

You may need to restart your browser and return to this page after installing the Chrome or Firefox extension.

After running the example code below, activate Visual ARIA and mouse over the form fields to see how 4X has dynamically set the Description property for the form field in error.

Example 1 — Coding Sandbox

Using core 4X features to add enhanced accessibility for assistive technology users.

<div class="form--container">
                                    <form id="frm1">
                                        <fieldset>
                                            <legend> Home Address</legend>
                                            <p>
                                                <label for="strt">Street:</label>
                                                <input type="text" name="street" aria-required="true" id="strt">
                                                <span hidden id="error-01" class="error">Error! Required field. Please enter a Street number and name.</span>
                                            </p>
                                            <p>
                                                <label for="cty">City:</label>
                                                <input type="text" name="city" aria-required="true" id="cty">
                                            </p>
                                            <p>
                                                <label for="zp">Postcode:</label>
                                                <input type="text" name="postcode" aria-required="true" id="pc">
                                            </p>
                                            <p class="select--container">
                                                <label for="ctry">Country:</label>
                                                <input type="text" name="country-input-value" aria-required="true" id="ctry">
                                            </p>
                                        </fieldset>
                                    </form>
                                </div>