< Back to Demos | Learn more at PaulJAdam.com >

Why WCAG's H65 Technique is Invalid and Abused to Allow Disappearing Placeholders Over Visible Labels

http://www.w3.org/TR/WCAG20-TECHS/H65.html

The examples in H65 have no relevance to a large form with many text inputs like a Shipping Address fieldset. However, due to design trends in mobile the use of Placeholder attributes have replaced the use of visible label text to describe what the user must type into the input.

H65 talks about examples where a visible text label is actually very close in proximity to the inputs with no visible accessible name.

Testing the rendered examples from H65 you can see they don't relate anyway to a form that contains 10 text inputs with no visible lablels.

This technique is being abused currently to allow developers and designers to only use placeholders rather than a visible text label.

Live rendered examples from H65

Example 1: A pulldown menu that limits the scope of a search

A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a visible label. The title attribute is used to identify the select menu. The title attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers.

Search for: …

Example 2: Input fields for a phone number

A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.

Example 3: A Search Function

A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.

Example 4: A data table of form controls

A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen LABEL) it is difficult for non-visual users to pause and interrogate for corresponding row/column header values using their assistive technology while tabbing through the form.

For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button is a concatenation of the answer choice (column header) and the text of the question (row header) with a hyphen or colon as a separator.