Re: [WSG] Extra menu for when images are turned off
Stuart Sherwood wrote:
I think I have come up with a more elegant solution now.
There is only one menu with each link formatted like this:
Home
The br pushes the text under the header so it isn't visable to regular
users but accessable when images are turned off.
In that case, just use
a { padding-top: 1.2em; height: 0; }
(leave overflow: visible;, or it won't be visible without images)
Then make sure the header image does cover up the text. There's no need
to pollute the markup with unnecessary presentational uses for elements.
You may run into some trouble in IE with that because of the way it
treats 'height' somewhat like 'min-height', but you should be able to
get it to work.
--
Lachlan Hunt
http://lachy.id.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Extra menu for when images are turned off
I think I have come up with a more elegant solution now. There is only one menu with each link formatted like this: Home The br pushes the text under the header so it isn't visable to regular users but accessable when images are turned off. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Extra menu for when images are turned off
Stuart, Try this http://tjkdesign.com/articles/tip.aspRegards, Irina.
Re: [WSG] Extra menu for when images are turned off
Stuart Sherwood wrote:
> I have added a hidden menu to a site for those using text browsers or
> surfing with images turned off.
Avoid creating links without text, it's bad practice. Using small images
of text in you main navigation is bad too.
Things that make me go 'huh?'
1. If I turn off CSS while viewing you site I can see the bullet points
but no text.
2. If I view your site in Lynx (with my configuration) I see your empty
links as [Hidden Link].
3. My screen reader collects your links in it's link collection... I am
told there are 12 links but I can only see 6. (I can also collect these in
Lynx, in any configuration).
4. I have to tab past your 'hidden links' in any desktop browser (without
any feedback about what I am tabbing past) because they still appear in
the tab order.
5. I can't read your navigation labels because they are images, and my eye
sight is not good, but I do love wine.
Why not just add a span around the anchor text and move the span off-left?
Other benefits of using span are less page weight, and only one menu to
maintain.
HTML
Some Place
CSS
li a span {
position: absolute;
left: -px;
}
Even better, don't use images - the typeface is so plain I really wouldn't
notice the difference if it was helvetica, arial or something else - in
fact, it would look sharper. You can get the small caps effect with:
#textmenu a {
letter-spacing: 0.1em;
text-decoration: none;
font-variant: small-caps;
font-family: "trebuchet ms",serif; /* you could even specify the corporate
font here */
}
kind regards
Terrence Wood.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Extra menu for when images are turned off
Thankyou for correcting my terminology.
Text-indent. That's just what I need! Thankyou Lachlan, its a much
better solution.
Stuart
Lachlan Hunt wrote:
Stuart Sherwood wrote:
Sorry, I forgot to mention that the menu uses CSS Sprit rollovers so
there are no images
in the markup, therefore no alt tags.
They're *attributes*, not tags, please learn the correct terminology.
Title tags are irrelevant for accessibility?
No, they're not irrelevant, but they need to be used appropriately and
cannot be depended upon for giving information to the user.
Put the text inside the a element and use CSS to hide it. There are
still some accessibility problems with this method, but until more UAs
support the 'content' property on any element, there's not much you
can do about it.
try something like this:
a { background: ...; text-indent: -2000px; text-decoration: none; }
Look up image replacement techniques for more alternatives.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Extra menu for when images are turned off
Stuart Sherwood wrote:
Sorry, I forgot to mention that the menu uses CSS Sprit rollovers so
there are no images
in the markup, therefore no alt tags.
They're *attributes*, not tags, please learn the correct terminology.
Title tags are irrelevant for accessibility?
No, they're not irrelevant, but they need to be used appropriately and
cannot be depended upon for giving information to the user.
Put the text inside the a element and use CSS to hide it. There are
still some accessibility problems with this method, but until more UAs
support the 'content' property on any element, there's not much you can
do about it.
try something like this:
a { background: ...; text-indent: -2000px; text-decoration: none; }
Look up image replacement techniques for more alternatives.
--
Lachlan Hunt
http://lachy.id.au/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] Extra menu for when images are turned off
Sorry, I forgot to mention that the menu uses CSS Sprit rollovers so there are no images in the markup, therefore no alt tags. Title tags are irrelevant for accessibility? From W3C: Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource. So where does that leave us? Here is the mark up for my menus (or see the site www.cofieldwines.com.au)... IMAGE MENU HIDDEN MENU Home | Wines | Cellar Circle | About Us | Contact Us | Links Regards, Stuart Patrick H. Lauke wrote: Stuart Sherwood wrote: I have added a hidden menu to a site for those using text browsers or surfing with images turned off. The regular menu is image based but uses titles for accessibility, but this doesn't show in Lynx. You *ARE* giving those images suitable ALT attributes, I hope? TITLE is irrelevant for accessibility. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Extra menu for when images are turned off
Patrick H. Lauke wrote: TITLE is irrelevant for accessibility. Actually, let me rephrase that before it causes confusion: TITLE on images is pretty much irrelevant (unless you're doing some sort of "mystery meat" navigation and need to ensure that Firefox gives the user a tooltip description of the image, as FF chooses not to display ALT as a tooltip...but that type of navigation is seriously frowned upon anyway and really not advisable). -- 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 __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Extra menu for when images are turned off
Stuart Sherwood wrote: I have added a hidden menu to a site for those using text browsers or surfing with images turned off. The regular menu is image based but uses titles for accessibility, but this doesn't show in Lynx. Use the alt attribute to specify alternate text, use the title attribute to show advisory title information. The alt attribute will be rendered by lynx and other browsers without images enabled, the title attribute which is typically rendered as a tooltip in visual browsers may not even be seen by many users. I'd rather have a text based menu now but the client is happy and it is better than the drop down menu they wanted. Most image-based menus I've seen could usually be done just as well (if not better) using styled text. Unless the images have some fancy text styles on them that can't be easily reproduced using CSS, it's usually just as easy, if not easier, to use text with background images. I'm just wondering if there may be any disadvantages, for SEO or otherwise, by doing this? As long as the alternate text provided for any images is equivalent to the image, there shouldn't be any problems. -- Lachlan Hunt http://lachy.id.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Extra menu for when images are turned off
Stuart Sherwood wrote: I have added a hidden menu to a site for those using text browsers or surfing with images turned off. The regular menu is image based but uses titles for accessibility, but this doesn't show in Lynx. You *ARE* giving those images suitable ALT attributes, I hope? TITLE is irrelevant for accessibility. -- 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 __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
