homepage Welcome to WebmasterWorld Guest from 184.73.87.85
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

    
Hiding screen-reader text from visual browsers
Concerned this might be viewed as "spamming"
a_chameleon




msg:3232342
 2:46 am on Jan 26, 2007 (gmt 0)

I hope this is the correct forum for this question?

I've experimented with several options to "conceal" the ugly text-only pages that work well for screen reader users; the webmaster I work for won't allow them to become available to visual browsers.

At first, I tried using the CSS rule, "display:none" which was recommended by several reputable websites.

I quickly discovered that later versions of the two most popular sceen readers now build what's called a "Document Image Model", instead of parsing the raw HTML, and these programs now honor display:none rules, and won't render the sections in this class.

I then discovered Invisible Content Just for Screen Reader Users
[webaim.org] (a reputable accessibility site) which promotes using this CSS rule:

.hidden
{position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;}

hiding the content above the viewable area of the browser and also shrinking the content to a height and width of 1 pixel"

Here's my concern:

Will the search engines view this as "spamming"?

I've done a lot of coding that should indicate to crawlers this section is for screen readers, such as naming the class "screen-reader-text-only" etc., etc.

Here's my 2nd concern:

I've put the link to this section in tiny, invisible text up in a position so that screen readers hear it first; again, at the instruction of the webmaster who doesn't want visual browsers to be able to try to follow it (which won't work anyway) ..

Could either one of these techniques be viewed by SE's as hiding text, and get the site penalized accordingly?

Thank you, in advance, to anyone who can offer advice.

.

 

cmarshall




msg:3232352
 3:03 am on Jan 26, 2007 (gmt 0)

I have no idea, but it's a kewl technique.

I think you are in the correct forum. Good contribution. Very practical.

This seems to be quietest forum in WebmasterWorld.

encyclo




msg:3232373
 3:32 am on Jan 26, 2007 (gmt 0)

If you're using hidden text, then you risk drawing the attention of the search engines, whatever the reason you claim for its hiding. If the text is relevant to the content of the page, then you should try styling it appropriately but still showing it to all users. Otherwise, you are knowingly presenting different content to search engines (and yes, coincidentally, the blind) - and you must be prepared to fail a hand-check. Googlebot is just another blind user, right?

pageoneresults




msg:3232726
 12:37 pm on Jan 26, 2007 (gmt 0)

This paper examines a few circumstances in which hiding text from visual users can be beneficial, and proposes a solution which allows HTML to be hidden without compromising the accessibility or semantic integrity of the document, and which works across browsers and platforms.

Personally, I think the advice in that article comes with a risk. They've pretty much given you instruction on how to negatively position content off the screen and at the same time hide it when viewed with a text browser. Bad advice from my perspective. And something that could be part of an automated filter. If Googlebot parses a CSS file and detects negative coordinates placing content out of the viewing area, and in this case hidden, you can figure out the rest of what might happen.

Even though the content being hidden is relevant, there would be many more cases of where it was being used in a manner for which it was not intended. When it comes to automation, the majority rules. ;)

When the CSS technique presented here is used to hide form HTML content, sighted users will never know that the content is there at all. Screen reader users, on the other hand, will never realize that this content is invisible to sighted users. Both kinds of users will be able to use the content intuitively, without having to adjust for either too much or too little information in the markup.

Hmmm, the tagline for the referenced site is "Web Accessibility in Mind". Someone forgot to take into consideration the potential risks involved in recommending this from an SEO perspective.

Also, after reading that white paper multiple times, I'm going to personally recommend that anyone following this topic not implement what they are recommending. This is a classic example of hiding content using CSS and absolutely positioned negative coordinates. Old school stuff that still works. :(

a_chameleon




msg:3232920
 3:58 pm on Jan 26, 2007 (gmt 0)

Thank you, everyone for their comments and sage advice.

Is there no alternative anyone knows of, for "legitimately" hiding the ugly text-only sections ..?

cmarshall




msg:3232931
 4:04 pm on Jan 26, 2007 (gmt 0)

I would say that the obvious answer is to write the standard copy in a manner that affords both normal sighted readers and screen readers.

I'm experimenting now with methods used by SEO sites that shove the content <div> in front of all the rest of the page, including headers and navigation. This should also afford accessibility, and remove the need for a "skipnav." This method relies on CSS to put the content back where it needs to be for display.

If you use <link> elements (with key assignments) in your <head> section, then the screen readers should pick up on them.

In any case, it's just a bad idea in general to run redundant copies of the content, as it puts a great deal more work on you to keep them current, and increases the size of the page.

pageoneresults




msg:3232943
 4:12 pm on Jan 26, 2007 (gmt 0)

Is there no alternative anyone knows of, for "legitimately" hiding the ugly text-only sections ..?

Yes, there is...

W3C - 6.12 Link types
[w3.org...]

Alternate
Designates substitute versions for the document in which the link occurs. When used together with the lang attribute, it implies a translated version of the document. When used together with the media attribute, it implies a version designed for a different medium (or media).

Help
Refers to a document offering help (more information, links to other sources information, etc.)

For me personally, the above seems like overkill for something that should be displayed naturally to visitors. If it is that ugly, then maybe the written copy needs to be revisited and presented in a way that is both visitor and spider friendly.

P.S. I should add to a previous comment about CSS and positioning. There are valid uses for negatively positioning content. This is not one of them. ;)

a_chameleon




msg:3233519
 12:31 am on Jan 27, 2007 (gmt 0)

PageOne, thank you.

I found this in the page you referred to:

Alternate - Designates substitute versions for the document in which the link occurs. When used together with the lang attribute, it implies a translated version of the document. When used together with the media attribute, it implies a version designed for a different medium (or media).

I followed the links to "6.13 Media descriptors", and found one for "aural - Intended for speech synthesizers."

I looked pretty hard at the sites I could find on these two combined, and I feel more confused than re-educated.

Let me ask this in three parts:

1. In the old days, I used to put the text-only sections at the bottom of pages, between <noframes> xx </noframes>.
Worked terrific.
Problem is, these days the newer versions of the screen-readers won't jump to the Noframes section anymore, no matter what.

Is there a way to code links using the alternate and lang attributes, and a stylesheet designating "aural" all combined to take screen readers to a text-only section?

2. If there is a viable process using the above method, and I incorporate the text-only section I want screen readers to jump to, into a 1px by 1px section down in the page's footer, for example; Do you think I'd be back in the same boat, to-wit subject to penalty for "hiding" text, even though I've set forth this section is for screen readers and/or text-only browsers ..?

3. If I simply use a <noframes> section, which Lynx browsers for instance can see, to allow readers to get/hear text-only, even though the page in question doesn't have frames, pre se, but is an .aspx page with several includes, is this also risky business ..?

I feel stupid .. :)

a_chameleon




msg:3233978
 3:16 pm on Jan 27, 2007 (gmt 0)

Hmmm, I hope the folks who were kind enough to respond to my question are still listening..
___________________________________________________________

I'm looking at some SERP's today, and I see this inside a Google snippet:
A different version of this web site containing similar content optimized for screen readers and ...

I take a look at the page:
Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more [amazon.com]
(One of the most popular sites on the Internet)

And, don't find these words on the visible page.
Ctl + F in IE doesn't find it, either.

I view the source, and I find:
<div style="position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;">
<a href="http://www._domain_.com/access">A different version of this web site containing similar content optimized for screen readers and mobile devices may be found at the web address: www.amazon.com/access</a></div>
<a name="top"></a>

at the very top of the document.

If they, of all people, are using hidden text to link to a different section, is this an indicator at least a link to another section of a website is legal ..?

Or are they so large, that they just don't care about penalties ..?

.

pageoneresults




msg:3233987
 3:36 pm on Jan 27, 2007 (gmt 0)

1. In the old days, I used to put the text-only sections at the bottom of pages, between <noframes> xx </noframes>. Worked terrific. Problem is, these days the newer versions of the screen-readers won't jump to the Noframes section anymore, no matter what.

Probably because that is not what the <noframes> element was intended for. I think there needs to be a <frameset> element involved here for this to all work. Its been so long since I've had to optimize for frames. ;)

Is there a way to code links using the alternate and lang attributes, and a stylesheet designating "aural" all combined to take screen readers to a text-only section?

Yes, there is. More reading here...

HTML Techniques for Web Content Accessibility Guidelines 1.0
[w3.org...]

2. If there is a viable process using the above method, and I incorporate the text-only section I want screen readers to jump to, into a 1px by 1px section down in the page's footer, for example; Do you think I'd be back in the same boat, to-wit subject to penalty for "hiding" text, even though I've set forth this section is for screen readers and/or text-only browsers ..?

Yes, I think that method would come with a risk. But, that is just me. Others may say no, it won't come with a risk because it is relevant.

3. If I simply use a <noframes> section, which Lynx browsers for instance can see, to allow readers to get/hear text-only, even though the page in question doesn't have frames, pre se, but is an .aspx page with several includes, is this also risky business ..?

I would think this also comes with a risk.

HTML Techniques for Web Content Accessibility Guidelines 1.0 - 10 Frames
[w3.org...]

I would think that using the <noframes> without the <frameset> may raise a flag. That <noframes>'s element has been abused in the past and even now, so, there may be some risks there.

I'm going to rant a little now. If a client ever put me in the position you are in, I'd fire them. Really! If the client doesn't understand the important of producing a quality page based on the guidelines, then they don't need my services as they wouldn't work without a solid foundation in place to start with.

Look at all these hoops you have to jump through just because the client doesn't want text to show on their home page. That is ludicrous and I would surely put my foot down and tell the client hey, you either do it the right way or you do it another way and accept the potential risks associated. But you see, if I ever have to recommend that to a client, I've veered away from my own personal mission statement which is to produce quality pages based on the guidelines established.

[edited by: pageoneresults at 2:04 pm (utc) on Jan. 28, 2007]

cmarshall




msg:3233989
 3:40 pm on Jan 27, 2007 (gmt 0)

If they, of all people, are using hidden text to link to a different section, is this an indicator at least a link to another section of a website is legal ..?

Or are they so large, that they just don't care about penalties ..?

Probably a bit of both.

Google may have some kind of accessibility accommodation. I dunno. There are some real Googleologists on the site, and they could better answer your question (you are posting in probably the quietest forum on WebmasterWorld. I suspect you would get far more answers at one of the many Google forums).

Amazon pays -big buck$- for their links. They are plugged into Google intravenously. I suspect they can get away with a lot, whereas we are poor hunter-gatherers, trying to glom onto whatever trains we can catch.

pageoneresults




msg:3233991
 3:41 pm on Jan 27, 2007 (gmt 0)

<div style="position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;">
<a href="http://www._domain_.com/access">A different version of this web site containing similar content optimized for screen readers and mobile devices may be found at the web address: www.amazon.com/access</a></div>
<a name="top"></a>

Wow, that's a pretty significant find. I need to investigate further. The reason you see that as the snippet is because it is the first thing Googlebot sees when indexing that page.

I can't see them being penalized for something like that as it is clearly being used to direct users to an accessible version of the site. They aren't stuffing a bunch of ugly text in there because they don't want it on their home page.

What I need to find out is why they need to hide that, is there some sort of new guideline for mobile devices that suggests this method? I don't know and need to look...

P.S. I do know from past experience that using the link rel is the recommended way to present alternate content like this.

Also, Amazon is sniffing for user-agent type and is serving content based on that UA. Why they need to hide that link is still out of my reach. I'll find out why one way or another. ;)

pageoneresults




msg:3234050
 4:41 pm on Jan 27, 2007 (gmt 0)

Why they need to hide that link is still out of my reach. I'll find out why one way or another.

Well, I visited my normal resources for all things related to this and I don't see any recommendations for this type of implementation. I just think someone decided it was the best thing to do and they did it not taking into consideration the guidelines that are in place for presenting alternate content.

Also, since they are sniffing for UA, I really see no reason for that link to even be there. They could surely include it within their main navigation.

Just because someone like Amazon is doing it, doesn't mean that is the right thing to do. In fact, in this case, it isn't if you read the guidelines. That method would probably be risky for most sites. ;)

So, we have a reputable accessibility resource suggesting hidden text. We have Amazon hiding links to accessible content. I think both of these methods are in violation of the SE's guidelines and also those guidelines set forth by the authorities on the subject of accessibility.

Marguerite




msg:3241807
 4:38 pm on Feb 3, 2007 (gmt 0)

I'm a learner at accessibility and I started by doing everything I read; off-left, but not hidden, "Jump to nav" links (content come first) that come into focus for keyboard users, and off-left text for screen readers etc etc.

I was just starting to compile an aural css when I read that some screen readers ignore the author style sheet. I didn't explore any further, in my case this suits me - leave it to the experts.

So I decided to drop all the shinnanigans and treat everyone equally.

More and more sites these days are showing all the "dirty washing" and if it's styled nicely, then the site is no less attractive for it.

After a few more years of this approach, everyone will get used to it.

Besides, I've since seen advice given where further information might be off-left and I've thought to myself, "but I would want to know this particular bit of information!".

a_chameleon




msg:3242235
 11:36 am on Feb 4, 2007 (gmt 0)

I was just starting to compile an aural css when I read that some screen readers ignore the author style sheet

They all do, nowadays.

Not just that, but if a visual browser can't "see" it.. neither will the screen reader "read" it (no pun intended).

;)

HelenDev




msg:3243260
 5:20 pm on Feb 5, 2007 (gmt 0)

Do people here think it's OK to use negative positioning to hide a 'skip navigation' or 'skip to links' link?

Or should they be visible on the page as well?

In my mind there is quite a big difference between hiding a couple of links, and hiding whole pages of content.

pageoneresults




msg:3243271
 5:29 pm on Feb 5, 2007 (gmt 0)

As mentioned above, there are times when hiding something is acceptable, in this case a Skip Nav link. Jim Thatcher from the WCAG Working Group has a great article on the many different ways to address that Skip Nav link...

Skip Navigation Links
[jimthatcher.com...]

appi2




msg:3243295
 5:42 pm on Feb 5, 2007 (gmt 0)

[pointless rant]
It's funny, what everyones trying to figure out is how to design the site for various users. Yet were all scared of the google overlords who tell us to design our sites for users.

Lets see what google say in the webmaster guidelines about Accessibility. Oooh nothing.
[/pointless rant]

Lets have a look at the source for google groups

How many CSS display:none; things do you see.

I say stop worrying and dont take the?

DrDoc




msg:3248074
 11:08 pm on Feb 9, 2007 (gmt 0)

Although late to the dinner ...

I wouldn't take the advise in that article too seriously. Yes, it is worth pondering, and it does discuss some interesting concerns and provides tips with regards to one of the ways the problem can be overcome. There are many other options, each with different drawbacks and benefits. Only after careful review should one apply any of them.

Don't simply take their word for it. Whether their technique works or not, their own application thereof is flawed.

If we are talking accessibility, don't complicate things! Most suggestions in that article are better solved by employing proper use of title attributes, and by proper understanding of HTML tables [webmasterworld.com].

a_chameleon




msg:3248798
 8:56 pm on Feb 10, 2007 (gmt 0)

The CNN approach looks pretty benign;

[quote]<img src="http://i.cnn.net/cnn/images/1.gif" alt="Click here to skip to main content." width="10" height="1" border="0" align="right">{/quote]

Does that appear risky to the "don't hide anything" absolute?

.

Mindy




msg:3266546
 11:49 am on Feb 28, 2007 (gmt 0)

You guys lost me at the whole hiding stuff. Why would you EVER want or need to hide links or text or anything else? Content which is useful to one user may be useful to all users.

SkipNav links SHOULD be visible so keyboard users can see them. Personally I hate those "onfocus" links which you only see if you tab to them. Let people know it's there from the get-go so they're looking for it to receive focus. People have all sorts of disabilities and all sorts of combinations of disabilities. Don't confuse people needlessly.

If you're talking about some text-only version of a site - if you need to build alternate content, you should reconsider your design because even flash can be made completely accessible these days if the designer knows the software. Or try using a style sheet switcher so the user can strip out the CSS and images and stuff if they want.

appi2




msg:3266562
 12:15 pm on Feb 28, 2007 (gmt 0)

SkipNav links SHOULD be visible so keyboard users can see them.

Yes and no ;)

A mouse user 'may not' need a skip nav link.
A keyboard user will usually like the option of not pressing the tab X# times.

Why hide? well design reasons may be one, not confusing non-keyboard users another.

eg
Mouse user clicks on skip nav and nothing happened, well yes that's because the design has all the nav links horizontal. So lets hide it from them.

Text browser, or css disabled, up pops a handy skip nav link.

but what about a keyboard user who has css enabled?
Well as soon as the skip nav gets focus up it pops and offers a little help.

Mindy




msg:3266568
 12:37 pm on Feb 28, 2007 (gmt 0)

But what about the keyboard user with poor eyesight or dyslexia to go with whatever physical disability he has? What about the keyboard user who is tabbing quickly and misses it because he's not expecting it to appear there?

You can never account for all scenarios, but the one that accomodates the most possible number of people with the greatest ease is a visible "skip to main content" link as the first thing to receive focus.

It's simply more usable not to surprise people. It's not going to bother non-disabled users to have it showing, the worst thing it will do is they click it and they get taken to the main content. It's only designers who don't want to add the extra link. Sometimes though usability is more important than looks.

appi2




msg:3266596
 1:01 pm on Feb 28, 2007 (gmt 0)

But what about the keyboard user with poor eyesight

c'mon, if they have poor eyesite they cant see the link whether it displays on focus or not. Thats why broswers allow you to set text size.

dyslexia

If you can find a way to way to make text better for dyslexia, your going to be quite rich.

What about the keyboard user who is tabbing quickly and misses it because he's not expecting it to appear there?

erm shift+tab

It's simply more usable not to surprise people.

And by the same argument It's simply more usable not to confuse people.

It's not going to bother non-disabled users to have it showing

But it may bother the design of your 50,000 page website.

the worst thing it will do is they click it and they get taken to the main content

Or they click and nothing happens, they click again and nothing happens, they get annoyed and go somewhere else.

It's only designers who don't want to add the extra link. Sometimes though usability is more important than looks.

Yes, that theory works well in fluffy thought land. Go tell apple, car manufacturers etc. Design means nothing.

Sorry could't resist, as I said earlier YES and NO. While I agree with you, their are also reasons why you may want to do it.

And to argue agianst my self...
what about someone who doesnt understand what skip navigation means?

oh for ....

cmarshall




msg:3266608
 1:23 pm on Feb 28, 2007 (gmt 0)

It's always interesting to see how the threads in this forum get heated.

This is the quietest forum in WebmasterWorld, but it does seem to evoke a lot of passion.

In the aggregate, we are best served by the experience of our target users. We design the best we can, using industry standards, then pay close attention to who is, and is not using the site. We look for places to "sand the corners" and add coathooks.

There's an anecdote about an architect that designed a building with no sidewalks. After a few months, they put concrete over the areas where the grass was worn bare.

appi2




msg:3266620
 1:38 pm on Feb 28, 2007 (gmt 0)

Oooh quick while i've got someones attention.
Im sure WebmasterWorld used to show a yellow background on tabbing, it doesn't seem to show any more for me in FF2.02 same with some other sites. Anyone else?

By the way
Evil hidy nav skiplink types.

[webstandards.org...]
[w3.org...]

have a look at the source disable css and see the difference

a_chameleon




msg:3267026
 7:47 pm on Feb 28, 2007 (gmt 0)

It's not going to bother non-disabled users to have it showing

But it may bother the design of your 50,000 page website.

That's the problem I've run into:

Webmasters/designers I work with aren't keen on the idea of a "visible" link, that may lead
visual-browser users to an ugly, text only section..

.

Beagle




msg:3267224
 11:54 pm on Feb 28, 2007 (gmt 0)

There's an anecdote about an architect that designed a building with no sidewalks. After a few months, they put concrete over the areas where the grass was worn bare.

Afraid I can't really add anything to the discussion, but when I read this I had to drop in - This is basically how the university I work at does things. That's where people walk? Put a sidewalk there. I try to transfer this method to other areas of life when I can.

cmarshall




msg:3267859
 3:25 pm on Mar 1, 2007 (gmt 0)

This is basically how the university I work at does things.

Very sensible. Wish commercial organizations had as much sense.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved