Placeholder text is placed between the label and the input field:
Correct use of placeholders
"Your employee ID. This can be found in your intranet work profile. Example: a1234567–89."
What does this solution give:
a hierarchy is provided, connected both new zealand email list visually and structurally. The heading indicates the purpose of the field, then there is a hint for correct filling with an example, and the block ends with an empty input field;
the placeholder is considered by the browser as ordinary text and, if necessary, is translated into another language;
the user does not consider the hint text as already entered data;
the filler text is easy to read even in poor conditions;
the hint will not disappear when filling in the field;
The text can be styled using CSS tools and filled with semantic tags.
The placeholder, an example of which we have analyzed, could also be placed under the input field. However, on mobile devices, a numeric keyboard usually appears in this place, which can hide part of the hint:
Correct use of placeholders
This solution is implemented with the following code:
Correct use of placeholders
You can notice a slight difference from the standard for + id link. Here, label is programmatically linked to the input element via id, which has the employee-id value. In turn, between label and input is the p attribute, which serves as a replacement for the placeholder attribute.
The reader may have a completely natural question: "Wouldn't it be easier to stylize the placeholder as a heading?" After all, this way we get rid of unnecessary work. The answer to this question is simple and logical: the developer should make life easier not for himself, but for the potential visitor.
Let's get back to the code. With the aria-describedby attribute, we link the input and p elements, which can be used to set the screen reader reading algorithm. In this case, the content inside the p tag is guaranteed to be read last, and the title and data requested from the user will be read first.
This solution ensures full accessibility of the site for people with visual impairments. The program reading the text will inform the blind user what exactly is required of him and will help him fill out forms by voicing the placeholders. Other visitors who do not have serious vision problems will receive absolutely the same information simply by reading it.
The placeholder text is not tied to the title in any way, so it is easy to manage. For example, you can tell the screen reader to skip the prompts or, conversely, to read each prompt twice. If you make the placeholder part of the title, the latter will become too cumbersome and difficult to perceive by ear.
Implementation in code:
Correct use of placeholders
The web form plays an important role in the structure of the site, directly affects the conversion of the site and, as a result, the owner's profit. Therefore, it is necessary to ensure its accessibility and clarity. The hint text will indicate to the user what data to enter, but this will only work fully in combination with labels.