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

Using aria-describedby to replicate fieldset and legend

Complex forms should use a fieldset and legend to group similar inputs. The legend is announced along with label text for each input. This is especially helpful when form inputs are repetitive, such as mailing, billing, and work address information.

This example fixes a form that included a form within a table. It uses the aria-describedby attribute to connect the individual form inputs with a header cell. It was inspired by DeQue’s recent article for using ARIA to replace fieldset/legend in a set of radio buttons: ARIA-Group: a viable alternative for Fieldset / Legend?.
Continue Reading Using aria-describedby to replicate fieldset and legend

Debugging aria-label on elements

Sat, Sun, Mon - Forecast iconsI recently helped do some testing on the new version Yahoo! Mail for iPads and was stumped by an aria-label not working as expected. It was one of those gotcha moments, when you realize a confusion with a fundamental process. Are you wondering why your aria-label is not being announced?

It’s tempting to use the aria-label attribute in situations where the visible text is not adequate. For instance, you may use a background image to represent a value and you’d like the user to know that value via an aria-label on the parent.

This basic test page will walk through the simple assumption and show how the aria-label is meant to be used.

Continue Reading Debugging aria-label on elements

Yahoo! Accessibility Lab code library

I haven’t been posting much to this blog for the past year. But that’s not because I’ve been lazy. I’ve been writing a lot of tutorials about creating more accessible web sites on the Yahoo! Accessibility Lab’s Code Library.

You’ll find some great resources for using CSS, basic HTML, JavaScript, and ARIA.

Update

These articles are in the process of being moved to the Yahoo Developer Network blog for archiving. Please check there if the Code Library is not working.