Fieldset legend, aria-describedby, and radiogroup role

The HTML specifications for forms suggests using a <fieldset> with <legend> to define similar items within a form. Normally this is used to combine the forms into large chunks, for instance the billing address, credit card information, and personal information. It’s also useful for combining radio and checkbox sets.

Typically, we associate a form input with a label. The label is announced as the screen reader places focus on the input. This works very well for letting the user know what the checkbox or radio button represents, but it doesn’t give the user context for how it is applied. For instance, the following radio button would be announced as “radio button Yes”. But what is the user saying yes to?
Continue Reading Fieldset legend, aria-describedby, and radiogroup role

Using the ARIA Form Landmark

ARIA landmarks allow developers to associate structural significance to web page elements. Common landmarks define navigation, header, the main content, and the page’s footer. It’s also possible to define more specific subelements, such as a search form. This page will test the use of role="form" to define multiple forms on a single page. While this may seem uncommon, it could be seen on a page that has a search, sign up, and login form.

Markup

The role attribute is placed on the form tag. In general, you do not want to put a landmark above a similar semantic object, so <form role="form">, <nav role="navigation">. Add aria-label to let the user know what the form will include. This is especially helpful when navigating by landmarks.
Continue Reading Using the ARIA Form Landmark

Create a tabbed search form with YUI

Yahoo! makes it easy to create an accessible, handsome tabbed interface. I used their Tab View library to create the tabbed search form for V3GGIE.com. While Tab View can create the tabbed content dynamically, I’m using it to hide/show hard-coded individual forms.

Update: I’ve removed the tabbed interface from V3GGIE.com. This particular use of the tabbed module seemed to have created some confusion in users. The approach is still valid, just not the way I originally implemented it. See the tabbed search form on V3GGIE.com

Step 1. Create the basic HTML code.

The tabbed code is a simple pattern:

  1. Start with a parent div and give it an id and class=”yui-navset”.

  2. Create an unordered list inside this div with class=”yui-nav”.
  3. Each list includes a deep link to a corresponding div that is also a child of the parent div. The link text in an em tag.

  4. V3GGIE Search
  5. Create a div with class=”yui-content” and create a set of content containing divs. Each div has an id.

    ...
    ...
    ...

  6. Insert the Tabview CSS at the top of the page, the Tab View JS at the bottom of the page, create a small js that instantiates the tab-view module.
  7. For easier styling, use the sam_skin CSS package and add class=”yui-skin-sam” to the body.

Step 2. Use PHP to make it more interesting

Each page calls this chunk of code to insert the tabbed form, it also sets a variable ($selected), determining which tab is selected on page load. I’m also inserting the last search query into the text input to make it easier on the user. This is easily done by grabbing the query from the Request object.

The finished code:




Try "San Francisco Pho", "Paris Fromage", or "92104 tofu"


Try "corn chowder" or "vegan pizza"


Try "Vegetarian Chinese Olympics"


Try a subject: "PETA", "Tempeh", or "Paris -Hilton Vegetarian"

View the source as a text file

The Final Product

We now have a tabbed module that allows the user to find recipes, news, blogs, and local restaurants from any page. This is an easy introduction to the YUI libraries. However, I came across the following surprises:

  • The order of the tabs must match the order of the target divs. I moved my tabs around and discovered they were toggling the wrong forms.
  • The links that generate the tabs need to have em tags surrounding the text
  • You’ll need to download the entire YUI package to gain access to the CSS and sprites needed for the library. The examples on the YUI site assume relative links to files, you will either need to duplicate that file structure or upload the skin’s sprite and change the CSS accordingly.

Using vertical-align for images and buttons

I’m working on a basic search form and the visual design requires a graphic button instead of the browser-generated input. I’m using the button tag instead of an input type=”submit”. While putting the page together, I had a nagging issue with the button not aligning with the label and input. I tried various combinations of margins, negative-margins, padding, and even floated the elements. All of these techniques eventually worked, but the were too klunky and I knew there had to be a better way.

I remembered the vertical-align:middle style while working on a footer paragraph that included inline links and RSS buttons. I tried it with the submit button and it also worked perfectly. I’ve tested this in FF 1.5 and IE6. I have not tested it in Safari yet.

Code Examples

CSS:

form#foo button {vertical-align:middle; border:none; padding:0; background:none; cursor:pointer; *cursor:hand; /*alternate cursor for IE*/}

HTML

...

Resources

Microsoft IE7 updates the select box

Microsoft has just announced IE7 will handle the select input as a modern browser should. It will now allow developers to use z-index to avoid overlapping and perhaps more artistic forms. Søren Madsen put together the utopia of form design, something every designer should look at and dream of possibilities.

SELECT element in IE7 – An Overview

In IE6, the HTML SELECT element was implemented through the Windows Shell ListBox and Combobox controls. Some key features were missing in the old version of the SELECT element, such as proper support for z-index, TITLE support, and zoom. Web developers had to write complex CSS and scripts to workaround these issues.

In IE7 however, we re-implemented the SELECT element to make IE7 more standards-compliant. This new version does not use any Shell controls any more. In fact, it is implemented totally through the MSHTML framework, including styling, UI interaction, and rendering. Thus the SELECT element in IE7 is more of an HTML element than the former legacy control.

IEBlog

Form design is frustrating.

Form elements are up to the browser for final presentation unless you get into some tricky CSS and JS solutions and those are not necessarily cross-browser solutions. One particular problem I’ve experienced was with the nicetitles javascript that creates a nice popup box with the text of a title attribute on hover. I tried to use this on an insurance quote form to give the visitor better feedback on what was needed. IE6 would place the inputs on top of the popup window. I then tried moving the popup farther to the side to avoid this and that just looked hokey. So, I gave up on the idea. It would be interesting to test this now with IE7.

I’m also intrigued by the ability to use the title attribute on the select object. Normally, I would place the title on the label. However there may be times when the visual design requires hiding the label. Placing a title on the select would be a great way of letting people know the page may refresh or whatever action the select box leads to.

With rumors floating of an IE7 Beta2 developer release within a few weeks, we should begin looking for pages to test these new attributes on.

–This was originally published on www.tdrake.net