A11yCraft

Appearance

Forms ​

These techniques are used when you require user input and will help users understand the type of content that you're asking for.

Accessibility Checklist ​

  • Does each input have a visible label?
  • Is the label linked to the input using the for and id attributes?
  • Are the labels descriptive?
  • Can the users tell which fields are required?
  • Are you using more than just colour to indicate the required fields?
  • Have you checked your CSS to make sure the focus is still visible?
  • Are you using standard HTML controls?
    • If No, have you made sure any custom HTML components are accessible?

Visible Labels ​

A visible label should be present using the html label control. You can use CSS to style this as required.

IMPORTANT

Make sure the for attribute on the label matches the id attribute of the input. The id attribute should also be unique for the page.

Example

html
<label for="surname"> Surname </label>
<input type="text" id="surname" name="surname" />

Descriptive Labels ​

Labels should be descriptive to help the user understand what information they need to input.

Labels do not need to be long, and a couple of words is perfectly acceptable as long as they describe the input. It is helpful to also ensure that these labels are consistent when you need that same information in a different form.

Example

html
<label for="firstname"> First Name </label>
<input type="text" id="firstname" name="firstname" />

<label for="lastname"> Last Name </label>
<input type="text" id="lastname" name="lastname" />

Required Fields ​

It should be easy to tell which fields are required by using either text or a legend.

IMPORTANT

Do not just use colour to indicate the required fields as this will not be accessible to users who require a screen reader and may also hinder users that are colour blind.

Example

html
<label for="firstname"> First Name (required) </label>
<input type="text" id="firstname" name="firstname" />

Non-Standard Controls ​

If you make your own custom controls, you will need to do additional work to ensure that the name and role can be programmatically determined. You may want to use components that are already accessible in your programming language to make use of the accessibility APIs.

Check your custom control carefully against the WCAG criteria 4.1.2 Name, Role, Value and ensure that when you navigate the page with the keyboard, the focus is visible.

Associated WCAG Criteria ​

1.1.1 Non-Text Content (Level A)

All non-text content visible on the website has a text alternative that serves the same purpose. See the WCAG 2.2 Guidelines for Non-Text Content for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Non-Text Content

1.3.1 Info and Relationships (Level A)

Information and relationships are accessible to non-sighted users. See the WCAG 2.2 Guidelines for Info and Relationships for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Info and Relationships

1.4.1 Use of Color (Level A)

Information should be accessible in the text and not only by color. See the WCAG 2.2 Guidelines for Use of Color for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Use of Color

2.4.7 Focus Visible (Level AA)

It should always be possible to see where you are on the page via a focus indicator. This is mostly seen when using the keyboard to navigate the webpage. See the WCAG 2.2 Guidelines for Focus Visible for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Focus Visible

3.3.2 Labels or Instructions (Level A)

Labels or instructions are present to tell users what form they need to provide. See the WCAG 2.2 Guidelines for Labels or Instructions for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Labels or Instructions

4.1.2 Name, Role, Value (Level A)

The name and role of user interface components can be determined programmatically. The value can also be set programmatically. See the WCAG 2.2 Guidelines for Name, Role, Value for more information.

These examples used the following techniques:

See the WCAG documentation for Other Techniques for Name, Role, Value

If you do not use the standard HTML controls, you might find the following links useful: