CANAXESS Web and Digital Accessibility
CANAXESS Web and Digital Accessibility

Accessible Forms

These principles when followed together will make an HTML form accessible up to Web Content Accessible Guidelines 2.0 (WCAG2) AA.

They include optional collapsed background information explaining why the guideline is relevant, and provide additional helpful information along with the WCAG 2 guidelines. They can be read online, downloaded and printed.

Principles of accessible forms

To make an accessible form:

  1. Associate labels to form controls

    A programmatically identifiable relationship helps people navigating with a screen reader.

    Labels provide a visual and programmatic link to understand the type of information required. When a label is programmatically associated to a control using the FOR and ID attributes, the screen reader will announce the type of form control and the label text. Not providing this relationship information will render the form very difficult to use for screen reader users.

    <label for="username">Username</label>
    <input type="text" id="username">

  2. Group related controls together

    The legend and fieldset elements can be used to provide meaning to related controls.

    They provide a convenient way to group related information and allow relationships between controls to be identified in a non-visual way. When a form control inside a fieldset receives focus from a screen reader, the legend element is announced followed by the control label, and lastly the control type.

    <fieldset>
    <legend>Mailing Location</legend>
    <label for="street_address">Street Address</label>
    <input id="street_address" type="text">

    In this example, the screen reader JAWS will announce "Mailing Location, Street Address, Input type and text"

  3. Use CSS to hide a label if necessary

    Sometimes you may not be able to provide a visible label for form controls.

    An offscreen CSS technique allows a label to be associated to a form control and to remain invisible by rendering it offscreen. Do not use the display:none or visibility:hidden styles as this will stop the text from being displayed in the screen reader, instead use an off-screen CSS technique.

    .sr-hidden
    {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
    <label class="sr-hidden" for="search">Search by first name</label>
    <input id="search" type="text">

  4. Clearly identify required controls

    People may not know what form controls to complete, help them out with what to fill in.

    It may not be obvious which controls are mandatory and which are optional. Providing this information in the label will help people. Avoid using the asterisk character to identify mandatory controls, screen readers will announce "star" and if it uses the same font size as the label text can be difficult to identify.

    Additionally, provide a description how to identify required form controls before a user begins filling out the form, i.e. Required fields are identified by the word "required".

    <label for="surname">Surname (this is required)</label>

  5. Don't trigger extra content on focus

    Loading new content when a control has focus is very disorientating if people can't identify the change.

    A control which triggers the display of extra content when receiving focus is very disorientating, especially if this action isn’t explained prior to focusing on the control. Always provide a clear way for a user to trigger an update using link and HTML elements only. Consider using a button with clear text to trigger the change.

    <button name="button">Update content</button>

  6. Provide data formats in the label

    It may not be obvious what data format or data type is required.

    Input restrictions such as the maximum length of characters or entering numbers only, may not be immediately obvious when filling out a form field. Providing these instructions upfront within the label element will reduce errors.

    <label for="dob">Date of birth (dd/mm/yyyy)</label>
    <label for="note">Extra Notes (maximum length 50 characters)</label>

  7. Do not use the disabled attribute

    The disabled attribute affects the screen readers ability to focus and announce form content.

    The disabled attribute will stop the control from receiving focus and will make it difficult for a screen reader user to understand any prefilled readonly information. The readonly attribute allows screen reader focus whilst preserving the original value.

    <input id="searchCriteria" readonly value="search" type="text">

This work is licensed under a Creative Commons Attribution-NonCommerical-ShareAlike 3.0 Unported License.

Designed by CANAXESS www.canaxess.com.au

Free cards and stickers

Some things just look better in person. Signup for a free accessibility information card or pack of four stickers and we'll post them to you in the mail. We'll also add you to our newsletter, where we send you occasional emails about things we think you’ll find useful and interesting, like expert accessibility tips, inspirational customer stories and new service updates.

Privacy

The security and privacy of your data matters to us. Your details are encrypted when they are sent and your address is only ever used to send out the information cards and stickers you have requested. If you would like further details about our security policy please Contact us

Where would you like the card sent?
Which would you like?

Copyright © 2018 CANAXESS Pty Ltd ACN 614 088 416