CSS 和圆角：创建可访问的菜单选项卡

引言

在功能方面，最好的网站之一，并且一直都是，是 亚马逊。但在可访问性方面，他们做得不太好。

问题所在

例如，亚马逊的菜单选项卡看起来很漂亮，但完全不可访问。首先，它们缺少 ALT 标签。此外，W3Cs 可访问性指南 3.1（优先级 2）明确指出

当存在合适的标记语言时，使用标记而不是图像来传达信息

基本上这意味着不要使用图像来显示文本 - 视力较差的用户无法调整通过图像显示的文本大小。如果你还不知道，请了解如何在你的浏览器中调整文本大小。

解决方案

CSS，一如既往地，来拯救我们。现在在你的浏览器中调整文本大小。去做吧。你看到屏幕顶部的菜单选项卡随着文本的增大而增大，并且一切都完美地适应了吗？今天，你将学习如何做到这一点。

我们从一个简单的链接开始

<a href="#">Home</a>

我们将分配给它这个CSScode

a { color: #000; background: #fb0; text-decoration: none }

这给我们

还需要一些工作，对吧？

添加左角

我们需要创建一个与颜色相同的图像： - 这是我之前创建的一个。让我们将这个图像命名为“left-tab.gif”，并将其放置在这个链接的背景中

a{
   color: #000;
   background: #fb0 url("left-tab.gif") left top no-repeat;
   text-decoration: none 
}

这个新命令表示背景图像应该是“left-tab.gif”，图像应该在左侧，顶部，并且不应该重复 - 这很明显。结果呢？

我们正在接近目标，但我们需要将文本移位一点。使用一些内边距很容易做到

a { 
   color: #000; 
   background: #fb0 url("left-tab.gif") left top no-repeat; 
   text-decoration: none; 
   padding-left: 10px 
}

以及右角

我们只能将一个背景图像分配给一个标签，因此我们需要创建一个新的标签并将图像分配给它。我们可以使用

<a href="#"><span>Home</span></a>

现在我们只需将这个背景图像 （另一个我之前创建的）分配给 <span>，我们就准备好了！我们将这个图像命名为“right-tab.gif”

a span {
   background: url("right-tab.gif") right top no-repeat;
}

这段代码意味着 <a> 标签内的每个 <span> 标签都将此图像作为其背景。最终结果

完美！所以现在你可以... 等等，你能发现为什么它不是那么完美吗？没错，我们忘记为该 <span> 标签分配一些内边距了

a span {
   background: url("right-tab.gif") right top no-repeat;
   padding-right: 10px
}

给我们

现在这真的完美了！再次调整文本大小，看看它是什么样子！

进一步探索

这篇文章只是简单地介绍了你可以用CSS和导航所能完成的事情。要进一步探索，请查看 A List Apart 上的文章 CSS 设计：创建自定义角和边框。