SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keyboard Accessibility - Show dropdowns using :focus and the keyboard.

    Hi all

    I'm trying to stay away from adding JavaScript and was wondering if its possible to make :focus work like :hover when using my keyboard (tab key).
    The dropdowns don't work when using the keyboard ( :focus ), is there a solution to use without using JavaScript?

    I have a working copy running locally but have a link below to demonstrate a online example which is very similar.
    http://uablogs.missouri.edu/interfac...d-accessible1/

    This guy also has an extended version using a small snippet of JS running on jQuery.
    http://uablogs.missouri.edu/interfac...d-accessible2/

    Is this possible without JS?

    Thanks, Barry
    The more you learn.... the more you learn there is more to learn.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Only <a> tags and form fields can be given the focus - you can never give the focus to any other part of the page. So you could apply :focus to <a> tags within the menu but not to the rest of the menu. Try applying the focus to the <a> tags inside the <li> tags instead of to the <li> tags
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Felgall

    So that explains why :focus is not working below.
    Code CSS:
    #nav li:hover ul, #nav li:focus ul{ /* Display the dropdown on hover */
    	left:0;
    }

    Any suggestions or might have to settle for a small snippet of JS for keyboard users?
    The more you learn.... the more you learn there is more to learn.


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
  •