RE: [WSG] CSS Expandable Menu
As a follow-up to my original email, the following methods have been very well designed from the accessibility point of view: http://juicystudio.com/article/ecmascriptmenu.php http://www.456bereastreet.com/archive/200705/accessible_expanding_and_c o llapsing_menu/ A further example worth considering: http://www.splintered.co.uk/experiments/16 This is a different approach as it keeps all the links *visible* (there is no use of display:none), but it still offers keyboard users a way to skip sub menus: http://tjkdesign.com/articles/TJK_SlideMenu/TJK_SlideMENU.asp As a side note, the markup is a DL. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hi Mathew, http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp I have a bug report... tested against FF 3.6.4 and IE6 (no bug under Chrome 5.0.376) Steps to reproduce: - click on background - tab to focus first menu item - hit enter to display sub-items - tab through to the second menu - hit enter to display its sub-items (the first menu closes) - hit shift-tab to go back to the first menu The bug is either one of a) the first menu shouldn't open as the second menu is active, or b) that the second menu stays open. Thanks for the step by step, but unfortunately I cannot reproduce (in neither one of these browsers). Could somebody confirm the issue following the steps above? Thanks. As a side note, there is something strange in these steps as the first menu should close before you can even hit enter on the second one. Are you sure you do not have your mouse cursor over the first tab while checking the menu? Because that would explain what you describe. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Sorry Thierry I only took a quick look at the page and didn't read it fully. Mike -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: 29 June 2010 17:34 To: wsg@webstandardsgroup.org Subject: RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu) Hi Mike, Sorry to say this but the keyboard friendly version: http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp Only fires, via keyboard, on Articles E-K in IEv8 or Firefox. This is by design. Keyboard users could not reach these pages if they were not focusable at least from the parent page. The About this solution section says: Note that keyboard users cannot skip the sub-menu related to the current page. This is because this sub-menu is exposed to SE (Search Engines) and thus accessible to keyboard users when JS is off. The sub-menus open via the *enter key*, this is to allow keyboard users to skip sub menus so they are not forced to tab through all the menu items. If the menu is accessible, it is *because* the sub menu related to the page itself *is* focusable (it is not styled with display:none). What this menu is missing though is a arrow pointer for *discoverability*. I have a title in there, but I think it's pretty useless (for 99.99% of users). If I had time, I'd add arrows and ARIA roles too. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
FW: [WSG] CSS Expandable Menu
As a follow-up to my original email, the following methods have been very well designed from the accessibility point of view: http://juicystudio.com/article/ecmascriptmenu.php http://www.456bereastreet.com/archive/200705/accessible_expanding_and_co llapsing_menu/ A further example worth considering: http://www.splintered.co.uk/experiments/16 Thanks again for all the helpful posts regarding this topic. Grant *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
On 29 Jun 2010, at 00:30, grant_malcolm_bai...@westnet.com.au wrote: I'm trying to avoid use of Javascript due to accessibility concerns. Trying to shoehorn functionality (which is what JS was designed for) into CSS (which is designed for presentation, not logic) is not good for accessibility. The classic example is the drop down menu which, if built using :hover instead of JS: * Can't respond to navigation without a pointer (e.g. keyboard tabbing, or a breath switch) * Can't have any 'fuzz factor' around the pointer position and timing of when a menu goes away (so if someone has any trouble at all with motor skills (e.g. because they have arthritis) they they could find it very different to get to the bottom of a menu without sliding outside it for a second and losing it) * Can't work in IE6 (since it's support for :hover is poor) (at least not without using a really evil hack involving conditional comments and layout tables). JavaScript is not the enemy of accessibility, it just has to be handled with care. If you are worried about pages breaking if JS is not available, then build on things that work: http://icant.co.uk/articles/pragmatic-progressive-enhancement/#build -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hi everyone, Can everyone suggest which CSS/JS horizontal and vertical drop down navigation they would recommend? Thanks, Elaine Wildash Web Dandy Twitter: http://www.twitter.com/webdandy www.twitter.com/webdandy Facebook: http://www.facebook.com/pages/Web-Dandy/171945798743 www.facebook.com/pages/Web-Dandy/171945798743 _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of David Dorward Sent: 29 June 2010 07:15 To: wsg@webstandardsgroup.org Subject: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu) On 29 Jun 2010, at 00:30, grant_malcolm_bai...@westnet.com.au wrote: I'm trying to avoid use of Javascript due to accessibility concerns. Trying to shoehorn functionality (which is what JS was designed for) into CSS (which is designed for presentation, not logic) is not good for accessibility. The classic example is the drop down menu which, if built using :hover instead of JS: * Can't respond to navigation without a pointer (e.g. keyboard tabbing, or a breath switch) * Can't have any 'fuzz factor' around the pointer position and timing of when a menu goes away (so if someone has any trouble at all with motor skills (e.g. because they have arthritis) they they could find it very different to get to the bottom of a menu without sliding outside it for a second and losing it) * Can't work in IE6 (since it's support for :hover is poor) (at least not without using a really evil hack involving conditional comments and layout tables). JavaScript is not the enemy of accessibility, it just has to be handled with care. If you are worried about pages breaking if JS is not available, then build on things that work: http://icant.co.uk/articles/pragmatic-progressive-enhancement/#build -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***image001.gif
RE: [WSG] CSS Expandable Menu
Thank you to everyone who replied to my email. Kind regards, Grant Bailey -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Ted Drake Sent: Tuesday, 29 June 2010 10:07 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] CSS Expandable Menu The YUI3 menu widget has great accessibility support http://developer.yahoo.com/yui/3/node-menunav/ Accessibility Usability Minded The MenuNav Node Plugin was built with both accessibility and usability in mind. The MenuNav Node Plugin implements established mouse and keyboard interaction patterns to deliver a user experience that is both familiar and easy to use. To that foundation the MenuNav Node plugin adds support for screen readers through the use of the WAI-ARIA Roles and States. Watch this video for a quick a demo of a menu created using the MenuNav Node Plugin using the WAI-ARIA Roles and States running in Firefox 3 using the Window-Eyes screen reader. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: Monday, June 28, 2010 4:56 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] CSS Expandable Menu Hi Grant, I'm trying to avoid use of Javascript due to accessibility concerns. There is no problem with using a javascript powered menu as long as that menu is accessible with javascript off. As a side note, pure CSS menus usually come with usability issues. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
I find it's best to do your homework, and shop around. There are so many options and paths you can go down, and with things changing rapidly so often, something that works today, may not work so well tomorrow. Sitepoint is a good start, they publish a good book By Rachel Andrews, CSS Anthology, currently 3rd edition. She recommends a Javascript version for accessibility. I would agree. Best of luck on your journey . . . John -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of David Dorward Sent: Tuesday, 29 June 2010 8:22 PM To: wsg@webstandardsgroup.org Subject: Re: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu) On 29 Jun 2010, at 11:04, de...@littlegent.com wrote: I'd recommend using one from http://www.cssplay.co.uk/menus/ The trick is deciding which one to use, really. =) Having taken a quick look, I'd run a mile from them. The first one I looked at was missing and pointed me somewhere else, which assured me that I've love a newer version and directed me to http://www.cssplay.co.uk/menus/final_drop.html It was wrong, I don't love it. It seems to have all the problems I described earlier (although it does, at least, bother to have basic links at the top (I wonder how many people bother to put something useful that that can substitute for the menu on those pages...) lia href=../menu/index.htmlDEMOS!--[if gte IE 7]!--/a!--![endif]-- !--[if lte IE 6]tabletrtd![endif]-- This hideous excuse for markup can't be worth removing the dependancy on JS, can it? (Especially since you need to implement the same fallbacks anyway!) -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
I used to use cssplay menus 6+ years ago but they're not the friendliest or most compliant to work with. I really like superfish - i've been using that for a few years with no problems at all. and I find it very easy to customise. http://users.tpg.com.au/j_birch/plugins/superfish/ I haven't really drilled down on it but it degrades nicely - works well in IE without any weird conditionals - and all my sites are XHTML strict compliant. - daniel hellodan...@mac.com On 29/06/2010, at 8:21 PM, David Dorward wrote: On 29 Jun 2010, at 11:04, de...@littlegent.com wrote: I'd recommend using one from http://www.cssplay.co.uk/menus/ The trick is deciding which one to use, really. =) Having taken a quick look, I'd run a mile from them. The first one I looked at was missing and pointed me somewhere else, which assured me that I've love a newer version and directed me to http://www.cssplay.co.uk/menus/final_drop.html It was wrong, I don't love it. It seems to have all the problems I described earlier (although it does, at least, bother to have basic links at the top (I wonder how many people bother to put something useful that that can substitute for the menu on those pages…) lia href=../menu/index.htmlDEMOS!--[if gte IE 7]!--/a!--![endif]-- !--[if lte IE 6]tabletrtd![endif]-- This hideous excuse for markup can't be worth removing the dependancy on JS, can it? (Especially since you need to implement the same fallbacks anyway!) -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Try this for CSS menus with keyboard support: http://carroll.org.uk/sandbox/suckerfish/bones2.html This menu may be accessible, but is it usable? Unless I am missing something, keyboard users need to go through *every single link* in the menu to reach the last item :-( I have these two: http://tjkdesign.com/articles/new_drop_down/default.asp http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp They show what's involved and what are the limitations. Pure CSS menus are a bad idea, and hybrid implementations that claim to be accessible simply because links are accessible are often bad solutions too. Imho, users should be able to access all pages within a web site without frustration. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hey Thierry, Sorry to say this but the keyboard friendly version: http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp Only fires, via keyboard, on Articles E-K in IEv8 or Firefox. Mike -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: 29 June 2010 16:22 To: wsg@webstandardsgroup.org Subject: RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu) Try this for CSS menus with keyboard support: http://carroll.org.uk/sandbox/suckerfish/bones2.html This menu may be accessible, but is it usable? Unless I am missing something, keyboard users need to go through *every single link* in the menu to reach the last item :-( I have these two: http://tjkdesign.com/articles/new_drop_down/default.asp http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp They show what's involved and what are the limitations. Pure CSS menus are a bad idea, and hybrid implementations that claim to be accessible simply because links are accessible are often bad solutions too. Imho, users should be able to access all pages within a web site without frustration. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Hi Mike, Sorry to say this but the keyboard friendly version: http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp Only fires, via keyboard, on Articles E-K in IEv8 or Firefox. This is by design. Keyboard users could not reach these pages if they were not focusable at least from the parent page. The About this solution section says: Note that keyboard users cannot skip the sub-menu related to the current page. This is because this sub-menu is exposed to SE (Search Engines) and thus accessible to keyboard users when JS is off. The sub-menus open via the *enter key*, this is to allow keyboard users to skip sub menus so they are not forced to tab through all the menu items. If the menu is accessible, it is *because* the sub menu related to the page itself *is* focusable (it is not styled with display:none). What this menu is missing though is a arrow pointer for *discoverability*. I have a title in there, but I think it's pretty useless (for 99.99% of users). If I had time, I'd add arrows and ARIA roles too. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: Using CSS instead of JS for accessibility (was Re: [WSG] CSS Expandable Menu)
Sorry to say this but the keyboard friendly version: http://tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp Only fires, via keyboard, on Articles E-K in IEv8 or Firefox. This is by design. Keyboard users could not reach these pages if they were not focusable at least from the parent page. The About this solution section says: Note that keyboard users cannot skip the sub-menu related to the current page. This is because this sub-menu is exposed to SE (Search Engines) and thus accessible to keyboard users when JS is off. The sub-menus open via the *enter key*, this is to allow keyboard users to skip sub menus so they are not forced to tab through all the menu items. If the menu is accessible, it is *because* the sub menu related to the page itself *is* focusable (it is not styled with display:none). What this menu is missing though is a arrow pointer for *discoverability*. I have a title in there, but I think it's pretty useless (for 99.99% of users). If I had time, I'd add arrows and ARIA roles too. I have a bug report... tested against FF 3.6.4 and IE6 (no bug under Chrome 5.0.376) Steps to reproduce: - click on background - tab to focus first menu item - hit enter to display sub-items - tab through to the second menu - hit enter to display its sub-items (the first menu closes) - hit shift-tab to go back to the first menu The bug is either one of a) the first menu shouldn't open as the second menu is active, or b) that the second menu stays open. regards, Mathew Robertson *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] CSS Expandable Menu
Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS Expandable Menu
Hi Grant, I'm not sure if this is what you're looking for, but this might help: http://www.alistapart.com/articles/dropdowns Unfortunately, this does require some javascript as IE doesn't support a few CSS elements. Cheers, Jelina On Tue, Jun 29, 2010 at 9:30 AM, grant_malcolm_bai...@westnet.com.au wrote: Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS Expandable Menu
Hi Grant, Maybe this can help: http://free-css-menu.com/vertical-css-menu.html SteF. On Mon, Jun 28, 2010 at 7:30 PM, grant_malcolm_bai...@westnet.com.auwrote: Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- stephaneblanchard.ca designer web www.twitter.com/stefblanchard www.facebook.com/stefblanchard *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS Expandable Menu
If you're talking about a tree-like menu, I've never come across a purely CSS one. It strikes me that CSS alone doesn't have the vocabulary to deal with something that requires an 'expanded' and 'collapsed' state. If you're worried about accessibility, either * expand it all by default, and use JavaScript to collapse and expand it or * do a page-reload if there's simply too much content to have it all expanded at once. (And then disable that if a user has JS turned on). This kind of thing is very easily accomplishable with something like jQuery, and you can generally work through or around any accessibility concerns. - Josh -- www.oxideinteractive.com.au On 29/6/2010 9:30 AM, grant_malcolm_bai...@westnet.com.au wrote: Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Expandable Menu
Hi Grant, It’s great you’re looking for an accessible menu solution, but I’d recommend not throwing away javascript solutions in the process. Yahoo has some great information on adding WAI-Aria roles and states to menu buttons using javascript that you may be able to adapt for your purposes without too much trouble. http://developer.yahoo.com/yui/3/examples/node-focusmanager/node-focusmanager-3.html They also provide a menu plugin that might be useful to you. http://developer.yahoo.com/yui/examples/menu/menuwaiaria.html Cheers, S From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of grant_malcolm_bai...@westnet.com.au Sent: Tuesday, 29 June 2010 9:31 AM To: wsg@webstandardsgroup.org Subject: [WSG] CSS Expandable Menu Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey Please consider the environment before printing this e-mail. The information contained in this email and any attachment is confidential and may contain legally privileged or copyright material. It is intended only for the use of the addressee(s). If you are not the intended recipient of this email, you are not permitted to disseminate, distribute or copy this email or any attachments. If you have received this message in error, please notify the sender immediately and delete this email from your system. The ABC does not represent or warrant that this transmission is secure or virus free. Before opening any attachment you should check for viruses. The ABC's liability is limited to resupplying any email and attachments. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS Expandable Menu
Hi Grant, You're meaning the sort of tree-menu arrangements that have a little plus next to items with children, and clicking the plus makes the children appear and push the other elements further down, right? I don't believe what you're looking for is possible, as that sort of hierarchical menu requires changes that stick rather than just activating on hover. CSS just isn't designed to do that sort of thing. Then again, JavaScript doesn't automatically mean inaccessible. What concerns in particular did you have about JS making the menu inaccessible? Cheers, Seona. On 29 June 2010 09:30, grant_malcolm_bai...@westnet.com.au wrote: Hello, I would be grateful if someone could clarify whether there is such a thing as a pure CSS expandable menu. The sort of thing I'm looking for is the expandable / collapsible hierachy commonly shown in the left-hand frame of Windows programs such as Explorer or Outlook. I'm trying to avoid use of Javascript due to accessibility concerns. Thank you and regards, Grant Bailey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Expandable Menu
Hi Grant, I'm trying to avoid use of Javascript due to accessibility concerns. There is no problem with using a javascript powered menu as long as that menu is accessible with javascript off. As a side note, pure CSS menus usually come with usability issues. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS Expandable Menu
The YUI3 menu widget has great accessibility support http://developer.yahoo.com/yui/3/node-menunav/ Accessibility Usability Minded The MenuNav Node Plugin was built with both accessibility and usability in mind. The MenuNav Node Plugin implements established mouse and keyboard interaction patterns to deliver a user experience that is both familiar and easy to use. To that foundation the MenuNav Node plugin adds support for screen readers through the use of the WAI-ARIA Roles and States. Watch this video for a quick a demo of a menu created using the MenuNav Node Plugin using the WAI-ARIA Roles and States running in Firefox 3 using the Window-Eyes screen reader. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: Monday, June 28, 2010 4:56 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] CSS Expandable Menu Hi Grant, I'm trying to avoid use of Javascript due to accessibility concerns. There is no problem with using a javascript powered menu as long as that menu is accessible with javascript off. As a side note, pure CSS menus usually come with usability issues. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
