WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alternatives to LEGEND for a radio button?

for

From: Moore,Michael
Date: Aug 27, 2009 10:20AM

Darrel wrote:

"Anyone know if these issues (ignoring headers in a form, bug with
nested fieldsets) are primarily limited to JAWS or is it a more
universal issue with screen readers in general?"

I am most familiar with JAWS but have seen the same behavior in Window Eyes. I will use JAWS behavior in my examples.

First a bit of background on how JAWS works. This is similar to other screen readers.

JAWS has two basic modes for working with HTML a reading mode and a forms mode. (I will leave out the JAWS cursor for simplicity) In reading mode (PC cursor) JAWS loads the HTML content into a buffer and allows quick navigation within the content through a variety of keyboard commands. Thus I can navigate to the next heading using just the "H" key or find a form with the "F" key. This works great for most content but what happens when I need to complete a form? If I am trying to enter "Happy Friday" into a text field in normal reading mode JAWS will send me to the next heading then to the next form field. Not what I want at all. Thus the reason for a forms mode. When forms mode is turned on "Insert + numpad /" The keyboard will act as a normal input device to the form and I can happily type "Happy Friday" into the form field. However I no longer have access to my quick navigation keys. However I can move from form input to form input with the Tab key. In my experience this i
s typical behavior for most screen reader users. Get to a text field, enter forms mode then navigate with Tab navigation.

The problem with this approach is that using Tab navigation I only hear the items that are included in the tab ring. Thus form instructions, and questions at the beginning of a group of multiple choice selections are frequently missed when they are coded using heading or paragraph markup. If these items are included in a legend element, they are announced for every item within that fieldset. This can be a bit tedious too. Consider listening to "What is your favorite color, red radio button unchecked, what is your favorite color, blue radio button not checked, what is your favorite color..."

Next to the issue of nested fieldsets and legends. JAWS announces the legend that is closest within the hierarchy. So you might have a legend "Personal Information section" followed by name and address inputs, then a nested subsection for telephone numbers where the legend is phone numbers and the inputs are for home, work and cell phone numbers" JAWS would repeat the first legend for the name and address, then the second for home work and cell. Personally when using fieldsets and legends I like to just avoid nesting, this is not the most correct method semantically but it works well and is very predictable.

Legend elements are very difficult to style reliably cross browser and cross platform, particularly when they get long. Headings and paragraph elements offer an arguably better semantic and stylable approach for questions and instructions within a form. But how to get them within the tab ring. My friend Jim Allan has come up with a possible solution. Wrapping these within a div then setting the tab index on the div to 0 will place them in the tab ring and allow them to be found in the proper order with a screen reader. The cost is a couple of extra tab stops which may increase the burden for physically disabled users.



Mike Moore