Thierry, Thanks for the suggestion! It got me think of a few things.
Structurally and semantically, do you find a distinctive difference between Modal and Collapsible? I wanted to make sure I am on the right track; when I think of the use of Modal Window, I think of a block of content that is not part of the main content in a given page, e.g. a Ajax fetch, an image gallery (which makes use of the herf link to pull the larger image), a dialog box, a content in the aside element. The choice of the Modal Window, is not so much of a UI/Design choice but the integrity of content structure and that it does not obscured the flow of the content when AT is used, so making sure the focus brought back to the original trigger is something that needs to deal with - a Modal script I use, doesn't offered this feature, it jumps back to the first link. With Collapsible, it's largely a UI/Design choice, structurally, the content in it is part of the main content, it's just a simple show/hide that makes good use of space, and apart from button that you recommended, a heading can be served as a trigger too depending on the content (for the site I was working, in a few pages heading is more appropriate, as in other pages , button is indeed better than p tag). With Collapsible, we don't normally provide a close button. What I was trying to do with this "pop up", is a simple modified version of Collapsible (show/hide) that the Collapsible's container uses absolute positioning, thus a close button is provided, and when closed, it will goes back, not to the original trigger but the link after the trigger. I do not see any issue about with this, but would love to hear how you guys think about it. Lastly, I guess there isn't any benefit to use ARIA role just for this "pop up" when the entire site is not made for it (it's not a simple WordPress blog that consists of a handful of template files but eCommerce site with hundred of template files and it will be an enormous task. I am however have been slowly building a HTML5 theme with ARIA support for it from scratch, but it likely won't be finished until next year as I feel there is so much needed to know about the proper use of ARIA). tee On Feb 23, 2011, at 9:33 AM, Thierry Koblentz wrote: > Hi Tee, > >> Please take a look at this example. The first example is keyboard >> accessible however I am also concern with the empty link that may >> create extra noise for screen reader, e.g if every single page has a >> popup, it will have two empty links, one is the popup trigger and the >> other the close link. Sure it's just two empty links, as I started >> using VoiceOver more frequent to test the sites, I find the two links >> quite annoying. >> >> http://jsbin.com/efimu5 > > I'd use buttons instead of links, or I'd add role="button" to the links. > I'd also add role="alertdialog " to the modal, making sure that the focus > goes to the "close" button/link within the modal and also making sure that > when the user closes the modal, focus is brought back to the original > trigger. > > See: http://www.w3.org/TR/wai-aria/roles ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************
