Text Controls

Example Feature Comparison Table

Features for Text Controls
Feature Description Best
Practice
Rating
E1 E2 E3 E4 E5 E6 E7 E8 E9 E10 E11 E12 E13
No label markup Bad E1 - - - - - - - - - - - -
Label as value Bad - E2 - - - - - - - - - - -
Label encapsulation Poor - - E3 - - - - - - - - - -
Label as title Poor - - - E4 - - - - - - - - -
Label referencing ID Good - - - - E5 E6 E7 E8 E9 E10 E11 E12 E13
CSS for zooming and focus Good - - - - - E6 E7 E8 E9 E10 E11 E12 E13
Right justified form labels Good - - - - - - E7 - - - - - -
Left justified form labels Good - - - - - - - E8 - - - - -
Required text boxes using image Poor - - - - - - - - E9 - - - -
Required text boxes using off screen text Good - - - - - - - - - E10 E11 E12 E13
Invalid text boxes using off screen text Good - - - - - - - - - - E11 E12 E13
Accessible instructions using tabindex Poor - - - - - - - - - - - - -
Accessible instructions using off screen text Good - - - - - - - - - - - - -

Example List

Example 1: Text box control with no label
Bad: No label markup
Example 2: Text box control with label as content
Bad: Label as value
Example 3: Text box control with label encapsulating form control
Poor: Label encapsulation
Example 4: Text box control labeled using TITLE attribute
Poor: Label as title
Example 5: Text input control label references form control id
Good: Label referencing ID
Example 6: CSS for zooming and focus styling
Good: Label referencing ID
Good: CSS for zooming and focus
Example 7: CSS used to right justify labels
Good: Label referencing ID
Good: CSS for zooming and focus
Good: Right justified form labels
Example 8: CSS used to left justify labels
Good: Label referencing ID
Good: CSS for zooming and focus
Good: Left justified form labels
Example 9: Required text box using image
Good: Label referencing ID
Good: CSS for zooming and focus
Poor: Required text boxes using image
Example 10: Required text boxes using hidden text
Good: Label referencing ID
Good: CSS for zooming and focus
Good: Required text boxes using off screen text
Example 11: Invalid text boxes using hidden text
Good: Label referencing ID
Good: CSS for zooming and focus
Good: Required text boxes using off screen text
Good: Invalid text boxes using off screen text
Example 12: Instructions using tabindex
Good: Label referencing ID
Good: CSS for zooming and focus
Good: Required text boxes using off screen text
Good: Invalid text boxes using off screen text
Example 13: Instructions using hidden text
Good: Label referencing ID
Good: CSS for zooming and focus
Good: Required text boxes using off screen text
Good: Invalid text boxes using off screen text