Tabbing problem... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> Tabbing problem... (5/18/2006 7:47:03)

I don't really know what's happening here, and i'm not sure this is a CSS issue or an Accessibility issue, but I re-started my website that I was building using CSS positioning, and have come to this point:

http://www.users.on.net/~nicoleoz/#

Anyway, I'm pretty happy with everything so far, it validates, complies, looks okay, but when tabbing through the links, scrollbars appear and just after tabbing through the left menu, and into the main content area, the content disappears?

Why is this?

Why are scrollbars appearing? Is it because I'm using a combination of px, ems and %? And why is the content disappearing?

Anyone?

Thanks

Nicole



jaybee -> RE: Tabbing problem... (5/18/2006 8:08:05)

Nicole, I think there may be two problems.

First you seem to have a heck of a lot of webot includes. Are you including everything into the page? Including the content? Tabbing to the content seems to be bringing up the scrollbars. The content doesn't disappear, it goes down the bottom of the page.

It may also be that the content is a couple of pixels too wide so when the focus hits it, it brings it to the fore and hence the bars.

Second, you don't seem to have any specific tab indexes in the code so it's defaulting. I use the following 

<li><a tabindex="3" title="go to" href="/webmaster.html">WEBMASTER TOOLS</a></li>


Using tab indexes means you can specify where the focus goes by having all your menu links as =1, then the content as =2 and so on.



Nicole -> RE: Tabbing problem... (5/18/2006 8:13:22)

Thanks Jaybee,

I'm not using includes for the content, but I am using them for everything else as it will be repeated on "every" other page. Is there a problem with that?

Actually it was when Cynthia testing and reading a warning about creating a tabindex that I remembered to tab through the site and noticed the problem. I've just checked in other browsers also. Scrollbars are appearing in all of them but the worst is Firefox which I should expect because the others are probably guessing.

But in Opera, I can't seem to tab through the page. Is that because Opera won't let you unless you've set a tab index?

Nicole



Nicole -> RE: Tabbing problem... (5/18/2006 8:15:42)

Using tab index, do you actually designate a single tab index to each div or to each individual link?

Guess I should search for more info on this.



jaybee -> RE: Tabbing problem... (5/18/2006 8:22:13)

You apply the tab to wherever you want it to go. I tend to apply one to every link in case I change things and delete the one on the parent.

It depends on the layout of your sheet. For example, if I have a source ordered sheet with the content first, and I want the tab to go there first then I don't specify a tab on that but I do set the tabindex for the menu links to 2 3 4 etc.

Opera I'm not sure but I expect that's the case.

You're fine including repetitive items. I was just surprised at the number of bot calls in there. Can't you join some of the bits together? I normally have one inculde for the header, one for the left or right column and one for the footer.

If you have a subheader that's different on each page then that would be a separate one but then I wouldn't bother having an include for that as it is different.



Nicole -> RE: Tabbing problem... (5/18/2006 8:34:08)

I guess I could combine the skip link/accessibility include and the banner, but the text-resizer I think needs to be separate as it's narrower and floating right so the left side navigation can be higher on the page. (quite proud of how that happened btw![:)])

I think the page headings need to be higher again though, so I was thinking of taking them out of the content div and somehow floating them next to the text-resizer. Don't hold your breath though, I'll probably work out how to do that effectively in a few years or so.



Tailslide -> RE: Tabbing problem... (5/18/2006 8:48:24)

Nicole

If you get rid of overflow:auto on all your divs then the scrolling problem goes away. I'd only ever use that if I actually wanted scrolling divs - but I'm guessing you don't/

I'm going to disagree with Jaybee about Tabindex - I don't think it's usually useful - your site shouldn't need it. The only stuff that needs it is if you've got a really convoluted setup and you don't - so best avoided - specially since you've got skip links anyway.



jaybee -> RE: Tabbing problem... (5/18/2006 8:55:11)

Noooo don't get me wrong, I'm not saying you have to have tabindex just that if you are going to use it and you want stuff to tab in a certain order then tabindexes are a must.

Nicole as you discovered the tabs on my page are a mess at the moment as I'm changing the menu etc and that's the disadvantage to using them. You add in new bits you MUST recheck all the tabs otherwise it's a nonsense. [edit] fixed [/edit]

Tail is right, on a nicely set up simple site you don't really need them unless you're trying to hit level 3 of the WCAG. It looks like Opera may disagree though. I'll go check.



Nicole -> RE: Tabbing problem... (5/18/2006 8:56:25)

Clever Tail,

Overflow:auto removed and problem with scrollbars has been extinguished!

lol

Easier than expected!

But with the tab index, if I don't bother, Opera won't like it, will it?

Nicole



jaybee -> RE: Tabbing problem... (5/18/2006 8:58:42)

OK, I checked and yes, you need the tabindexes for Opera.



womble -> RE: Tabbing problem... (5/18/2006 10:00:13)

Oh b*****r! I never realised that about Opera! [:@]

/trudges back to current project muttering and digs out a box of tabindexes from the desk drawer to stick on the site. [&o]



Tailslide -> RE: Tabbing problem... (5/18/2006 11:15:09)

That'll be because in Opera you use the A key rather than tab!




jaybee -> RE: Tabbing problem... (5/18/2006 13:20:23)

Well how stooopid is that? My keyboard doesn't have a label that says press this for Opera. Humph. Well the tabkey works if you use tabindex so I'm sticking with that, so there. [&o]

Oh ooops, hit the wrong button again. Must get Spooky to move the edit button farther away from the quote button. [&:]



womble -> RE: Tabbing problem... (5/18/2006 14:36:52)

Humph precisely!

Purely on the grounds that it's quicker to do than going back and adding in tabindexes (tabindices?), I think my current sites will be getting a line added in to the bit about using tab that says something along that lines of "of course if you're using stoopid Opera press 'a' instead" and henceforth shall my new sites have nav with tabindexes to appease Opera.

Humph!



caz -> RE: Tabbing problem... (5/18/2006 14:49:45)

quote:

henceforth shall my new sites have nav with tabindexes to appease Opera.


[sm=bowdown.gif]

btw indexes was the right choice there, little furry one. [;)]



Tailslide -> RE: Tabbing problem... (5/18/2006 14:53:08)

I'd still avoid them Womble - unless you're planning some highly complex layout. Opera users will know how to use their keyboards - you could put something on the accessibility page just in case.

Tabindexes can be a nightmare to maintain if you add stuff to the site and I've been told (don't know how much store to put in it) by an "accessibility expert" that they can be confusing.



womble -> RE: Tabbing problem... (5/18/2006 15:10:25)

quote:

I'd still avoid them Womble - unless you're planning some highly complex layout. Opera users will know how to use their keyboards - you could put something on the accessibility page just in case.

That was my thinking in amending my current sites accessibility statements (quite apart from saving myself time wading through them all adding tabindexes).

Regarding the confusion, I'd agree that they probably would as a little experiment this afternoon adding them onto one page to see what happened resulted in me discovering that unless every single hyperlink on a page including in-text ones and email links, adding tabindexes just to the nav completely buggers up being able to tab through a page unless you're very careful.

In the words of a furry chum of mine (Pooh Bear) "I am a bear of little brain and long words confuse me". Anything that makes life complicated where it needn't be should be avoided. Simple is best every time, and I think in most cases I'll be just fine with the natural tab order and a change in my accessibility statement.

On reflection I think I'll reserve tabindexes for forms and such like and leave the rest simple.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625