E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: Claudia.Case@wellsfargo.com
Date: Fri, Apr 29 2011 10:48AM
Subject: ARIA question: what's the right role(s) for Thumb Up/Thumb Down metaphor
No previous message | Next message →

I'm struggling with what the right semantic metaphor is for a Thumb Up/Thumb Down feature. One possibility is the toggle button metaphor, which is how YouTube has implemented it. In my mind, toggle buttons are really on-off switches and don't imply mutually exclusivity.

I'm more inclined to think of the Thumb Up/Down metaphor as a set of radio buttons since the choices are mutually exclusive. The way I was thinking of implementing this was with the WAI-ARIA radiobutton widget pattern (http://www.w3.org/WAI/PF/aria-practices/#radiobutton) and defining Thumb Up/Thumb Down as background images to replace off-screen radio button label. That would way users with normal vision would see the familiar Thumb Up/Thumb Down icons and screen reader users would hear the radio button label (e.g., Like/Dislike). To see a very similar working code example, check out Open Ajax Alliance's ARIA Radiogroup: Background Images example (http://www.oaa-accessibility.org/example/29/ ).

I'd like to hear what others have to say about the Thumb Up/Thumb Down metaphor with respect to ARIA roles.

Thanks,
c

Claudia Alden Case
Web User Experience & Accessibility Consultant | Wells Fargo Bank
email: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > | phone: (415) 371-4760 | mobile: (650) 208-0039

From: Jared Smith
Date: Fri, Apr 29 2011 1:03PM
Subject: Re: ARIA question: what's the right role(s) for Thumb Up/Thumb Down metaphor
← Previous message | No next message

This all seems to make sense to me. I can't think of a better way to
present it.

If sighted users see both a Thumbs Up and a Thumbs Down icon, but have
the ability to activate *AND* deactivate one of these (e.g., click
Thumbs Up again to deactivate it), then this functionality would need
to be presented to the keyboard/screen reader user. You can't unselect
all radio button options once one of them is selected. One solution to
this might be an additional radio button so you present "Like",
"Dislike", and "Neutral". Note that the "Neutral" state would need to
be customized so that it is activated by engaging a currently enabled
via keyboard (in other words, you turn on Neutral by turning off a
Thumbs Up).

Hopefully that makes sense. It would be great if you could share this
implementation when you're done. It sounds very cool and there are
many applications for it.

Jared