If you have any difficulties reading these files with a screen reader, please contact the Accessibility Hub Coordinator at email@example.com
Online forms can be handy way to get assistance, search, request, or submit information to be sent somewhere else. They can also be accessibility nightmares if done incorrectly.
Labels should be named and placed in a logical order. For example a form that asks you to input your name should have the <label> to the immediate left of the text-box. Labels should also be to the right of radio buttons and checkboxes.
<input type="text" name="name" id="name" /></p>
When navigating web forms anyone can use the “Tab” key to move from field to field. Someone using a screen reader will make good use of the Tab key. Most of the time, the “Tab” will move focus in the logical order of the form (top to bottom) but not always. To ensure a logical movement, you can set the “tab index” attribute for each form element to set the order.
<input type="text" name="name" id="name" tabindex="1" /></p>
Any field that is required to be filled out should be labelled using proper symbols and text such as (* required). If required fields are indication by a bold font or the colour red, a screen reader won’t be able to identify those fields as required.
If a “Submit” button is an image, ensure it has an Alt tag saying “Submit”.