Re: [WSG] skip to content: care of accessibility causing usability

[Tee G. Peng]

On Oct 30, 2007, at 5:56 AM, willdonovan wrote:

I dont seem to get any of the flicking effects that everyone is  
talking about.


I'm using Firefox 2.0.0.8



Hi William, thanks for checking. It was eliminated :)

This site has something similar to what I did - I think I must have  
gotten the idea from it ；）


http://www.themaninblue.com/

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[willdonovan]

on the topic of skip links and semantic styling, and to add to the mix 
of usability, accessibility and getting into the habit of best practice,


Accessibility is not just for the impaired, it is also for people who 
access through different devices where CSS has not been styled to suite 
what is being looked at.


I know that mobile isn't a big thing right now, however it is gaining 
pace and there are more internet enabled mobile devices than there are 
desktop computers.


food for thought

William



Tee G. Peng wrote:


On Oct 28, 2007, at 3:56 AM, Stuart Foulstone wrote:

But the point is that, this accessibility feature is for people who 
can't

use a mouse - i.e. they cannot "click" anywhere.



Ah yah right A good point you have made. I am a 'mouse' user, and 
I do find skip to (content/navigation) useful for me. Now you pointed 
out ( John and other did too but I was blind :) ), makes me realized  
I was mainly viewing this feature from my own' benefit.


Glad that I asked. Sometimes one has to show one's ignorance so one 
can learn something important :)


tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[willdonovan]

I dont seem to get any of the flicking effects that everyone is talking 
about.


I'm using Firefox 2.0.0.8

William



Gunlaug Sørtun wrote:

Tee G. Peng wrote:

teesworks.com/

Been working on this site in the last 2 days, I find that I am 
getting so  annoyed by the "surprise' everytime the hover pops up.


If I, the site builder,  find it annoying, what will the users find ?


As a user I find that kind of "visual flicker" highly annoying.

I am beginning to think this is causing a usability issue and is 
killing all other usable elements that I work so hard to try to get 
them right.


A 'Skip to content' link may have its uses, but I don't see much need
for one in that design - too few links to skip (at least in that dev 
page).

Basic accessibility is too hard to sell anyway, and I don't see the
point in annoying clients and/or the majority of users with such minor
issues when there are so many other practical issues to take care of and
spend dev-time on.

Personally I don't provide "skip to (whatever)" links in a design unless
there's a client-request for them, and then I style them without any
"flicker" effects.

regards
Georg




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Patrick H. Lauke]

Stuart Foulstone wrote:


That may well be true, but irrelevant to this discussion.

Tee was enlarging the clickable area of a "skip to content" link with the
intention of making it easier to use.


oops, right you are. must stop reading emails out of context and jumping 
at things. apologies,


P
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Co-lead, Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
Take it to the streets ... join the WaSP Street Team
http://streetteam.webstandards.org/
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Tee G. Peng]

Georg, thank you so much!

IE6 displayed correctly except the header problem I wrote. I did  a  
lot of tweaking in the main stylesheet after my post , and didn't get  
to check on IE6. You saw the 'wrong version' :), but I notice the  
header's reloads disappered now the right column sits below the  
left.  this makes me rethink maybe the mini-cart that has negative  
margin top causing (I ruled this out before), or the "auto-expansion".


Thanks for the advice on hasLayout tricks. I will give it more  
thought next time I tempt to use again.




A fixed-width approach will _just work_ in all browsers, and make it
much easier to get IE6 to behave like a browser.


I need to accommodate 800px screen for a very specific reason, but  
this layout doesn't look good (especially in product page) in 800px.


tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Stuart Foulstone]

On Sun, October 28, 2007 6:38 pm, Patrick H. Lauke wrote:
> Stuart Foulstone wrote:
>> But the point is that, this accessibility feature is for people who
>> can't
>> use a mouse - i.e. they cannot "click" anywhere.
>
> In general parlance, "click" has become the general term for "activate".
> Keyboard users won't walk away offended by the use of that term (just
> the same way that, for instance, a blind colleague I used to work with
> generally used the phrase "see you later").
>
> P
> --
> Patrick H. Lauke
> __


That may well be true, but irrelevant to this discussion.

Tee was enlarging the clickable area of a "skip to content" link with the
intention of making it easier to use.





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] skip to content: care of accessibility causing usability

[Steve Green]

"Most disabled users, particularly sight impaired, will use your header
markup to navigate the page rather than skip links"

Really? How will they do that? And what makes you believe that this is the
case?

"...an accessible browser like Firefox which allows them to display a header
list..."

No it doesn't. There is probably an extension that does this, but in my
experience Firefox is used even less commonly by people with disabilities
than it is by fully able users.

I suspect that more people use keyboard navigation or keyboard equivalents
than use screen readers, and a 'skip to contents' link is helpful for them.
Even if they are using a user agent that uses headers for navigation, a
'skip to content' link saves several clicks, which is important for people
with limited mobility.

Steve



Hi Tee,

I appreciate your desire to provide navigational accessibility for disabled
users however "Skip to content" is not the best way to do it. Most disabled
users, particularly sight impaired, will use your header markup to navigate
the page rather than skip links. Most often the audience who need the skip
nav functionality will be using an accessible browser like Firefox which
allows them to display a header list whereby they can easily surf through a
properly structured page which makes use of header tags.

You've done a fairly good job on the teesworks page using header tags so the
skip to content link is not going to serve much purpose. Also keep in mind
that display:none and visibility:hidden remove content from screen readers.
A screen reader will not pick up elements styled like that so unless that's
your purpose, don't use those kinds of rules in your CSS for markup you
intend for a screen reader.

Nice page btw.

-Tim
--
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
Tim Offenstein  ***  Campus Accessibility Liaison  ***  (217)
244-2700
 CITES Departmental Services  ***  www.uiuc.edu/goto/offenstein



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Patrick H. Lauke]

Philippe Wittenbergh wrote:

A compromise solution I have used: when a client doesn't want them, hide 
them (position them of screen, not display:none), but make them visible 
when those links are focussed (by pressing the tab key).


Yup, I've used that approach on www.salford.ac.uk and it works 
reasonably well.


P
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Co-lead, Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
Take it to the streets ... join the WaSP Street Team
http://streetteam.webstandards.org/
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Patrick H. Lauke]

Stuart Foulstone wrote:

But the point is that, this accessibility feature is for people who can't
use a mouse - i.e. they cannot "click" anywhere.


In general parlance, "click" has become the general term for "activate". 
Keyboard users won't walk away offended by the use of that term (just 
the same way that, for instance, a blind colleague I used to work with 
generally used the phrase "see you later").


P
--
Patrick H. Lauke
__
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com
__
Co-lead, Web Standards Project (WaSP) Accessibility Task Force
http://webstandards.org/
__
Take it to the streets ... join the WaSP Street Team
http://streetteam.webstandards.org/
__


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Gunlaug Sørtun]

Tee G. Peng wrote:

Georg, can you kindly take a look on IE6?  The horizontal menu 
doesn't load smoothly, when the page is fully loaded, the header's 
part reloads, I suspect it has to do with the clear both class yet I

 can't figure  a fix for IE (tried all tricks from hasLayout)


The page loads very much slower in IE6 than in other browser, presumably
because IE6 needs so many fixes. Can't see any reloads.

The use of 'hasLayout' related tricks should be kept at a minimum -
especially at early dev-stage, as that "bug/fix" can ruin any layout
more than it helps, and make all attempts to fix things in IE6 more or
less impossible.
Adding too many 'hasLayout' triggers is like bracing a building to the
point where one has no space left to move around on inside it. Not much
of a building then, and IE/win (any version) won't cooperate well either.

Once loaded, the right part is dropped below the left part, see...



...resulting in overlapping. It will jump back into place with smaller
than normal font-resizing, but won't stay there with normal or larger
font-resizing.

I think it's a case of "auto-expansion" - IE6 doesn't respect declared
dimensions and can't handle overflow properly. The only cure against
that bug is to hide the horizontal overflow with 'overflow-x: hidden' on
problematic containers, which _may_ hide a bit too much at times.


Generally it looks like you have mixed 'em', 'px' and '%' for
positioning and dimensions in ways that doesn't add up under anything
but ideal conditions, and the weaknesses show in any browser. Resizing
window and adding a bit of font-resizing create overlapping and
overshooting in all browsers.
No "elastic" or "conditional elastic" method works well for layouts with
that many fixed dimensions - images. Although it is possible to make
something like that work in better browsers, IE6 will put up such a
fight that it simply isn't worth the hassle, IMO.

A fixed-width approach will _just work_ in all browsers, and make it
much easier to get IE6 to behave like a browser.

regards
Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Tee G. Peng]

On Oct 28, 2007, at 3:56 AM, Stuart Foulstone wrote:

But the point is that, this accessibility feature is for people who  
can't

use a mouse - i.e. they cannot "click" anywhere.



Ah yah right A good point you have made. I am a 'mouse' user, and  
I do find skip to (content/navigation) useful for me. Now you pointed  
out ( John and other did too but I was blind :) ), makes me realized   
I was mainly viewing this feature from my own' benefit.


Glad that I asked. Sometimes one has to show one's ignorance so one  
can learn something important :)


tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Stuart Foulstone]

But the point is that, this accessibility feature is for people who can't
use a mouse - i.e. they cannot "click" anywhere.


On Sun, October 28, 2007 6:46 am, Tee G. Peng wrote:
>
>
> John said don't use display:block. Actually the very reason I used it
> is because I want a user able to click on any area of the top. Is
> this as bad as the annoying hover effect?
>





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Anders Nawroth]

Hi!

Tee G. Peng skrev:
Thanks to your influences,  it has become my second nature to have 'skip 
to content' 


I use to do it the other way around, having the content first in source 
and using a link to get to the navigation. And then I simply put a link 
to the "menu", not anything about skipping (all normal links tells you 
where they go, not where they don't go). Example:


http://treemenu.nornix.com/

It's the first link on the page. Could be styled more like a heading or 
something. In this case there's also a little bit JavaScript magic in 
the link ...


/andersN



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Tee G. Peng]

I agree with you: the 'hover' technique is way more annoying, and  
it will annoy way more people.




Thanks all for your response. I now can clearly see I got myself  
carried away by my 'try-to-do-thing-right' little obsession :)


Ok, three of you said "skip to content is of little use in this site,  
but if I still want to keep it (and able to keep client happy), I  
suppose this won't upset users right?


#skip_nav a {display: block;padding: 0.35em;text-indent: -200em;text- 
decoration: none;}


John said don't use display:block. Actually the very reason I used it  
is because I want a user able to click on any area of the top. Is  
this as bad as the annoying hover effect?


Georg, can you kindly take a look on IE6?  The horizontal menu  
doesn't load smoothly, when the page is fully loaded, the header's  
part reloads, I suspect it has to do with the clear both class yet I  
can't figure  a fix for IE (tried all tricks from hasLayout)



background image xxx

 


Home
xxx


 



#logo {float: left}
#header search {float:right}
#menu{background:#f3f3f3;width:100%;margin-top:0}
.clear {height:0;clear:both}

IEs show a  6px to 8px gap between h1 logo and the menu., so I have
margin-top: -6px for IEs. my guess is the clear class causing it.
It works except that in IE 6, as described, the header reloads after  
the page fully loaded.


Thanks!

tee






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Gunlaug Sørtun]

Tee G. Peng wrote:

teesworks.com/

Been working on this site in the last 2 days, I find that I am 
getting so  annoyed by the "surprise' everytime the hover pops up.


If I, the site builder,  find it annoying, what will the users find ?


As a user I find that kind of "visual flicker" highly annoying.

I am beginning to think this is causing a usability issue and is 
killing all other usable elements that I work so hard to try to get 
them right.


A 'Skip to content' link may have its uses, but I don't see much need
for one in that design - too few links to skip (at least in that dev page).
Basic accessibility is too hard to sell anyway, and I don't see the
point in annoying clients and/or the majority of users with such minor
issues when there are so many other practical issues to take care of and
spend dev-time on.

Personally I don't provide "skip to (whatever)" links in a design unless
there's a client-request for them, and then I style them without any
"flicker" effects.

regards
Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Tim Offenstein]

At 7:44 PM -0700 10/27/07, Tee G. Peng wrote:

I am having an issue and I can't seem to see the whole picture objectively.

Thanks to your influences,  it has become my second nature to have 
'skip to content' in every site I do (sites I have control over the 
design and layout); when I do markup coding, clients often ignore 
the 'skip to content' and 'skip to nav' - I managed to convinced 
them a couple times with a compromise to hide it from browsers by 
using 'display:none', because, according to them, only screen users 
need 'skip to content'.


I am doing a site that I have control on design and layout, client 
asked to remove the 'skip to content' when I showed him the first 
layout, I tried to talk him out by stating how important it is to 
have the 'skip to content' implemented. He didn't buy it, so I came 
out with this technique:

teesworks.com/ (move your mouse to the top to see the result).


Hi Tee,

I appreciate your desire to provide navigational accessibility for 
disabled users however "Skip to content" is not the best way to do 
it. Most disabled users, particularly sight impaired, will use your 
header markup to navigate the page rather than skip links. Most often 
the audience who need the skip nav functionality will be using an 
accessible browser like Firefox which allows them to display a header 
list whereby they can easily surf through a properly structured page 
which makes use of header tags.


You've done a fairly good job on the teesworks page using header tags 
so the skip to content link is not going to serve much purpose. Also 
keep in mind that display:none and visibility:hidden remove content 
from screen readers. A screen reader will not pick up elements styled 
like that so unless that's your purpose, don't use those kinds of 
rules in your CSS for markup you intend for a screen reader.


Nice page btw.

-Tim
--
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
   Tim Offenstein  ***  Campus Accessibility Liaison  ***  (217) 244-2700
CITES Departmental Services  ***  www.uiuc.edu/goto/offenstein



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[John Faulds]

Been working on this site in the last 2 days, I find that I am getting  
so  annoyed by the "surprise' everytime the hover pops up. There is no  
way to miss it everytime I move the cursor to the top.


Leaving aside considerations as to whether you should actually be  
bothering after the client has explicity requested it not be implemented,  
if you're looking for a more unobtrusive option, don't make the link  
display: block, just let the link text area be clickable. After all, with  
this method, you're not really expecting any mouse user to find it, so  
increasing the clickable area is a bit pointless. Also, don't change the  
background-color; just make the link text appear.


--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] skip to content: care of accessibility causing usability

[Philippe Wittenbergh]

On Oct 28, 2007, at 11:44 AM, Tee G. Peng wrote:


... so I came out with this technique:
teesworks.com/ (move your mouse to the top to see the result).

Haven't show it to client yet. Been working on this site in the  
last 2 days, I find that I am getting so  annoyed by the "surprise'  
everytime the hover pops up. There is no way to miss it everytime I  
move the cursor to the top.


I agree with you: the 'hover' technique is way more annoying, and it  
will annoy way more people.


'skip links' should be visible all the time, as they are useful for  
sighted users  (e.g using the keyboard).
A compromise solution I have used: when a client doesn't want them,  
hide them (position them of screen, not display:none), but make them  
visible when those links are focussed (by pressing the tab key).


a.skiplinks {position:absolute; left: -999em;}
a.skiplinks:focus,
a.skiplinks:active {left: 1em;}
:active state is for iExploder. Add additional styling to taste.

Not really perfect, just a compromise.

Philippe
---
Philippe Wittenbergh






***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG] skip to content: care of accessibility causing usability

[Tee G. Peng]

I am having an issue and I can't seem to see the whole picture  
objectively.


Thanks to your influences,  it has become my second nature to have  
'skip to content' in every site I do (sites I have control over the  
design and layout); when I do markup coding, clients often ignore the  
'skip to content' and 'skip to nav' - I managed to convinced them a  
couple times with a compromise to hide it from browsers by using  
'display:none', because, according to them, only screen users need  
'skip to content'.


I am doing a site that I have control on design and layout, client  
asked to remove the 'skip to content' when I showed him the first  
layout, I tried to talk him out by stating how important it is to  
have the 'skip to content' implemented. He didn't buy it, so I came  
out with this technique:

teesworks.com/ (move your mouse to the top to see the result).

Haven't show it to client yet. Been working on this site in the last  
2 days, I find that I am getting so  annoyed by the "surprise'  
everytime the hover pops up. There is no way to miss it everytime I  
move the cursor to the top.


If I, the site builder,  find it annoying, what will the users find ?  
I am beginning to think this is causing a usability issue and is  
killing all other usable elements that I work so hard to try to get  
them right.


Please give me your thought.

Many thanks!

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***