[WSG] Accessible Drop Down
http://www.alistapart.com/articles/hybrid/ is a drop down list example which can be seen here: http://www.alistapart.com/d/hybrid/hybrid-4.html. I see that it relies on a source of JS to complete the effect, and i'm wondering if it's possible to complete this purely with XHTML CSS. Anyone have a good example of this? Ryan Moore *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Drop Down
Ryan Moore wrote: I see that it relies on a source of JS to complete the effect, and i'm wondering if it's possible to complete this purely with XHTML CSS. Anyone have a good example of this? Just do not do it. It cannot be done. a. JS is the best tool for *behavior*. CSS for design. b. There are huge accessibility and usability issues with pure CSS menus, such as: - off-screen positioning - moving the mouse the shortest distance will often lead to the menu getting closed - non-intuitive keyboard navigation Etc Lars Gunther *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Drop Down
Ok. So typically is any form of navigation that relies on a rollover or hover state would be a bad practice of accessibility/usability? On 6/12/07, Keryx Web [EMAIL PROTECTED] wrote: Ryan Moore wrote: I see that it relies on a source of JS to complete the effect, and i'm wondering if it's possible to complete this purely with XHTML CSS. Anyone have a good example of this? Just do not do it. It cannot be done. a. JS is the best tool for *behavior*. CSS for design. b. There are huge accessibility and usability issues with pure CSS menus, such as: - off-screen positioning - moving the mouse the shortest distance will often lead to the menu getting closed - non-intuitive keyboard navigation Etc Lars Gunther *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Accessible Drop Down
Ryan Moore wrote: I see that it relies on a source of JS to complete the effect, and i'm wondering if it's possible to complete this purely with XHTML CSS. Anyone have a good example of this? Keryx Web (Lars Gunther) wrote: Just do not do it. It cannot be done. a. JS is the best tool for *behavior*. CSS for design. b. There are huge accessibility and usability issues with pure CSS menus, such as: - off-screen positioning - moving the mouse the shortest distance will often lead to the menu getting closed - non-intuitive keyboard navigation Ryan Moore wrote: Ok. So typically is any form of navigation that relies on a rollover or hover state would be a bad practice of accessibility/usability? It depends on how it is done. I would disagree with Lars that it cannot be done, but to do it properly in a way that meets usability and accessibility guidelines requires a great deal of care and attention to detail. I think that the Ultimate Drop Down Menu 4.5 by Brothercake comes about as close as any I've seen to meeting those guidelines (someone else mentioned it last week in response to a similar question about accessible drop-down menus): http://www.udm4.com/ UDM4 normally uses JavaScript, but it is designed so that the it will degrade gracefully and you can set it up so that your menu will work the same way as a CSS-only menu if JavaScript is turned off. It also includes a keyboard module that allows you to configure better keyboard access. UDM4 is copyrighted and there is a licensing fee, but non-profit organizations can obtain a free license. I do not have any relationship, business or personal, with Brothercake/UDM4 other than having used it when working on a non-profit site in the past. Phil. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Drop Down
Thanks For your Input Phil. What annoys me with some of the solutions is trying to understand some of the browser hacks, and isn't it now with many of the browsers improving that hacks are frowned upon? On 6/12/07, Philip Kiff [EMAIL PROTECTED] wrote: Ryan Moore wrote: I see that it relies on a source of JS to complete the effect, and i'm wondering if it's possible to complete this purely with XHTML CSS. Anyone have a good example of this? Keryx Web (Lars Gunther) wrote: Just do not do it. It cannot be done. a. JS is the best tool for *behavior*. CSS for design. b. There are huge accessibility and usability issues with pure CSS menus, such as: - off-screen positioning - moving the mouse the shortest distance will often lead to the menu getting closed - non-intuitive keyboard navigation Ryan Moore wrote: Ok. So typically is any form of navigation that relies on a rollover or hover state would be a bad practice of accessibility/usability? It depends on how it is done. I would disagree with Lars that it cannot be done, but to do it properly in a way that meets usability and accessibility guidelines requires a great deal of care and attention to detail. I think that the Ultimate Drop Down Menu 4.5 by Brothercake comes about as close as any I've seen to meeting those guidelines (someone else mentioned it last week in response to a similar question about accessible drop-down menus): http://www.udm4.com/ UDM4 normally uses JavaScript, but it is designed so that the it will degrade gracefully and you can set it up so that your menu will work the same way as a CSS-only menu if JavaScript is turned off. It also includes a keyboard module that allows you to configure better keyboard access. UDM4 is copyrighted and there is a licensing fee, but non-profit organizations can obtain a free license. I do not have any relationship, business or personal, with Brothercake/UDM4 other than having used it when working on a non-profit site in the past. Phil. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Drop Down
Ryan, Sure they are frowned upon, but what option do you have? I always resort to a solution that involves javascript - CSS alone just doesn't work in IE6: Dropdowns/flyouts will show appear under select boxes - this is a big issue in IE6 and no amount of css (even hacks) can get around this in that browser. Oh and besides, it doesnt even support :hover css attributes for anything other than an anchor tag... If you could guarantee that IE7 was used by everyone, at least them we could have CSS only solutions. Frankly, I hate drop down menus. They are unnecessary on most standard websites. Jame's work on UDM is probably the most accessible and functional ones out there - they cost, but he's a nice bloke so its worth it if you are doing something professionally with them. Karl On 6/13/07, Ryan Moore [EMAIL PROTECTED] wrote: Thanks For your Input Phil. What annoys me with some of the solutions is trying to understand some of the browser hacks, and isn't it now with many of the browsers improving that hacks are frowned upon? On 6/12/07, Philip Kiff [EMAIL PROTECTED] wrote: Ryan Moore wrote: I see that it relies on a source of JS to complete the effect, and i'm wondering if it's possible to complete this purely with XHTML CSS. Anyone have a good example of this? Keryx Web (Lars Gunther) wrote: Just do not do it. It cannot be done. a. JS is the best tool for *behavior*. CSS for design. b. There are huge accessibility and usability issues with pure CSS menus, such as: - off-screen positioning - moving the mouse the shortest distance will often lead to the menu getting closed - non-intuitive keyboard navigation Ryan Moore wrote: Ok. So typically is any form of navigation that relies on a rollover or hover state would be a bad practice of accessibility/usability? It depends on how it is done. I would disagree with Lars that it cannot be done, but to do it properly in a way that meets usability and accessibility guidelines requires a great deal of care and attention to detail. I think that the Ultimate Drop Down Menu 4.5 by Brothercake comes about as close as any I've seen to meeting those guidelines (someone else mentioned it last week in response to a similar question about accessible drop-down menus): http://www.udm4.com/ UDM4 normally uses JavaScript, but it is designed so that the it will degrade gracefully and you can set it up so that your menu will work the same way as a CSS-only menu if JavaScript is turned off. It also includes a keyboard module that allows you to configure better keyboard access. UDM4 is copyrighted and there is a licensing fee, but non-profit organizations can obtain a free license. I do not have any relationship, business or personal, with Brothercake/UDM4 other than having used it when working on a non-profit site in the past. Phil. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Drop Down Menu Example
Thierry Koblentz schreef: plug src=http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp; / It doesn't seem to work well with keyboard navigation, at least in Opera 9 and Firefox 2. Please try again, I just noticed that I commented a return false statement in the script. The problem now is that I can't remember if I just forgot to remove it or if there was a good reason for that comment to be there :-( Still the same. In the vertical menu only the 3rd item (Articles: E-K) pops up/unfolds when navigating with a keyboard on Fx2 and Op9 (on WindowsXP). cheers, Sander *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Accessible Drop Down Menu Example
On Behalf Of Sander Aarts Thierry Koblentz schreef: Please try again, I just noticed that I commented a return false statement in the script. The problem now is that I can't remember if I just forgot to remove it or if there was a good reason for that comment to be there :-( Still the same. In the vertical menu only the 3rd item (Articles: E-K) pops up/unfolds when navigating with a keyboard on Fx2 and Op9 (on WindowsXP). Sander, You need to use the *enter* key to trigger the dropdown, did you try that? And did you clear your cache? Because I didn't check in Opera, but it is working fine for me in FF2 As a side note, the sub menu relevant to each current page is not skipable to assure that these links are accessible to keyboard users with JS off. --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Drop Down Menu Example
Thierry Koblentz schreef: Still the same. In the vertical menu only the 3rd item (Articles: E-K) pops up/unfolds when navigating with a keyboard on Fx2 and Op9 (on WindowsXP). Sander, You need to use the *enter* key to trigger the dropdown, did you try that? Ah, had not read that. Sorry ;-) But what's the reason for that as it is not really clear? Why not have them popup like when you use a pointer? As a side note, the sub menu relevant to each current page is not skipable to assure that these links are accessible to keyboard users with JS off. I'm not sure I see which main menu item represents the current page. The 3rd perhaps, cause that's the one that acts different. cheers, Sander *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Accessible Drop Down Menu Example
On Behalf Of Sander Aarts Ah, had not read that. Sorry ;-) But what's the reason for that as it is not really clear? Why not have them popup like when you use a pointer? Do you mean by using focus? But then keyboard users would have to tab through the whole enchilada :-( That's how the other menu works (the orizontal one), but it's painful to navigate with the keyboard. I did it that way so people can see/understand the difference of behavior when it comes to tabbing navigation. As a side note, the sub menu relevant to each current page is not skipable to assure that these links are accessible to keyboard users with JS off. I'm not sure I see which main menu item represents the current page. The 3rd perhaps, cause that's the one that acts different. Each page has its own default sub-menu. It matches the nested UL that corresponds to the top level item selected (thus it changes from page to page). --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Accessible Drop Down Menu Example
Hey Folks, was just looking for an example of a good accessible drop down menu for part of a web application i'm developing. Cheers. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Accessible Drop Down Menu Example
On Behalf Of Ryan Moore was just looking for an example of a good accessible drop down menu for part of a web application i'm developing. plug src=http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp; / HTH --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Accessible Drop Down Menu Example
Try http://www.udm4.com/ from Brothercake as a starting place. Regards, Henny From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ryan Moore Sent: 06 June 2007 19:19 To: wsg@webstandardsgroup.org Subject: [WSG] Accessible Drop Down Menu Example Hey Folks, was just looking for an example of a good accessible drop down menu for part of a web application i'm developing. Cheers. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Click here https://www.mailcontrol.com/sr/wQw0zmjPoHdJTZGyOCrrhg== 0U+M2K7yLccMbwCam9gUwEsL95CDFHulm0ITsYQ169DbRVXN1PtXPDnABS3tCnkbD8!009A5 NFp0oPM2zAM72r62QliopakFfuuzhCOvj5CUj+2o15vyQ2J5fJVFzFU6mFBSwGu7pCUwGS2f 4GVMdbvkOWo3za7gZSIRX2qRfcHFlUvB1AwYO0Uo to report this email as spam. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Drop Down Menu Example
On Jun 6, 2007, at 1:18 PM, Ryan Moore wrote: was just looking for an example of a good accessible drop down menu for part of a web application i'm developing. I've used this very simple package many times. http:// www.projectseven.com/tutorials/navigation/auto_hide/ Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Drop Down Menu Example
thanks, this is a great solution :) On 6/6/07, Thierry Koblentz [EMAIL PROTECTED] wrote: On Behalf Of Ryan Moore was just looking for an example of a good accessible drop down menu for part of a web application i'm developing. plug src=http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp; / HTH --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Accessible Drop Down Menu Example
On Behalf Of Ryan Moore was just looking for an example of a good accessible drop down menu for part of a web application i'm developing. From Thierry --- plug src=http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp; / HTH --- Regards, Thierry | www.TJKDesign.com - Also, the Yahoo! User Interface library has a nice menu script that is very accessible. It even has full keyboard support. http://developer.yahoo.com/yui/menu/ Ted *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Drop Down Menu Example
Thierry Koblentz schreef: plug src=http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp; / It doesn't seem to work well with keyboard navigation, at least in Opera 9 and Firefox 2. cheers, Sander *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Accessible Drop Down Menu Example
On Behalf Of Sander Aarts Thierry Koblentz schreef: plug src=http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp; / It doesn't seem to work well with keyboard navigation, at least in Opera 9 and Firefox 2. Please try again, I just noticed that I commented a return false statement in the script. The problem now is that I can't remember if I just forgot to remove it or if there was a good reason for that comment to be there :-( Thanks for the heads-up. --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Accessible drop down menu
Hello all, Got another question today which I can't seem to find any new information on. Was wondering with Ajax and some of these new methods coming out, is there a way of creating an accessible drop-down menu that doesn't use scripting? As in, can we have a drop-down menu that wouldsubmit to the serverwhen you click on a selection, instead of requiring a submit button? One option would be to use _javascript_ to submit using "onchange", then hiding the submit button in a nosript tag for those who don't have jscript turned on. Does anyone havea better idea? I realise it may be better practice to have a go button, but would like to know if it's possible to do without. Cheers, Paul
Re: [WSG] Accessible drop down menu
One option would be to use Javascript to submit using onchange, then hiding the submit button in a nosript tag for those who don't have jscript turned on. Does anyone have a better idea? Hi Paul, Don't know if its exactly what you are after but i did a little script a while ago that turns a list of links into a select box that acts as a jumpmenu that loads a new url onchange. If the user has no js they just get the list of links. http://www.donkeymagic.co.uk/listselect Richard -- DonkeyMagic: Website design development http://www.donkeymagic.co.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Accessible drop down menu
Hi Richard, Thanks for that one, that will definitely come in handy in the future and I've got it bookmarked. Unfortunately though, in this instance the design won't permit me to have a list of links as it would be far too long to fit, so a select box is preferable. Really useful though, thanks very much. Paul - Original Message - From: Richard Stephenson To: wsg@webstandardsgroup.org Sent: Wednesday, February 01, 2006 1:05 PM Subject: Re: [WSG] Accessible drop down menu One option would be to use _javascript_ to submit using "onchange", then hiding the submit button in a nosript tag for those who don't have jscript turned on. Does anyone have a better idea?Hi Paul,Don't know if its exactly what you are after but i did a little scripta while ago that turns a list of links into a select box that acts asa jumpmenu that loads a new url onchange. If the user has no js theyjust get the list of links.http://www.donkeymagic.co.uk/listselectRichard--DonkeyMagic: Website design developmenthttp://www.donkeymagic.co.uk**The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**
Re: [WSG] Accessible drop down menu
Richard Stephenson wrote: Don't know if its exactly what you are after but i did a little script a while ago that turns a list of links into a select box that acts as a jumpmenu that loads a new url onchange. If the user has no js they just get the list of links. http://www.donkeymagic.co.uk/listselect This is brilliant! Thanks for sharing. Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
