HoverIntent in WordPress

Whenever you’re working on a new WordPress theme that includes hover (mouseover) effects, especially dropdown or flyout menus, you might want to include hoverIntent. HoverIntent is a term that describes a concept through which you delay a hover action until a certain amount of time has passed, in order to make sure that the user really intended to trigger that action.

We’ve all been on websites with dropdown menus that tend to get in the way of the content, and pop open as soon as your mouse touches even a small portion of them, and we’ve most likely all been annoyed by it. The idea behind hoverIntent is to measure the speed of the mouse movement, attempting to determine whether the user actually intended to stop on the item or not. If the mouse just moves over an item with a hover effect, but doesn’t stop on it, the hover effect should not be triggered; if, however, the user’s mouse does slow down enough or stop on the item, the hover effect should be triggered.

Adding Settings Fields to Your WordPress Plugin

When developing a plugin for WordPress, a lot of times you’ll want to create your own page of options within the administration area. To do so, you’ll usually use the add_options_page() or add_submenu_page() function to actually create the page; but then you’ll have to populate that page with the actual settings fields.

The first step in that process is to understand the add_settings_field() function. This function accepts 6 different parameters. They are as follows:

Guidelines for Accessible Forms

In an age where user feedback and interaction has become so popular, accessible forms have become that much more important. Many sites have already embraced making their forms accessible, and done a pretty good job of it, but inevitably some will still lack that little extra something – as small as an inappropriately named label through to no accessible features at all.

1. Using label tags

Labels should always be used and include the for attribute (e.g. <label for="name">). The value used should match the id of the input field that the label is being used for:

<label for="name">Name</label> <input type="text" id="name">

Labels for inputs, select dropdowns and textareas should precede the input, though labels for radio buttons and checkboxes should follow the input, as follows:

<input type="checkbox" id="terms"> <label for="terms">Accept our terms & conditions</label>

Disney Sued Over Website Accessibility

Another major corporation is feeling the sting of a lawsuit over the accessibility of its websites. A news release posted on Feb. 15, 2011 indicates that three visually-impaired patrons of Disney have filed a class-action lawsuit against the company.

According to the press release, the main concerns of the suit include the fact that the websites include audio and video (presumably auto-played) that interferes with screen-reading software and is not keyboard-accessible, as well as the fact that the websites include Flash content with no text alternative.

Are Your Websites Color-Accessible?

Contrast-A Screen ShotAs many of you already know, the Web Content Accessibility Guidelines (WCAG) recommend a specific amount of contrast between backgrounds and text on your websites. Unfortunately, very few people probably actually test their websites to ensure that they meet those guidelines. As a color-blind person, I find a lot of websites that are extremely difficult to read because of poor contrast between backgrounds and text.

I’m honestly not sure why many of us (including myself, on many occasions) don’t check the color contrast on our websites. While it’s difficult to measure and quantify the contrast through conventional means, there are quite a few really nice tools that make it a snap.

Form Input Placeholder Text

One of the new features coming in HTML5 is placeholder text for form inputs. The concept of placeholder text has been around for quite a while, and is fantastic for usability. Basically, placeholder text is text that appears inside of a form input when the page loads, but disappears when the user places the cursor in that form input.

Because HTML5 is still only partially supported, it’s still necessary to use javascript (you could conceivably use CSS to achieve most of the functions of placeholder, but most of the browsers that don’t support the HTML5 placeholder attribute also don’t support the necessary CSS to achieve this anyway). Within this article, I’m going to show you a few different options to add support for placeholder in all browsers.

Pages: