What role and interaction for Code/Plain in demo portal?

Richards, Jan jrichards at ocad.ca
Fri Oct 22 15:45:59 UTC 2010


Agreed that these should be options.

-Jan

--
(Mr) Jan Richards, M.Sc.
jrichards at ocad.ca | 416-977-6000 ext. 3957 | fax: 416-977-9844
Inclusive Design Research Centre (IDRC) | http://inclusivedesign.ca/
Faculty of Design | OCAD University

From: fluid-work-bounces at fluidproject.org [mailto:fluid-work-bounces at fluidproject.org] On Behalf Of James William Yoon
Sent: October 22, 2010 10:36 AM
To: Justin Obara; Cheetham, Anastasia; Scheuhammer, Joseph; Fluid Work
Subject: Re: What role and interaction for Code/Plain in demo portal?

This is a tricky question. I don't think it really fits well under a particular interaction pattern. Justin's right--it has hints of everything you mentioned, Anastasia, and a bit of redesign could tighten things up.

The one thing I'd note is that this seems like a user display preference (read: ui options). In other words, does the user want syntax highlighting, line wrapping? Maybe we could move away from choosing between views, and instead introduce options such as "Show syntax highlighting", and "Line wrap".

Cheers,
James
On Fri, Oct 22, 2010 at 8:37 AM, Justin Obara <obara.justin at gmail.com<mailto:obara.justin at gmail.com>> wrote:
In their current implementation they seem to be links that activate something, but definitely feel as though they have hints of being radio buttons, toggle buttons, or tabs. I think a slight redesign may clarify their intention. For example if it is a toggle button, we might have an actual button that sets the view of the code and places a title at the top of the tab panel that says either "Code View" or "Plain Text". Also, I believe toggle buttons are just elements with the button role and the aria-pressed state set. Here's an example:

http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html

Hope that helps
Justin

On 2010-10-21, at 2:50 PM, Cheetham, Anastasia wrote:

>
> I'm working on FLUID-3728, which aims to improve the accessibility of the demo portal through proper ARIA, etc. I'm struggling with the current affordance for switching between the colourized code view and the plain text view on the right side of the pages. I'm hoping the community can help me with some input.
>
> As an example, you can look at
>    http://build.fluidproject.org/infusion/demos/reorderer/gridReorderer/demo.html
>
> (Note: The portal on this nightly build has not yet been modified with any improvements, so current ARIA and keyboard interactions are not yet "right.")
>
> On the right side of the page are some tabs, one for each of the files used in the demo (html, css, js). Below the tabs (visually "inside" the tab) are two pieces of text: "Code View" and "Plain Text." Clicking on either of these pieces of text with the mouse will switch the display below it between the colourized version and the plain text version.
>
> I'm trying to figure out what would be the proper ARIA role and keyboard interaction for these two options. Are they radio buttons? A toggle button? (Does ARIA even have a specific role for toggle buttons?) Are they tabs (within a tab)? just plain links that activate something?
>
> Any thoughts would be appreciated.
>
> --
> Anastasia Cheetham     Inclusive Design Research Centre
> acheetham at ocad.ca<mailto:acheetham at ocad.ca>            Inclusive Design Institute
>                                        OCAD University
>
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org<mailto:fluid-work at fluidproject.org>
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work

_______________________________________________________
fluid-work mailing list - fluid-work at fluidproject.org<mailto:fluid-work at fluidproject.org>
To unsubscribe, change settings or access archives,
see http://fluidproject.org/mailman/listinfo/fluid-work

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20101022/558766c1/attachment.html>


More information about the fluid-work mailing list