本指南将探讨如何为链接和按钮元素设计一个可访问、可扩展的按钮外观。
涉及的主题包括：
- 重置样式： 和
- 显示、视觉、尺寸和文本样式
- 无障碍造型的考虑
- 常见情况下的扩展样式
哦，按钮（或者它是一个链接？）从等待第二张图片加载的悬停延迟时代开始，我就一直在与按钮作斗争，通过图片精灵，然后当 、 和梯度出现在现场时，我感到无比的欣慰。
但是......我们把按钮的样式设计得太远了，而且在某个地方，我们完全忽视了作为一个按钮的真正含义，更不用说一个无障碍的按钮（或链接）。
我们将看看在视觉上为 和 创建一个按钮外观需要哪些属性，以及为确保它们被创建和使用的无障碍性所需要的额外细节。
这是我们的基线--在Chrome中呈现的本地浏览器样式，目前唯一的变化是链接继承了主体上的自定义字体设置，而且我还将 。
如果你在家里玩的话，HTML是这样的：
我将 字符串用于 值，这样我们就可以在不触发导航的情况下测试状态。同样地，由于这个按钮不是用来提交表单的，它需要明确的类型 ，以防止触发获取请求和页面重载。
注意：通常情况下，我将Normalize重置应用于CodePens，但在本课中，我们将从头开始学习对按钮和链接的重置要求。使用Normalize或其他流行的重置为你做一些这样的事情。
首先，我们将为链接和按钮添加 ，只是为了强调本课中样式的应用：
确保你的样式包括以下重置--如果你不想要全局的重置（你应该这样做），你可以把它范围在我们的按钮类上：
简而言之，这个规则可以防止像边框和填充物这样的东西扩展到预期的元素大小（例如，25%的宽度仍然是25%，而不是25%+边框宽度+填充物）。
对于链接，我们只需要做一个重置：
这只是删除了下划线。
接下来，我们还有几条规则需要重置按钮：
浏览器之间的 值也有一些差异，但我们很快就会把它改成一个独特的选项。
有了这些重置样式，我们现在有了这样的外观。
我发现在许多情况下效果最好的是 ，它为我们提供了flexbox的内容对齐能力，但位于DOM中的 行为。
如果你将来要添加图标，或者对宽度进行限制，灵活的对齐方式就会很方便。
接下来，我们将应用一些标准的视觉样式，你当然可以根据自己的喜好进行调整。这是最灵活的一组样式，你可以不使用 和/或：
现在我们的链接和按钮开始看起来更像了：
在创建初始的按钮样式时，有两个层次的对比度：
- 按钮的背景颜色和它所显示的背景之间至少要有3:1的对比。
- 按钮文本和按钮背景之间至少有4.5:1（对于小于18.66px粗体或24px的文本）或3:1（对于大于这些尺寸的文本）。
下面是我制作的一张信息图，展示了按钮的颜色与它们的对比关系：
假设一个白色的页面背景，我们的按钮颜色选择以4.54：1通过。
我们故意漏掉了 "视觉 "分类下的一个属性，你在看到进度截图时可能会错过。.
由于 ，我们把它留给了尺寸部分。
让我们应用尺寸值，然后再讨论：
我们使用 ，使用 单位，这是一个偏好，允许填充物与应用的 按比例调整大小。
接下来，我们使用 单位来设置 ，该单位大致等于所应用字体的 字符的宽度和 。这个建议是一个视觉节奏的护栏。考虑一下你有两个并排的按钮，一个是短标签，一个是长标签，例如 "分享 "和 "了解更多"。如果没有 ，"分享 "按钮会突然比 "了解更多 "短。
是基于确保按钮在触摸设备上是一个足够大的目标，以满足WCAG 2.1的成功标准2.5.5 - 目标尺寸。
样式已经开始形成，但我们还没有完成。
基于上一张进度截图，你可能会想跳过文本样式。
但看看当我们缩小视口尺寸并触发响应行为时会发生什么。
正如你所看到的，我们有不同的对齐方式， ，也可以进行调整。
我故意跳过了在重置样式中修复文本对齐方式，所以我们现在要确保它在两者中都是居中的。然后，我们还可以降低行高--这可能需要根据使用的字体来调整：
好了，看起来不错
现在，用户在试图与按钮互动时收到的唯一视觉反馈是光标变成了 "指针 "的变化。
我们需要确保有三种状态存在。
通常得到最多关注的是 ，所以我们将从这里开始。
悬停时的一个典型更新是改变背景颜色。由于我们相当接近于4.5，我们将想把颜色变深。
我们可以利用Sass的优势，使用我们在 "视觉 "部分定义的 变量，为我们计算这个颜色。
这种效果有点刺眼，但我们有另一个现代的CSS工具来缓和这种情况，恰当地命名为 。 属性需要添加到 规则之外，以便它同时适用于 "over "和 "out"。
对于键盘用户来说，我们需要确保 的状态是可以清楚区分的。
默认情况下，浏览器会对获得焦点的元素应用一种 "光晕 "效果。一个不好的做法是简单地删除渲染这种效果的 属性，而不去替换它。
我们将用一个使用 的自定义焦点状态来替换轮廓。像 ， 不会改变整个元素的大小，所以它不会导致布局转移。而且，由于我们已经应用了一个 ，所以 也会继承使用，以达到额外的吸引人的效果。
再一次，我们使用了 功能，这次要比 的颜色还要深一些。这是因为一个按钮可以同时处于 和 状态。
感谢 @overflowhidden提供了一个解决方案，以确保在Windows高对比度模式下的用户可感知的 状态。
最后，特别是对于 "真正的按钮"，最好是定义一个 状态的样式。
对于链接来说，这在点击/敲击的 "向下 "过程中会出现一个短暂的时间。
对于按钮来说，这可以显示更长的时间，因为按钮可以用空格键来触发，而空格键可以无限期地按住。
我们将把 添加到我们现有的 样式中。
勾勒出的（"幽灵"）按钮是另一个话题，但有两个变化，我们将快速添加。
使用BEM格式，我们将创建 类来简单地减少字体大小。由于我们将padding设置为 ，这将按比例调整大小。而我们的 ，将确保按钮仍然是一个足够大的触摸目标。
有的时候，你可能确实需要 ，而不是内联，所以我们将添加 ，以允许这个选项，而不是改变 ，因为我们仍然希望在按钮内容上进行柔性对齐。
考虑到按钮是Flex列的一个子节点，当按钮扩展到全宽时，即使没有 。
为了防止这种情况的发生，你可以在基本的按钮样式中添加 ，或者为每个flex/grid对齐的属性值创建实用样式。,, 和 。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/8167.html