20 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I'm using a Suckerfish dropdown on this site I'm developing which has been modified to work with the image replacement technique on Wellstyled.com whereby text is still displayed if images are turned off.
Anyway, in IE, if I use the usual method of ul li ul { left: -9999px; }, you're able to activate the dropdown menus from anywhere that they would normally occupy when rolled over - in other words, not just the link itself (try it out on the link and you'll see what I mean - kinda hard to describe).
But if I use display: none instead, the problem doesn't occur.
I'm just wondering if anyone can think of any disadvantages to this second method that I haven't thought of (including accessibility issues)?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Display:none versus hiding text offscreen

I am not quite sure what you mean. (afaik) display:none elements are ignored by screen readers, so it isn't considered accessible.

Regarding your current text replacement. The font-size should probably be adjusted to something similar to the font-size used in the graphic. You have used "practice" as the text replacement for the "areas of practice" graphic. This also results in ugly spacing in the text menu bar.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Display:none versus hiding text offscreen

Jaws is supposed to read display:none and hidden, but it's the usual state of affairs where some readers will read display:none and others will not see the element.

However it appears that the perceived proper practise is for screen readers to ignore (not read) any display:none element, why?

Considering the property is a visual display one and that the links are still part of the markup not stripped out by CSS why is it that any screen reader be designed to pay attention to CSS and not just the markup that constitutes the content to be read, or at most just pay heed to any aural CSS properties.

Life is made difficult as usual!

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

Display:none versus hiding text offscreen

The w3 should consider a new display characteristic for just such an occasion:

display: replaced;

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Display:none versus hiding text offscreen

Reading between the lines of SEO articles and forum posts, it would seem that Google will penalise a site for hiding text off screen. I don't know if it is true or not (who does outside Google), but personally I would play safe and refrain from such practises if at all possible.

Life's a b*tch and then you die!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Display:none versus hiding text offscreen

I think we may be straying off-topic a little Smile, a recent article at A List Apart likens the google spider to a browser with images and javascript disabled.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Display:none versus hiding text offscreen

Positioning text off the screen area is a very common tactic of those wishing to fool the search engine ranking systems ...a very common tactic, and Google knows it. All I'm saying is that if it were my site, I wouldn't risk any penalties by doing anything that Google might look upon as spamming. Also, if I had anything to do with Google's ranking system, I would be suspicious of any text that was positioned off the visible page. It's just personal opinion - take it or leave it Smile

Life's a b*tch and then you die!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Display:none versus hiding text offscreen

Chris..S wrote:
You have used "practice" as the text replacement for the "areas of practice" graphic. This also results in ugly spacing in the text menu bar.

Sorry, not sure what you mean by the ugly spacing?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Display:none versus hiding text offscreen

Have you looked at the page with images disabled?

To my eyes, the odd spacing for "practice" caused by the width required for "Areas of Practice" image looks ugly. If you are going to cater for someone who may view the page with images off, you may as well make it look neat and tidy Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Display:none versus hiding text offscreen

None of it's strayed off topic really Chris.
Tyssen asks about accessibility, negative positioning, display none, and you brought up the subject of screen readers; all posts have related in some fashion.

But back more specifically to Tyssens problem in IE and the preserved trigger area are we saying that it he cannot use display none for the sub ul despite it being the common method due to the fact that we now have to cater for screen readers that rather oddly will not read markup if they see display:none.

I did have a brief look at the menu in IE but didn't really have time to try and figure the cause but - unless someone else spots it - I'll have a look tomorrow if I have the chance as it's interesting.

Roy is I think correct that google are on the look out for tricks like hidden text, it was raised long ago that they would be introducing a method of parsing the css rules, perhaps an urban myth though?

But if true and if display:none is contra-accessibility where does that leave us, between a rock and a hard place? We seem to spend all our time thus positioned.

For my money the screen readers are wrong and Jaws the majority user base interpreter does read display:none and visibility:hidden so I would go with using display:none, but of course I 'm probably missing some salient point.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Display:none versus hiding text offscreen

There is an alternative, to use overflow:hidden and structure the html so the text is pushed out of view if an image is present.

display:none; means don't display. So to my mind, if you are using a screen reader (as opposed to an aural browser) display:none & visibility:hidden won't put anything on the screen so they are right to ignore them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Display:none versus hiding text offscreen

Chris..S wrote:
Have you looked at the page with images disabled?

OK, gotchya now. Yeah, the reason why the text is a bit small (and also I think the reason why I edited out 'areas of...' because it was there originally although it doesn't seem to be a problem now :? ) is because the text starts peeping out below the images when you resize your text past 5 increases in Firefox.
The image replacement method I'm using usually uses overflow:hidden to overcome this, but I can't use it in this situation cos then it also hides the dropdown menus. Another one of those rock/hard place type situations.
It's interesting the comments on the view Google takes on text being hidden offscreen, because to use left: -9999px is actually the method outlined in the updated Suckerfish tutorial on HTMLDog. The original on A List Apart says to use display: none. The HTMLDog version uses left: -9999px because they reckon display: none doesn't work in Opera.
Although, using display: none on my menu works fine in Opera. Maybe it's a bug they ironed out between when that tutorial was written and version 8.5.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Display:none versus hiding text offscreen

You may (!) be able to use overflow hidden with width rather than the more usual height and instead of using display:block to push the text out of the way, use white-space:nowrap;

You could always try applying the overflow:hidden to the <a> tag (make it block).

There are far more problems with the page at 5x font size increases than a bit of text poking out under the menu graphic Wink

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Display:none versus hiding text offscreen

Chris..S wrote:
There are far more problems with the page at 5x font size increases than a bit of text poking out under the menu graphic Wink

Such as? The only real problem I can see is the footer busting out of the bottom.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Display:none versus hiding text offscreen

Hi Tyssen

Just be careful with shifting something off the page, coz I think I heard that FF1.5 release will restrict what you can do to up to -500px only, and then will ignore your hack and put it on the page anyway. And yes, display:none has issues with IE in some cases.

And yes, I have seen text readers that read the display:none's because (they assume) the bits you are often hiding are just for them (like a hidden dt in a def list).

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Display:none versus hiding text offscreen

Chris may be referring to the very skittish behavior of the li#first-box etc they are jumping all over the place with text-sizing and browser narrowing, plus the ul drop down becomes slightly difficult to hover on when text increased, all easily sortable.

Back to the screen readers Smile Chris is the phrase 'Screen reader' actually meant to mean it reads the physical screen or is it an expression? it's not literally sitting on your shoulder reading what it see's out loud.

It seems - according to some - that screen readers should indeed pay heed to media attributes of stylesheets they should not be acknowledging display:none.


Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Display:none versus hiding text offscreen

Hugo wrote:
Chris may be referring to the very skittish behavior of the li#first-box etc they are jumping all over the place with text-sizing and browser narrowing, plus the ul drop down becomes slightly difficult to hover on when text increased, all easily sortable.

Can you explain what you mean by 'jumping all over the place'? In IE, the ones with longer text are a different size when you resize the text, but in FF, I get an even scale (although it does start to cut off the text and not sure why).
As for the dropdown menus: I spent quite a while playing around with the menu because it was a bit tricky to get the dropdowns to work the same way when I changed to the current image replacement method I'm using, but I couldn't find a solution to the dropdowns coming away from the bottom the way they do.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Display:none versus hiding text offscreen

Hard to explain when I open the page in FF the last box #fourth-box
has wrapped to the next line, left hand side, if I decrease text size it lines up properly; if i narrow the window it jumps under again, if I just increase the text size from the point that they are all lined up they are ok.

Not sure about the menu but I would have thought there was a solution.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Display:none versus hiding text offscreen

Hugo wrote:
Hard to explain when I open the page in FF the last box #fourth-box has wrapped to the next line.

So they don't line up on initial page load? I don't get that. I wonder if it's anything to do with the fact I'm using FF 1.5? :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Display:none versus hiding text offscreen

Hugo, after rechecking the spec, I think, display:none "should" prevent the element being "presented" to the user, irregardless of the media. Refer the following from the appendix on aural stylesheets.

w3c css2.1 spec wrote:

A.4 Speaking properties: 'speak'
'speak'
Value: normal | none | spell-out | inherit

...

none
Suppresses aural rendering so that the element requires no time to render. Note, however, that descendants may override this value and will be spoken. (To be sure to suppress rendering of an element and its descendants, use the 'display' property). (ref)

Note, this may in fact have no bearing on what real world screen readers, etc actually do.

Tyssen, In FF1.0.7 with my normal browser window, the page breaks apart after 3 font-size increases. I wouldn't rely on beta browsers for testing how your page works in the real world. Not many users will have them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Display:none versus hiding text offscreen

Is it possible to have two versions of FF running at the same time? I just tried reinstalling 1.0.7 into a different folder, but it seems to make them both unstable.
And when you say 'break apart', is it only the coloured boxes you're talking about cos I've only been using 1.5 for a couple of weeks and tested most of the site's layout (except for the home page which I did on the w/e) in 1.0.7 prior to that.

EDIT: I found out how to run two versions at once. It requires creating a batch file as described here.

And now I can see what the 'jumping around' is all about. It's weird how it's wrong on page load but resize your text and then reset it to the default, and it works OK. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference