[WSG] Drop-down menu issues
I've been struggling with a horizontal drop-down menu that came to us and we have no control over.. 1. fly-outs to 3 levels 2. only the final element in the fly out has a link. There is no left-hand menu to take some of the pressure off the fly-outs... I did add an additional skip link to the site map just before the navigation... We are the production team and this was decided and designed long before we were involved. although I raised concerns from the beginning. The menu items are added dynamically by the content management team using Vignette now OpenText. Originally I used the original Suckerfish and I removed the a href ..if there was no link. works wonderfully with a screenreader (better and easier than a mouse user), however there is no visual for the keyboard only user however, this user can tab from link to link. this user misses the content for the non-link area. Other issues have come up non-508 and it was extremely challenging to style each level with and without a link. Then I discovered Superfish and wanted to upgrade the technology, however it won't work for keyboard only users without a link. Question... Is it appropiate to use a href=# or any other means to indicate no link? there is no onclick event straight html. Is there something else? Would WAI-Aria roles work here? If so could someone point me to an easy tutorial with more examples than lots of text.? Thanks, Nancy *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Drop-down menu issues
go die 2011/7/29 Nancy Johnson njohnso...@gmail.com I've been struggling with a horizontal drop-down menu that came to us and we have no control over.. 1. fly-outs to 3 levels 2. only the final element in the fly out has a link. There is no left-hand menu to take some of the pressure off the fly-outs... I did add an additional skip link to the site map just before the navigation... We are the production team and this was decided and designed long before we were involved. although I raised concerns from the beginning. The menu items are added dynamically by the content management team using Vignette now OpenText. Originally I used the original Suckerfish and I removed the a href ..if there was no link. works wonderfully with a screenreader (better and easier than a mouse user), however there is no visual for the keyboard only user however, this user can tab from link to link. this user misses the content for the non-link area. Other issues have come up non-508 and it was extremely challenging to style each level with and without a link. Then I discovered Superfish and wanted to upgrade the technology, however it won't work for keyboard only users without a link. Question... Is it appropiate to use a href=# or any other means to indicate no link? there is no onclick event straight html. Is there something else? Would WAI-Aria roles work here? If so could someone point me to an easy tutorial with more examples than lots of text.? Thanks, Nancy *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- Best Wishes , Yours sincerely, Garment4u Team Album: Shoes : http://picasaweb.google.it/fashionSHOESforyou http://picasaweb.google.it/garment4uno2 http://picasaweb.google.it/garment4uno1 http://picasaweb.google.it/garment4uno3 http://picasaweb.google.it/garment4uno3 http://picasaweb.google.it/uggbootsforyouhttp://picasaweb.google.ru/uggbootsforyou Bag: http://picasaweb.google.it/fashionBAGforyou4 http://picasaweb.google.it/fashionBAGforyou3 http://picasaweb.google.it/fashionBAGforyou2 http://picasaweb.google.it/fashionBAGforyou Dresswear: http://picasaweb.google.ru/fashiondressforyou7 http://picasaweb.google.ru/fashiondressforyou6 http://picasaweb.google.it/fashionDRESSforyou3http://picasaweb.google.it/fashionDRESSforyou2 http://picasaweb.google.it/fashionDRESSforyou2http://picasaweb.google.it/fashionDRESSforyou http://picasaweb.google.it/fashionDRESSforyouhttp://picasaweb.google.it/fashionDRESSforyou5 CasualWear: http://picasaweb.google.it/Casualwearforyou Accessory: http://picasaweb.google.it/ladiesfashionforyou2 http://picasaweb.google.it/ladiesfashionforyou http://picasaweb.google.it/fashionaccessoryforyouhttp://picasaweb.google.it/fashionaccessorforyou Leather and Fur : http://picasaweb.google.it/leathernfurforyou *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Drop-down menu issues
On Jul 29, 2011, at 7:59 AM, Nancy Johnson wrote: -snip- If so could someone point me to an easy tutorial with more examples than lots of text.? Thanks, Nancy Nancy: I have a couple menus you might try: http://sperling.com/web-tips.php Cheers, tedd ___ Tedd Sperling tedd.sperl...@gmail.com http://sperling.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Drop-down menu issues
On Jul 29, 2011, at 4:59 AM, Nancy Johnson wrote: Other issues have come up non-508 and it was extremely challenging to style each level with and without a link. Then I discovered Superfish and wanted to upgrade the technology, however it won't work for keyboard only users without a link. Question... Is it appropiate to use a href=# or any other means to indicate no link? there is no onclick event straight html. Is there something else? I think you are confusing with the link (because of drop-down menu?), content and keyboard navigation. 1. Keyboard navigation allows a user to tab through links within a page. If a section of content consists of links and content, it simply looks for the next link. It couldn't magically provide tab-able navigation within the content if there is no herf link whether the content is in a drop-down menu (or similar effect) or not. 2. If a phrase, a sentence of paragraph or a li element is not a link (to somewhere) and it's not used to trigger a JS effect within the page (such as tab, accordion, collapsable, or popup), you should never use a href=#. 3. A drop-down menu is a conventional set of navigational elements that group together within a section using show/hide sort of effect. Maybe you can still call it drop-down menu if it's a mixed of navigational elements and content, but IMHO the name doesn't matter because it boils down to this: using JS effect to control a section of the page that has both navigational elements and content. What matters is how you go about doing it right that doesn't add obstacle for the users, and for an effect like this, you probably don't want to use suckerfish or superfish or any drop-down menu script but something simple that controls the show/hide, then use absolute position to control the hidden div so when it triggers (either by hover or click or keyboard tab), it mimics a drop-down effect instead of collapsable. Google jQuery show hide you should be able to find plenty examples. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
