在菜单中显示图像的正确方法？

Question

我很好奇。我已经制作了一个下拉菜单，而不是文字，我添加了一个图像。当我看到它时，似乎 clean 。在css中编写它的正确方法是什么？

例如 -

<div id='cssmenu'>
<ul>
<li id="one"><li class='has-sub'><a href='#'><span><img src="http://static.tumblr.com/bw1wxme/RjMmzv543/rollover-2.jpg"></span></a>
<ul>
<li class='last'><a href='#'><span>
<u>Hello</u>
</li>
<li><a href='#'><span>Website</span></a></li>

</span></a></li>
  </ul>
 </li>

所以不要说“关于”，而是 -

<a href='#'><span><img src="http://static.tumblr.com/bw1wxme/RjMmzv543/rollover-2.jpg"></span></a>

这是非常糟糕的CSS练习吗？我不想做一辈子不好的CSS习惯......

Answer 1

这不是很好的做法，因为正如Paulie_D所说，视力受损的用户通过屏幕阅读器查看您的网站将无法正常使用您的菜单。

查看w3c.org上的accessability指南

更好的做法是使用文本，链接标题创建菜单，并使用css来设置悬停的样式。