[Tutorial Feedback]

Forms and how to provide long instructions outside labels.

For longer explications a text with up to 200 characters needs to be
provided on demand. User can click on an info-icon and the text will be
shown in the layout before the field, pushing the field downwards. The text
gets hidden with a second click on the icon. The info-icon is placed after
the label, before the field. The long instructions are seldom but sometimes
necessary.

How can this on-demand mechanism be implemented for keyboard-use and for
screen-reader-use?

We use this feature in a responsive web application with a focus for
mobile, tablet and desktop.

We use the long instruction in addition to inline short instructions that
show up on.focus directly after the field where we tend to use
"aria-labelledby" to associate the short instructions with the form field.

http://www.w3.org/WAI/tutorials/forms/instructions/#providing-instructions-outside-labels


Kind regards, Sven