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
acheet...@ocad.ca            Inclusive Design Institute
                                        OCAD University

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

Reply via email to