Categories
captcha event label review usability wordpress

2014 Year in Review

2014 was surely a much busier year than expected. It started a bit slow, but sure got busy!

In the most recent blog post, the hot topic of Google’s new version of reCaptcha dubbed “No Captcha” was addressed. Although there are remaining challenges, Google’s No Captcha Shows Some Progress.

In a guest post by Jennison Asuncion, a new date for Global Accessibility Awareness Day (GAAD) was announced. It’s now the third Thursday of May.

In the post Floated Labels Still Suck, problems and fixes are discussed for the terrible design pattern of putting input labels inside input fields.

Great progress for accessibility continues in WordPress; a podcast with two WordPress contributors, Joe Dolson (@JoeDolson) and Joseph O’Connor (@accessibleJoe), was published in September.

Web Axe author Dennis Lembree read Steve Krug’s excellent book, “Don’t Make Me Think, Revisited” and Twittered a series of accessibility-related points. The series was published in the post Tweets quoting “Don’t Make Me Think, Revisited”.

In May, I announced that Easy Chirp now provides accessible images for Tweets. This feature is badly needed and isn’t available on any other Twitter app. Unfortunately, and surprisingly, the feature is grossly underused.

In March, we posted a summary of CSUN14, the 29th Annual International Technology and Persons with Disabilities Conference. It was another great event; thanks again to California State University, Northridge. (Look for Dennis at CSUN15!)

On a more personal note, Web Axe author Dennis Lembree released an open-source Accessible HTML5 Video Player in September via his day job at PayPal. He recently changed jobs and is now Product Manager, Accessibility at eBay.

More from 2014:

Categories
design forms html5 label

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. For example, how does one review the information entered if the placeholder is now gone?

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:

Bonus!
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:

https://twitter.com/shoobe01/status/689221623774220288

Categories
header heading label podcast web

Hiding Labels and Sub-Headers

[Editor’s note: see more recent article by Dennis, When and How to Visually Hide Content]

There are certain instances when a label or header should be used, but wouldn’t necessarily need to be seen in the layout, such as a label for a phone number and a header for a menu. Dennis discusses when and how this would be done.

Download Web Axe Episode 22 (Hiding Labels and Sub-Headers)

[Transcript]

The CSS:

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

The XHTML:

Phone number:
(


)


-

Links:

Categories
code element forms input label podcast web

Accessible Form Elements

How to add a label tag to a form element. This makes your form element such as an input field accessible and a little more user-friendly.

Download Web Axe Episode 2

[transcript]

W3C reference on labels

Sample code: