SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,886
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)

    Is it possible to style tabindex using CSS

    Hi,

    I have a navigation bar which is assigned a tabindex value, so that it is possible to navigate through it using the keyboard.
    Code HTML4Strict:
    <div id="Accordion1" class="Accordion" tabindex="0">
    Anyway, in Firefox and IE, all is good. However, Chrome and Safari respectively but a big green or blue border around the whole navigation bar (owing to the tab index).
    Question: is there any way to change this behaviour using CSS?
    I have searched Google and other forums and it seems like the answer is a resounding "no!", but nonetheless someone here might have a clever idea that will help.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's caled an outline .
    Code:
    outline:0;
    I have to go, I'm late for work. Hope that helped
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,886
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Ryan,
    You are a star. Thank you very much!!!
    Have fun at work.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I didn't . I never do.

    Glad it worked .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It's caled an outline .
    Code:
    outline:0;
    I'd always be very careful about removing the outline, and only do that if you have an alternative :focus style that highlights the selected menu item - otherwise it makes it difficult for people using the keyboard to know where they are.

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ...And I would be very wary of introducing tabindex at all.

    I have a navigation bar which is assigned a tabindex value, so that it is possible to navigate through it using the keyboard.
    Focussable elements are already able to be accessed via the keyboard, naturally in source order (except in Opera where you can choose a spatial direction and are not limited to source order).

    Tabindex is really for when your source order is unavoidably weeeeeird and you'd like the keyboarding users' experience to make sense. Otherwise, try NOT to use it. It can seriously screw with a keyboarder's ability to navigate where they want to on your page.

    As a note, I notice the div is called "Accordion"... using a javascript toggle to hide/show page elements, I noticed that Opera allows me to focus onto the stuff that appears on screen, while FF and Safari make me tab through all the elements in source order, even though they have been pulled offscreen (they are not display: none but absolutely positioned). I could imagine carfefully adding tabindex dynamically to help "fix" those browsers, but every time someone triggered the toggle, the tabindexes would have to adjust.
    I'd be too scared to try it on a real page.


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
  •