Variations in Labeling and Describing an Input for Accessibility Testing

Variety of examples in order to see how inputs report when they are associated with label, aria-label, aria-labelledby, and aria-describedby — along with usage of placeholder, title, and simple landmark wrapping.

Example 0: Field with Label and Placeholder

Expected Result: Label read, then Placeholder (as a description, or will it be ignored? and what happens with the placeholder is replaced with a typed value? does it continue to be announced?)

Example 0a: Field with Label that is aria-hidden

Expected Result: Uncertain. Will label still be announced in for-id associations where the label is not in the accessibility tree? (Note: this will fail an accessibility validator.)

Example 0a1: Field with Label that is Display:None

Expected Result: Uncertain. Will label still be announced in for-id associations where the label is not in the accessibility tree? (Note: this will fail an accessibility validator.)

Example 0a2: Field with Label that is aria-hidden and label referenced using aria-labelledby

Expected Result: Label should be accessibly associated and announced when tabbed or browsed to.

Example 0a3: Field with Label that is aria-hidden and labeled redundantly via aria-label

Expected Result: Text value of aria-label should be accessible and announced when tabbed or browsed to.

Example 0b: Field with Placeholder Only

Expected Result: Screen reader will likely announce, though placeholder is a “hint”. Field has no accessible name. (Note: this will fail an accessibility validator.)

Example 0c: Field with Title Only

Expected Result: Screen reader will announce. Title becomes the accessible name, though this the least accessible version for keyboard-only users, since most browsers won't show the title on focus.

Example 0d: Field with Implicit/Wrapping Label

Expected Result: Screen reader will announce the label as the accessible name of the field.

Example 0e: Field with Implicit/Wrapping Label and Placeholder

Expected Result: Screen reader will announce the label as the accessible name of the field. Placeholder may be announced as a description.

Example 0f: Field with Implicit/Wrapping Label and Placeholder, All Wrapped in a Search Role

Expected Result: Same as 0e, but with possibility of announcement of the search landmark.

Example 0g: Field Wrapped by Label, with Accessible Name Possibly Coming from Field Value, All Wrapped in a Search Role

Expected Result: No valid accessible name, but screen readers may announce landmark role or the value currently in the field. (Note: this will fail an accessibility validator.)

Example 0h: Field Wrapped by Label, Field with Placeholder, All Wrapped in a Search Role

Expected Result: Same as 0g, but with the possibility of announcement of the placeholder. (Note: this will fail an accessibility validator.)

Example 1: Field with Label and Describedby

Expected Result: Label read, then Describedby

Example 1a: Field with Faux ARIA-Hidden and Visually Hidden Label ARIA Labelledby Associated, with Placeholder as a Visual Label

Expected Result: Non-visual label announced and perhaps placeholder as a description

Example 2: Field with Two ARIA Labelledby and One ARIA Describedby

Expected Result: Labelledbys read, then Describedby

Example 2a: Field with Two ARIA Labelledby, One ARIA Describedby, and Placeholder

Expected Result: Labelledbys read, then Describedby, placeholder is ignored(?)

Example 3: Field with Label, Two Labelledby, and Two Describedby

Expected Result: Label read, then Labelledby One, then Describedby One and Two

Example 4: Field with Label, Two Labelledby, and Three Describedby

Expected Result: Label read, then Labelledby One, then Describedby One, Two, and Three

Example 5: Field with Label, Two Labelledby, and Three Describedby, Labels and Describedbys in Reverse Order

Expected Result: Labeledby One read, then label, then Describedby Three, Two, and One

Example 6: Field with Label, ARIA-Label, and Describedbys in Reverse Order

Expected Result: ARIA label (HTML label is ignored), then Describedby Three, Two, One. (Note: ARIA labelledby will override the ARIA label. Do not use both.)

Example 7: Select with Label, ARIA-Label, and Describedbys in Reverse Order

Expected Result: ARIA label (HTML label is ignored), then Describedby Three, Two, One.

Inputs with Reused IDs and aria-hidden labels using labelledby and aria-label for labels, widgets all in shadow DOM

The Labelledby and Describedby's