好的做法？ < a>中的空内容元件 [英] Good practice ? Empty content in <a> element
问题描述
我正在写一个标签式文件夹导航栏。网站标准是图形的
漂亮，整个CSS，有效的代码，但可访问性被忽略
它与可爱的冲突。
这里的特殊问题是图形设计师想要在阴影导航选项卡上使用漂亮的
（非webbable）字体，所以我很少使用
位图。为了使4向翻转（当前和悬停状态）
工作我正在使用标准的rollerblind。有背景的技术
图像。
现在这让我陷入两难境地 - 避免文字出现在
背景图片上，我需要保留< a>的内容。元素文本
free - 要么是空的，要么注意到空格不止。由于标签
是阴影的，我甚至不能使用color = background-color。
这是一个主要的问题可用性明智吗？
留下< a>是否更好？空的，或放一个或多个空格/
s？
评论赞赏。
" di ***** @ codesmiths.com"写道：
可访问性被忽略，它与漂亮相冲突。
你拼写的懒惰错误:-D
这里的特殊问题是图形设计师想要在阴影导航标签上使用漂亮的
（非webbable）字体，所以我很少使用
位图。为了使4向翻转（当前和悬停状态）工作，我正在使用标准的rollerblind。技术与背景
图像。
什么是标准轮滑技术？你的意思是你在使用CSS来显示不同的背景图像以不同的方式呈现文本吗？
现在这让我陷入两难境地 - 为了避免文本出现在
背景图像上，我需要保留< a>的内容。元素文本
自由 - 要么是空的，要么注意到空格不止。由于标签
是阴影的，我甚至不能使用color = background-color。
为什么不将它包装在具有可见性的SPAN元素中设为隐藏？
-
phil [dot] ronan @ virgin [dot] net
http://vzone.virgin.net/phil.ronan/
Philip Ronan写道：" di ***** @ codesmiths.com"写道：
在与美丽相冲突的地方忽略可访问性。
你拼写了laziness错误:-D
这不是懒惰 - 虽然我有最后期限（比如昨天！）我可以
负担得起工作如果它修复了事情。但在这种情况下，有一个技术与另一种技术之间存在直接冲突。
什么是标准轮滑技术？你是说你使用CSS来显示以不同方式呈现文本的不同背景图像？
..foo a {
身高：25px;
背景：＃DAE0D2 url（nav_tabs_1.png）不重复左上角;
}
..foo a：悬停{
背景位置：0 -25px;
}
每个标签是100px高的一个图像文件，每个标签都不同。它
包含四个垂直瓦片，每个25px高。 CSS和：hover
根据需要移动背景位置，从而移动图像。它具有比实际交换图像更少闪烁的优点，那里
管理的文件更少，而且它还允许更简单的选择器（这个
$ b如果您将来为额外的标签构建，$ b非常有用，并且您还需要使用它来实现IE浏览器。
为什么不将它包装在里面一个SPAN元素，可见性设置为隐藏？
我可能应该（因为我没有理由不这样做），但那个''仍然是
与没有文本几乎相同。如果图像在客户端失败，那么文本就不会突然出现，这是我主要关注的问题。
我真正需要的是CSS前景图像属性！
di ***** @ codesmiths.com 写道：
现在这让我陷入两难境地 - 避免文字出现在
背景图片，我需要保留< a>的内容。元素文本
自由 - 要么是空的，要么注意到空格不止。由于标签
是阴影的，我甚至不能使用color = background-color。
这是一个主要的问题可用性明智吗？
尝试使用az索引，给图像一个更高的索引，如果图像不是
加载文本将显示
I''m writing a "tabbed folder" nav bar. Site standards are graphical
prettiness, CSS throughout, valid code, but accesibility is ignored
where it conflicts with prettiness.
The particular issue here is that the graphic designer wants a pretty
(non-webbable) font on the shaded nav tabs, so I''m reduced to using
bitmaps. To make the 4-way rollovers ("current" and "hover" states)
work I''m using the standard "rollerblind" technique with a background
image.
Now this leaves me with a dilemma - To avoid text appearing over the
background image, I need to leave the content of the <a> element text
free - either empty, or with noting more than spaces in it. As the tabs
are shaded, I can''t even use color=background-color.
Is this a major problem usability wise ?
Is it better to leave the <a> empty, or to put one or more spaces /
s in it?
Comments appreciated.
"di*****@codesmiths.com" wrote:
accesibility is ignored where it conflicts with prettiness.
You spelt "laziness" wrong :-D
The particular issue here is that the graphic designer wants a pretty
(non-webbable) font on the shaded nav tabs, so I''m reduced to using
bitmaps. To make the 4-way rollovers ("current" and "hover" states)
work I''m using the standard "rollerblind" technique with a background
image.
What''s the "standard rollerblind technique"? Do you mean you''re using CSS to
display different background images that present the text in different ways?
Now this leaves me with a dilemma - To avoid text appearing over the
background image, I need to leave the content of the <a> element text
free - either empty, or with noting more than spaces in it. As the tabs
are shaded, I can''t even use color=background-color.
Why not just wrap it inside a SPAN element with visibility set to "hide"?
--
phil [dot] ronan @ virgin [dot] net
http://vzone.virgin.net/phil.ronan/
Philip Ronan wrote:"di*****@codesmiths.com" wrote:accesibility is ignored where it conflicts with prettiness.
You spelt "laziness" wrong :-D
It''s not laziness - although I have deadlines (like yesterday!) I can
afford to put work in if it fixes things. In this case though, there
seems to be a direct conflict between one technique and another.
What''s the "standard rollerblind technique"? Do you mean you''re using CSS to
display different background images that present the text in different ways?
..foo a {
height: 25px;
background: #DAE0D2 url(nav_tabs_1.png) no-repeat left top;
}
..foo a:hover {
background-position: 0 -25px;
}
Each tab is one image file 100px high, different for each tab. It
contains four vertical "tiles", each 25px high. The CSS and :hover
shifts the background-position and thus the image up as needed. It has
the advantage of less flicker than actually swapping the images, there
are fewer files to manage, and it also allows simpler selectors (this
is useful if you''re building for extra tabs in the future and you also
need to make it work on IE).
Why not just wrap it inside a SPAN element with visibility set to "hide"?
I probably should (as there''s no reason I shouldn''t), but that''s still
pretty much the same as not having the text. The text isn''t suddenly
going to appear if the images fail client-side, which is my main
concern.
What I really need is a CSS foreground-image property !
di*****@codesmiths.com wrote:
Now this leaves me with a dilemma - To avoid text appearing over the
background image, I need to leave the content of the <a> element text
free - either empty, or with noting more than spaces in it. As the tabs
are shaded, I can''t even use color=background-color.
Is this a major problem usability wise ?
try using a z index, give the image a higher index, if the image is not
loaded the text will display
这篇关于好的做法？ < a>中的空内容元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
