SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How does one build an accessible dropdown menu?

    There have been some discussions about drop down menus not being accessible and I have seen some drop down menus that did work via the keyboard. My question is how does one build a keyboard accessible drop down menu from the ground up?

    I AM NOT looking for canned menus that already exist. I want to understand the nuts and bolts theory behind these menus so that I can build my own custom menu to serve my own purposes and along the way maybe provide others with the tools to do the same.

    One of my ultimate objectives is to build a pure DHTML keyboard accessible drop down menu that does not require JavaScript (at least not for Firefox and Opera). I've seen this done, now I want to know how they did it.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You can build a drop-down menu using HTML and CSS only, however it will not work in any of the browsers I've tested in (IE7, FF1.5.0.12, FF 2.0.0.4, Opera 9.21). For an actually useful drop-down menu with keyboard access, you'd need to use Javascript (likely onFocus())
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can build a fully functional dropdown with only HTML and CSS using the hover pseudo class that will work correctly in Firefox, Opera Safari and with minor issues in IE7. If it doesn't have nested menus, it will even work just fine in IE7.

    The problem is this pure DHTML menu can't be accessed via a keyboard.
    This looks like a spot in the HTML/CSS specifications that is sorely lacking.

    What we need is a CSS style instruction like maybe "keyboard:stop" that can be applied to any HTML object like an LI tag and when the object has focus the hover pseudo class is applied. A CSS instruction that tells the keyboard to go to an object combined with nested unordered lists would make for a very elegant drop down menuing system.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  4. #4
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The pseudo-class :focus would be the appropriate function for this:
    Quote Originally Posted by [url=http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes]W3C[/url]
    The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).
    Unfortunately, it doesn't appear to be well-supported.

    I did as such manage to get FF to work, by pressing the Menu key/[Shift] + [F10], but this opened both all the sub-sub-menus (causing them to overlap) and opened the right-click menu on top of the menu, so it isn't very useful - it was on the second website in my signature (where I have a fairly strong design with sub-sub-menus, which works well in IE7/FF/Opera) that I experienced this. I'd be interested in knowing if other people can reproduce this?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What this really sounds like is that W3C needs to address this functional need in HTML and CSS such that developers could use to EASILY address both the mouse and keyboard the way the hover pseudo-class handles the mouse.

    An alternative menu (e.g. the main menu item being linked to an alternative webpage for the sub-menu items) might be accessible, but it isn't the best for usability.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    They already have addressed it, the problem is that the method proposed isn't supported by any browsers.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,301
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    i've always found, as a user, certainly in the past, drop down menus problematic. so i'm thinking drop down menus and accessability just don't go together? maybe that's changing/has changed? i don't know.

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Are you thinking about a menu made using a SELECT or a UL, with nested ULs?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In either case as long as there is an alternative means of navigation that preforms the same duty there is not an accessibility issue, it just might not be as usable. My goal was to provide the same level of USABILITY to users who have to use keyboards instead of a mouse. The thing is I am not going to remove a feature that enhances usability for the vast majority of my users just because a small minority can not use the ADDED functionality. Everyone can get to the content, its just that a few people need to visit an extra menu page along the way.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  10. #10
    Cha, Cha, Cha!!! Gamermk's Avatar
    Join Date
    Aug 2005
    Posts
    604
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I think a small logical step you could take would be to ensure that when they hit the Tab key for the first time that they get your first navigational item. It's safe to say what you are actually looking for is a Tab system that walks through the subareas of the drop downs, correct?
    People don't read ads. They read what interests them,
    and sometimes that happens to be an ad.
    TrulyBored.com | TankingTips.com

  11. #11
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first tab key stops are all links to primary site navigation pages. What I was hoping for was the ability to use the keyboard to navigate my drop down menus without having to jump to menu pages. I've come to the conclusion that given the current state of web specifications and browser support this can not be done without adding in a mess load of HTML and JavaScript to my menus, which would make them very bloated. For now the best option seems to be to rely on the menu pages to provide the navigation provided by the drop down menus for those users who can not use a mouse.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •