Alternative Label Arrangements

This page is testing alternatives for form input labels with different screen readers.

Wrapped labels (Belt)

This is the simplest version of a wrapped label. There are no additional spans or divs.

Name

This version has a basic wrapped label with no for/id relationship. It uses the spans/divs from IDS structure.

Name

This version has a basic wrapped label, no for/id relationship, but aria-hidden="true" on the span that includes the text node. This removes the text node from the accessibility tree and the input is unlabeled.

This version has a basic wrapped label, no for/id relationship, but aria-label="Name" on the label tag

Name

This version has a basic wrapped label, but aria-labelledby on input pointing to the label

Name

Wrapped and Connected (Belt and Buckle)

This is the simplest version has a wrapped label for/id connection. It has no spans or divs.

Name

This version has a wrapped label, but also uses the for/id connection

Name

This version has a wrapped label, the for/id connection, and aria-label on the input

Name

Direct connections (Buckle)

The following test examples do not wrap the label around the input. They use the for/id connection to connect the label and input.

This is the simplest version. It has no spans or divs

Customer Name:

This is a basic version of using direct connection. It uses the spans/divs for additional structure.

Customer Name:

This uses the connected label, but also uses an aria-label on the input

Customer Name: