Creating accessible forms
To create a complete accessible form in an HTML5 web page, you need to keep in mind all the important form input control attributes and factors. It should have all the form controls and features for all capable and disabled internet users, here an accessible web page form should have all the form essential features and form attributes available. In which, Windows screen reader, keyboard navigation or alternative form input methods, common and advanced form attributes and features should be present.
So, let’s know all the factors and features to create an accessible form in an HTML5 web page.
Use of HTML5 Semantic HTML.
In modern web development, semantic tags should be used in the design form element in HTML5 web page, where all HTML5 semantic tags should be compatible with all today’s modern web browsers and internet technologies.
Where as in HTML5 form, use <label>, <input>, <textarea>, <select>, etc. in the required form tag element in the input form control to be collected.
Example of form semantic tag control.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title>Example of form semantic tag control. </title>
</head>
<fieldset>
<legend>Employee Data</legend>
<label for=”empname”>Employee Name – </label>
<input type=”text” id=”empname” name=”empname” required>
<br><br>
<label for=”mobile”>Mobile – </label>
<input type=”number” id=”mobile” name=”mobile” required>
<br><br>
<label for=”email”>Email – </label>
<input type=”email” id=”email” name=”email” required>
</fieldset>
</body>
</html>
Add clear labels to HTML5 form input controls.
Design form input control labels in HTML5 web page explain the controls used in the form, form label control provides a label to each form input control, so that the internet user gets detailed information about the control while filling the form.
Use form label attributes along with for form attributes to relate the label form control to form related controls. You have to know the label in the form, and manage the form input control accordingly.
Example of form label control.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of form label control. </title>
</head>
<label for=”visitorname”>Visitor name – </label>
<input type=”text” id=” visitorname ” name=” visitorname ” required>
</body>
</html>
Apply accessible error messages in HTML5 web page.
Design form error messages in HTML5 web page Displays a system error message in the web browser when the web visitor inputs the wrong form control.
And the form guides the user to use and apply that control in the proper syntax and format. Design form error messages in HTML5 web page Apply aria-describedby form attributes to connect the relevant form field.
Example of error message in HTML5 web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of error message in HTML5 web page. </title>
</head>
<label for=”password”>Password -</label>
<input type=”password” id=”password” name=”password” aria-describedby=”password-error” required>
<span id=”password-error” role=”alert”>Enter Password At least 6 Character. </span>
</body>
</html>
Define HTML5 keyboard accessibility.
Use form keyboard accessibility attributes in HTML5 web page allows form users to access and manage form controls with the keyboard without a mouse pointing device, where keyboard accessibility features are helpful to the web user in form interaction through keyboard in form feel and navigation.
HTML5 web developer defines all controls designed in the form. Such as, form buttons, input form fields, keyboard navigation, tab key, etc. are made user accessible.
Keyboard accessibility in HTML5 forms Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Keyboard accessibility in HTML5 forms Example. </title>
</head>
<form>
<label for=”emp-first-name”>Employee First Name -</label>
<input type=”text” id=”emp-first-name” name=”emp-first-name” required>
<label for=”emp-last-name”>Employee Last Name – </label>
<input type=”text” id=”emp-last-name” name=”emp-last-name” required>
<button type=”submit”>Submit</button>
</form>
</body>
</html>
ARIA attributes in HTML5 designed forms.
ARIA (Accessible Rich Internet Applications) form attributes and features in designed forms on HTML5 web pages improve form reference and user accessibility. Use aria-label controls in form controls as needed, and use aria-required attributes to indicate required form input fields.
Example of ARIA attributes.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of ARIA attributes. </title>
</head>
<label for=”cellphone”>Enter Cellphone Number -</label>
<input type=”text” id=”cellphone” name=”cellphone” aria-label=”Cellphone number” aria-required=”true”>
</body>
</html>
Incorporate HTML5 form focus management.
Proper form focus management in designed forms on HTML5 web pages plays an important role in form track management and form communication with the user. Add or apply form input field autofocus attributes to forms in designed form controls as needed.
Example of HTML5 form focus management.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of HTML5 form focus management. </title>
</head>
<label for=”visitor-name”>Visitor Name -</label>
<input type=”text” id=”visitorname” name=” visitorname ” required autofocus>
</body>
</html>
Group form controls in HTML5 forms.
In HTML5 web pages, group related form controls in a designed form and provide form references in the web page. In the current HTML5 web page, use <fieldset> to group related form fields in the designed form and <legend> form tags to provide labels for the groups. If needed, hidden form labels in the designed form are readable by screen readers.
Example of Group form controls in an HTML5 form.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>HTML5 Group Form Control</title>
</head>
<fieldset>
<legend>Employee Address</legend>
<label for=”street-number”>Street Number -</label>
<input type=”text” id=” street-number ” name=” street-number ” required>
<label for=”mobile”>Mobile Number -</label>
<input type=”text” id=” mobile ” name=” mobile ” required>
<label for=”city”>City -</label>
<input type=”text” id=”city” name=”city” required>
<label for=”pin”>Pin Code – </label>
<input type=”text” id=”pin” name=”pin” required>
</fieldset>
</body>
</html>
Validate HTML5 form input controls.
Input form controls in a designed form in HTML5 web pages validate the form controls used in the form, assist the form user in inputting form data, and display input error messages in the form.
Form input restrictions in a designed form Apply required attributes, pattern attributes, minimum attributes, and maximum attributes in HTML5 validate attributes.
Example of HTML5 Validate form input controls.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Example of HTML5 Validate form input controls. </title>
</head>
<form>
<label for=”mobile”>Mobile Number – </label>
<input type=”number” id=”mobile” name=”mobile” min=”1″ max=”10″ required>
<input type=”submit” value=”submit”>
<br><br>
</form>
</body>
</html>
Test HTML5 form input controls.
Test input form controls in an HTML5 web page with technical help to design forms that are ready to use and flexible.
Use screen readers such as NVDA and VoiceOver features to test how forms are read and interacted with on a web page.
Forms provide clear instructions and help.
Clear instructions to design forms in HTML5 web pages provide the proper syntax and methods for the web visitor to understand the form. Apply <small> tags and <span> tags to forms for proper guidance and instruction on form controls to design web pages in HTML5.
Forms provide clear instructions and help Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Forms provide clear instructions and help Example. </title>
</head>
<label for=”password”>Enter Password – </label>
<input type=”password” id=”password” name=”password” minlength=”6″ required>
<small>You Enter Must Password At Least 6 Character Long.</small>
</body>
</html>
