Skip to content

Unlabelled Inputs

Mark Reeves edited this page Dec 28, 2017 · 7 revisions

Any component which creates a labellable element (except buttons or those in a read-only state) or a fieldset (including WFieldSet and complex form controls) must have an accessible label of some form.

This label is usually in the form of a WLabel (or WDecoratedLabel for WFieldSet). If the label should not appear in the UI then it may be removed from the view but still remain accessible.

Invisible labels

Sometimes a UI design has form controls which do not have obvious, clearly visible labels. This requires that the purpose of the form control be obvious from context. It could, for example, be appropriate in a multi-line address box to have a second address line text input which does not have a visible label.

There are methods to ensure an application has accessible WCAG 2.0 compliant form controls even when visible labels are not wanted.

Form control components

A form control component should be labelled with a WLabel. If the WLabel is not to appear in the UI then it can be moved out of view using its hidden property using setHidden(true).

There are alternatives for WComponent form controls when the UI should not show a visible label and using WLabel is inefficient or impossible:

If either of these options are used then the relevant property should, of course, be set to a reasonable value. Both of these are controversial and it is almost always better to use a WLabel, even if that WLabel is then moved out of the view.

WFieldSet

If a WFieldSet should appear without its legend then the WFieldSet appearance should be used using either setFrameType(WFieldSet.FrameType.NO_TEXT) or setFrameType(WFieldSet.FrameType.NONE).

It is rather difficult to justify a fieldset without a visible legend but it could be appropriate if:

Unlabelled controls

If any WComponent form controls (not in a read-only state) or WFieldSets are not appropriately labelled then a warning label may appear in the UI. This will be of the form "This component requires a label" as shown in the illustration below.

Unlabelled WTextField with warning label

This warning label is a valid HTML label element if the Unlabelled component outputs a labellable element and forms part of the legend if the component is a WFieldSet or complex form control.

This warning will be generated if:

  • the label/legend is absent or if it is present but has no palpable text content and does not contain an image with a non-empty alt attribute; and
  • the component's toolTip property (where available) is absent or set to an empty string; and
  • the component's accessibleText property (where available) is absent or set to an empty string.

The label/legend containing the warning will be forced to be on-screen even of the settings of the WLabel or labelled component are such that the label/legend should be out of the viewport.

There are no exceptions to this. There are several ways to make (moderately and more-or-less-acceptably) accessible UIs without visible labels as described above. Having a form control with no palpable label (or equivalent) is simply unacceptable

Further information

Clone this wiki locally