Accessible DHTML Menus
Following on from brothercake and isofarro, can DHTML menu's be made accessible?
| isofarro wrote: |
| There's a noticeable demand for accessible DHTML menus, and a lack of viable options. |
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share: 
There is a noticeable demand, yes; I think the core best approach is list-based, using simple CSS or JS triggers to open and close the menus - I made a basic prototype at http://www.brothercake.com/scripts/listmenu/
Already we have better accessibility because it's available to all browsers irrespective of JS or CSS support; and since the links are real links, they can take on accesskeys, tabindex, and have visited and unvisited styles.
But that's not enough to satisfy the market, who want a comparable featureset in order to be convinced away from traditional "tag soup DHTML" APIs. So I've been developing the script to that end, and it's proven extremely difficult; mostly because of IE.
Here's where I am at the moment - http://www.brothercake.com/udm/template.php
It's navigable via the TAB key, and it also has its own key navigation - you can press "F12" (with no modifier) to jump onto, or off the navigation bar, and when the bar has focus you can move around it using the normal page arrow keys (mozilla and win/IE only for this feature - no other browsers have useable key event models). It also has synchronised open and close timers so you don't have to be precise with your mouse movements, and the menus are self-repositiong so they stay inside the viewport.
I'm also working on Microsoft SAPI integration, to provide speech output. Are there any speech APIs for Mac or Linux that could be used for the same purpose?
Any feedback is welcome; I can be specific about how any or all of it works, if anyone's interested
Share:
Well done Bro'.
It worked well here I must say. The only reservation I have with these things is the reliance on client-side scripting.
Share:
| brothercake wrote: |
| There is a noticeable demand, yes; I think the core best approach is list-based, using simple CSS or JS triggers to open and close the menus - I made a basic prototype at http://www.brothercake.com/scripts/listmenu/ |
Definitely list based is the way to go - and something like the menus on http://www.gazingus.org/dhtml/?id=109 is a good start.
I've had a brief look at your menus. They are very impressive, and structurally clean, your javascript is short and to the point. Good work!
Share:
I have a slightly different take on the issue at cybo, i'm not using a list because i may in the future want to place different peices of the navigation in a different arrangement (in a circle for example! - dont ask!)
it's not completely finished yet, the access keys have yet to be fully implemented, and tab indexing to be added, but they are next on the list
i also need an option to open all / close all. but thats a matter of minutes... maybe this afternoon...
edit: btw brothercake, your script http://www.brothercake.com/udm/template.php crashes both copies of NS 4 on my machine
atb. j
http://www.opsi.gov.uk/acts/acts1995/Ukpga_19950050_en_8.htm#mdiv57
Share:
Thanks for all the comments
| Mike@TheWhippinpost wrote: |
| The only reservation I have with these things is the reliance on client-side scripting. |
But the reliance is only partial - the thing still works when JS is not available; eventually I plan to include CSS triggers, so that in browsers which support :hover and :focus on arbitrary elements it still has a high degree of functionality without Javascript, along the lines of Eric Meyer's pure CSS Menus. But even without CSS, the tree is still there.
| Isofarro wrote: |
| Definitely list based is the way to go - and something like the menus on http://www.gazingus.org/dhtml/?id=109 is a good start. |
Yeah it's a good menu that, but I have a few reservations about its functionality (only works onclick, which I find counter-intuitive), its code implementation (requires hard-coded attributes on every top level), its depth limitation (only supports a single level of menus) and its browser support (no Opera). I made an early prototype to address those concerns - http://www.brothercake.com/scripts/listmenu/ - and while it lacks the key triggering and usability features of the more developed script, it's also much much smaller - a tiny amount of CSS and Javacript to create a multi-level menu that works in all 5+ DHTML browsers.
| jim barter wrote: |
| I have a slightly different take on the issue at cybo, i'm not using a list because i may in the future want to place different peices of the navigation in a different arrangement (in a circle for example! - dont ask!)
|
Why does that preclude you from using lists?
| jim barter wrote: |
| btw brothercake, your script http://www.brothercake.com/udm/template.php crashes both copies of NS 4 on my machine |
Oh .. that's not good .. thanks for the head's up. Can you possibly tell me which NS4 build and OS combinations you're using?
Last edited by brothercake on 12 Sep 2003 12:09 am; edited 1 time in total
Share:
my menu on my personal site may not be an actual list - so i'm trying to avoid using them (semantics and all that) - i would use them on commercial sites however.
um, as for the netscape thing
NS4.7 (57bit) & NS 4.7 (128bit) on XP also NS4.79 on 98 crash
and .js errors in NS3.04 on 95
(i run VPC for testing on multiple browsers & OSs)
http://www.opsi.gov.uk/acts/acts1995/Ukpga_19950050_en_8.htm#mdiv57
Share:
| jim barter wrote: |
| my menu on my personal site may not be an actual list - so i'm trying to avoid using them (semantics and all that) - i would use them on commercial sites however. |
Surely, in as much as a list is the closest semantic we have, any kind of menu or navigation structure is a list, irrespective of what it looks like?
| jim barter wrote: |
| NS4.7 (57bit) & NS 4.7 (128bit) on XP also NS4.79 on 98 crash
and .js errors in NS3.04 on 95 |
Thanks for those, I'll check em out. A crash bug is clearly unacceptable, but I'm not concerned about NS3 errors, and there is no XHTML solution in any case - the mere presence of things like object and array literals, and regular expressions, causes errors in NS3 even if the code is never called; the only way to prevent that is to use the deprecated "language" attribute on the <script>, to a value of "javascript1.2" or later, but that would invalidate the markup.
I think it very safe to assume that anyone who actually uses Netscape 3 (rather than developers who test in it) has learned long ago to turn off Javascript or suffer an endless hail of error messages.
Share:
| brothercake wrote: |
|
Surely, in as much as a list is the closest semantic we have, any kind of menu or navigation structure is a list, irrespective of what it looks like? |
fair enough, but the code required to produce the functionality i desire is simpler , cleaner, lighter & IMHO as accessible when NOT using lists...
...i do feel like a bit of a heretic in this regard
, but it works for me.
| brothercake wrote: |
| I think it very safe to assume that anyone who actually uses Netscape 3 (rather than developers who test in it) has learned long ago to turn off Javascript or suffer an endless hail of error messages. |
too true, I'm fairly sure that most of the older browsers that show up in the logs of our websites are from webdevelopers within our building...
(most of 'em are probably me!)
http://www.opsi.gov.uk/acts/acts1995/Ukpga_19950050_en_8.htm#mdiv57
Share:
| jim barter wrote: |
| I'm fairly sure that most of the older browsers that show up in the logs of our websites are from webdevelopers within our building... |
Possibly yeah - but maybe some civil service departments, less affluent schools, colleges or community centres - places where the money is extremely tight and they're still using Win 95 or older.
Last company I worked at showed twice as many NS3 as NS4, and I always figured it was these, since the public sector was our major market.
Share:
Brothercake, I like the method you used in the first link you posted here. Can you show me how I could implement that menu but make it inline? I've tried adding display: inline; to your styles but its not working
Share:
I think you need to add some absolute positioning for that.
Something like
| Code: |
|
#menu { position : absolute; top : 20px; left : 0px; } /* absolutely positions the menu somwhere */ #menu li { display : inline; } #menu li:hover ul { position : absolute; top : 20px; left : 0px; } /*positions the start of the submenu 20px down and 0px left of the regular menu */ |
Of course, I have no idea how to do it with JavaScripts since my knowledge of that is extremely limited...
Share:
You mean inline as in horizontal? I haven't much implemented that at the moment - the main thing to do is have the list-items and anchors both "float:left", then set the <ul> width to 100%, and it should become a horizontal row. Beyond that I couldn't really tell you - there's a few different browser problems going on.
Share:
brothercake, I'd really like to implement your script on a site but even taking your advice I couldn't get the menu to display horiztonally and the sub menus below each parent menu item. Can you help at all? I only have 5 graphical links and a few of them have sub links I want in a drop down.
Share:
We're working on a new 'compliant' version of the drop menu used on our clients site at www.lindholmemsc.co.uk...
All help welcomed, we're happy to have any code hacks or critique
ATB
Designory UK
Share: