Category: forms

Accessible Custom Select Dropdowns

In web development, creating custom select dropdowns is difficult. It requires a lot of resources to sufficiently design (annotating the interaction, etc) and develop (the Javascript is fairly complex and the ARIA isn’t easy) and then test. Additional requirements such as option groups and auto-suggest make it even more challenging and time-consuming, and usually frustrating.

Most often the result is not fully accessible; browser and assistive technology is inconsistent; and implementations vary across the web. This is why it’s always better to use native selects with HTML/web. (Native components is also a better choice for native apps as well.) Don’t forget that HTML selects can be styled with CSS; see these resources by RTD, Filament Group, and LugoLabs.

If you must implement a custom select dropdown, you will most like need to use the ARIA listbox rolecombobox role (which specifies a composite widget), and often a combination of those roles. The option role is also required and usually a few other ARIA attributes (for label, state, etc.).

Here are some great examples which will save many folks a lot of time!

screen shot of custom select; category dropdown and submit button

Google’s No Captcha Shows Some Progress

It sure was exciting when Google’s new reCaptcha was announced last week. Dubbed “No Captcha”, the goal of course is to provide a service that determines a human from a bot in order to prevent spam and abuse of online forms.

Derek Feathersone (@feather) from Simply Accessible was one of the first to report its accessibility impact in the blog post On the Accessibility of Google’s No CAPTCHA. The tone of the post is very positive, but the testing cited excludes JAWS with IE (still the most popular screen reader combination) where I found the No Captcha failed miserably. On the bright side, it passes with keyboard-only, Dragon Naturally Speaking, NVDA and the latest VoiceOver.

Two fundamental problems with No Captcha is that it requires JavaScript and it doesn’t work with touch devices.

You can try the No Captcha yourself on a test page hosted by Alastair Campbell (@alastc).

checkbox with label "I am not a robot"
Google’s “No Captcha” reCaptcha

At best, No Captcha simplifies the Captcha experience. At worst, it excludes some users even more than the previous version. Hopefully Google will fix the current issues, especially support for JAWS.

My recommendation is to continue using non-Captcha security techniques; two great articles on how to do so are Spam-free accessible forms by WebAIM and 10 Things to Check Before Using a CAPTCHA by SitePoint.


Floated Labels Still Suck

Back in June of 2012, I wrote that the Placeholder Attribute Is Not A Label. The post points out that it’s bad practice to use text to look and behave as a placeholder rather than a label. This is generally known as “floating labels” or “inline labels” (I also call this LAP for short, “labels as placeholders”.) And as you may know, labels are required for accessibility (and usability) as they identify to the user what the input is for. It’s a general best practice to provide a label for every form input.

Unfortunately this design trend still continues even despite repeated concerns on use of placeholder from web development and accessibility experts. Web Axe too maintains that this pattern is bad for a variety of reasons which weren’t fully listed in the original post.

Example of labels acting as placeholders
Don’t do this!

Sources of the Problem

Like many accessibility problems on the web, floated labels can be attributed to multiple issues. Firstly, web designs are trendy, and when a huge well-known company does something like floated labels (i.e. Apple), others follow, even if it’s a poor practice. And if usability testing is done and includes floated labels, it may not provide reliable results because the usability testing most likely:

  1. is not done with long forms (which greatly increases the needs reviewing input and increases the potential of losing context)
  2. is not done with users with disabilities
  3. is not done with users with a situational disability
  4. is done most likely in a controlled environment (latest browser provided, no chance for JS delays nor errors, guided by moderator, not a real product)

The web development community has a lack of adequate HTML skills which also contributes to this problem, so bad that articles recommending basic HTML practices must be written, and frankly, are much needed. A fundamental HTML practice is that a text input requires a label to define what it is. The intent of the placeholder attribute is very often misused; the W3C gives an explicit warning about placeholder:

Use of the placeholder attribute as a replacement for a label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments

List of Pitfalls

Whatever the reason floated labels exist, here is a list of potential issues with the pattern.

  1. The simple fact that since the label disappears when entering text, the user may forget what the input is for. This is especially important when reviewing form data; for users with a cognitive accessibility; and people who may be distracted when completing a form.
  2. This pattern can’t support both a label and a placeholder.
  3. Depending on user’s environment and implementation, there may be a delay in rendering/performance: on page load and in text disappearing after beginning typing. Or even it breaking entirely; see the two examples below.
  4. If an HTML5 placeholder is used for label, older browsers and/or assistive technologies may not support it at all. For example, there is no placeholder support in IE9 and Opera Mini.
  5. Placeholder text is rendered differently across browsers/versions; extra design and development is required to make them accessible (color contrast is usually very low) and have consistent styling. The traditional label is straight-forward and reliable.
  6. Developing this pattern in the best way possible can be fairly complicated and is inconsistent among implementations. Code becomes heavier, more fragile, and more difficult to maintain.
  7. The pattern doesn’t support standards; it doesn’t implement HTML elements and attributes as intended. The W3C HTML5 placeholder specification specifically states it should be a “short hint” of user input and states: The placeholder attribute should not be used as an alternative to a label.
Placeholder! Why U no use label?
A great meme!

In the Wild

No matter how many issues exist, the fact is that the floated label pattern is prominent on the web. Here are a couple of unique examples of this pattern in the wild which have completely gone wrong. This demonstrates only one of many issues with this pattern; sometimes the label doesn’t disappear visually and the label is blocking the view of the input text.

Hootsuite sign-in form; the password input contains both the floated label and the masked password, making it unreadable.
Hootsuite sign-in fail.
In Facebook app, text input for birthday message is blocked by floated label.
Facebook birthday fail in iOS app.

Attempts to Fix

Attempts have been made to help address or fix this problem, but not with much traction. One idea is to ask browsers to darken the placeholder text so that it passes WCAG color contrast requirement. This is a plausible suggestion but not likely to happen, especially any time soon. See below for the CSS fix. And doing so only addresses one issues; it wouldn’t fix the fundamental problem of the label disappearing.

Another attempt is to, upon focus of the input, reduce the text size of the floated label and move it to the bottom of the input field (rather than it disappearing entirely). This is not a feasible solution either as this behavior may cause confusion, requires text size that’s too small, and still adds code weight. Besides, if the label is going to remain visible near the input, it should just be there in the first place.

How to do it right

To create a form that’s robust and accessible, use the label and placeholder as intended:

  • The label element represents a caption in a user interface. It tells the user what the purpose of the input.
  • The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.

In the example below, the label “Enter URL” clearly indicates what the text input is for. The placeholder “http://” is a short hint as to what text should be entered. Also, a good guideline for placeholder text is similar to title attributes: only use them for supplementary information, not required information.

A text input with label "Enter URL" above the input and http:// as placeholder value.
Example of recommended use of input label and placeholder.

An exception to always displaying a visible label may be the search input where an icon (such as a magnifying glass) and the location of the form on the page visually denotes it’s meaning sufficiently. A visually hidden label is still required.

To better support mobile devices and screen enlarging tools, place the label above the input (as opposed to the left).

If using a placeholder (hopefully for the right reason), use CSS to darken the light grey so that it adequate color contrast. Here’s an example:

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #666;
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #666;
   opacity:  1;
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #666;
   opacity:  1;
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #666;


Please don’t use “floated labels” or “labels as placeholders” technique; it can break the user experience for a large variety of reasons. Use the label element and placeholder attribute as intended. Use CSS to ensure placeholder text has adequate color contrast.

Further Reading

Proper Use of Buttons and Links

After years of arguing for proper use of form elements and link elements, others are finally doing the same. More recently, this includes the articles The Anchor Button: Bad for Accessibility, Bad for Usability by Matt Long and Reinventing the hyperlink (with much humor!) by Heydon Pickering.

The main point is, please do the basics. When designing a website, ensure controls with button-type behavior (interaction, affects the current page) are designed as buttons and regular text links (go to an external page, anchor on page, or external document) are designed like text links (such as blue underlined text).

When developing a website, ensure buttons are coded as buttons (the button or input element) and links are coded as links (the anchor element).

Here are some reasons why it’s so important:

  • accessibility and usability
  • a more robust website (support older user agents, non-JS, etc.)
  • lighter and less complex code
  • more consistent implementation so easier to maintain

Remember that for accessibility, no matter how much ARIA and trickery is done, there will mostly likely still be problems. When blurring the distinction between a button and a link, assistive technology (and/or the user) can be confused as to what’s what. View the beginning of this presentation by Derek Featherstone for a good example of this.

This is a button; this is a text link; don't mix them up.
Button versus text link.

This advice sounds simple, but this elementary guideline is broken quite often; once you start to look, you’ll find it everywhere on the web, especially web apps. There’s no need to create confusion (the design) and to re-invent the wheel (the development). Sticking to the basics will make it easier for everyone, most importantly the user.

For an example of proper implementation, check out Easy Chirp.

Further reading:

Placeholder Attribute Is Not A Label!

Just so we’re all clear on this, the HTML5 placeholder attribute in a text input is not a replacement for the label element. Period. The placeholder should only be used as a brief example of the text to be entered.

Besides inconsistent support for screen readers, using a placeholder as an input label can create usability problems and issues for those with cognitive impairments. The placeholder should be used like a title attribute (tooltip); it provides only supplementary information. If the information is required for the user (such as a strict text format) then this should be conveyed in the main content of the page, not in an attribute.

The W3C HTML5 placeholder specification specifically states it should be a “short hint…intended to aid the user with data entry” and also states:

The placeholder attribute should not be used as a replacement for a label.

Supporting articles:

On @a11yMemes, check out this humorous take on placeholder.

Addendum (more references):

Also see Web Axe follow-up post: Floated Labels Still Suck.

Related Tweet Jan 2016: