A follow up to my Easy ARIA tip #2

Community member Ben Millard has pointed out in a recent blog post that roughly the same as shown in my example can be achieved using regular HTML 4 by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some of the techniques that have been available for years escape even us gurus sometimes. But then, we don’t dig through every W3C doc on a regular basis, either.

However, the implementers of Firefox accessibility have done their homework: Ben’s examples work nicely with Firefox 3. The association is made properly, the label accessible is built up fine, and the input accessible gets its accessible name defined correctly. I also tested with that other browser that came with my Windows XP, and users there are less fortunate: IE does not properly make up the accessible name for the label and also does not correctly associate the accName of the input type with the label’s full content.

So, does Ben’s example now completely obsolete the need for the aria-labelledby and aria-describedby attributes? Most definitely not! There may always be cases where nesting the input into the label is impractical/not wanted, or where the description cannot be so nicely densed into the label as Ben shows using my example. For those cases where you explicitly need to specify something to become the accDescription, you definitely can still use ARIA. You can even use aria-describedby inside an input that’s nested within a label. :-)

This entry was posted in Accessibility, ARIA and tagged , , , . Bookmark the permalink.
Skip to top

Comments

2 Responses to A follow up to my Easy ARIA tip #2

  1. James Craig says:

    The embedded example may not have worked in Internet Explorer because it requires use of the for/id attributes, even if the association is implied by nesting the the input element inside the label element. Therefore, if you nested the input in the label, and still included the for/id, it should work in both of your browsers.

  2. pvagner says:

    I am getting too excited about WAI-ARIA and all the nice tricks it allows a web developer to do. So I decided to try this trick with latest release candidate of firefox as well as with the internet explorer 7.
    Using either ARIA markup or plain HTML 4 Internet explorer does not clip all the label parts into one so if the construction without the actual number from the input box is rather senseless it is really good idea to use an ARIA markup because anyway if internet explorer does not seem to support either of these method with the ARIA based approach the label can be overidden for legacy browsers.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>