js复选框和单选按钮_如何使自定义可访问的复选框和单选按钮

js复选框和单选按钮

诸如复选框和单选按钮之类的表单元素看起来有所不同，具体取决于用户的浏览器和操作系统。 因此，设计人员和开发人员长期以来一直在设计自己的复选框和单选按钮的样式，以求与浏览器或OS保持一致。

完全可以，但是同时我们需要确保辅助技术（AT）和键盘用户可以访问我们的复选框和单选按钮。 在本教程中，我将解释这意味着什么以及我们如何以几种不同的方式正确地做事。

A11y从一开始

本教程是“ Web可访问性：完整的学习指南”的一部分 ，我们在其中收集了一系列教程，文章，课程和电子书，以帮助您从一开始就理解Web可访问性。

浏览器默认样式

让我们从浏览器默认情况下呈现复选框的方式开始。 如前所述，您在此处看到的内容将取决于您的浏览器和操作系统。

您会注意到可以使用鼠标来打开或关闭复选框，也可以使用键盘（使用TAB跳转并使用SPACE切换，尽管这可能会因设置而有所不同）。

1.样式自定义复选框

是时候建立自己的了。 我们将在视觉上“隐藏”默认复选框，在顶部放置自定义版本。 我们需要看的第一件事是标记。

HTML标记

单个复选框的标记如下所示：

<div class="wrapper">
  <input id="a11y-issue-1" name="a11y-issues" type="checkbox" value="no-issues">
  <label for="a11y-issue-1">There are no issues</label>
</div>

我们使用<div>包装器来帮助定制样式，但除此之外，这里HTML是标准的语义形式标记。 当我们使用CSS规则opacity: 0可视地隐藏<input type="checkbox">时，魔术就发生了。

.wrapper {
	position: relative;
}

.wrapper input {
	height: 40px;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 40px;
}

这在视觉上隐藏了我们的复选框，使我们可以继续创建自己的复选框。 重要的是我们不要使用display: none隐藏它display: none因为这会隐藏浏览器和辅助技术（AT）用户的复选框，并且我们还会丢失键盘交互。

您会注意到，即使我们将其隐藏，我们也会为复选框提供40px的高度和宽度。 这为我们提供了一个清晰的功能性目标区域，可放置在我们的已装配复选框下方。

包装的<div>具有position: relative CSS规则。 这有助于我们定位复选框，并使用position: absolute来标记::before和::after伪元素。

使用伪元素添加可视复选框

我们仍然缺少视觉复选框。 为了解决这个问题，我们首先使用label::before元素添加边框：

.wrapper input + label::before {
	border: 2px solid;
	content: "";
	height: 40px;
	left: 0;
	position: absolute;
	top: 0;
	width: 40px;
}

我使用了2px的纯边框和继承的颜色，但是如果愿意，可以使用其他边框颜色。 请注意，我们以与透明复选框相同的方式定位和调整大小。

标签具有一些额外的边距，可以给我们一些间距，这是此时我们的复选框的外观：

下一步是使用伪元素label::after的label::after样式化“ check”：

.wrapper input + label::after {
	content: "";
	border: 4px solid;
	border-left: 0;
	border-top: 0;
	height: 20px;
	left: 14px;
	opacity: 0;
	position: absolute;
	top: 6px;
	transform: rotate(45deg);
	transition: opacity 0.2s ease-in-out;
	width: 12px;
}

我们使用一个元素创建检查，该元素为底部和右侧提供四个像素边框。 然后我们将其旋转45度：宾果游戏！ 自定义检查。 您也可以使用不同的边框颜色来匹配您的设计。

在这个阶段，您将看不到任何东西； 我们仍然使用opacity: 0在视觉上隐藏支票。 让我们对此进行补救！

使用 :checked伪选择器显示自定义检查

:checked伪选择器在切换到“ on”状态时将其目标对准一个复选框。 我们可以使用它来更改自定义检查的不透明度：

.wrapper input:checked + label::after {
	opacity: 1;
}

完成后，这就是我们所拥有的：

注意 ：我们还需要包含另一件事，那就是“焦点样式”。 我们将在下一个演示中讨论它们。

2.使用内联SVG的自定义复选框

让我们再上一个台阶。 代替伪元素，我们可以使用自定义SVG图标进行检查。 为此，我们将SVG放置在标签内：

<div class="wrapper">
	<input id="a11y-issue-1" name="a11y-issues" type="checkbox" value="no-focus-styles">
	<label for="a11y-issue-1">
		Focus styles are not present
		<svg aria-hidden="true" focusable="false">
			// Code for SVG
		</svg>
	</label>
</div>

在大多数情况下，SVG只是装饰性的，因此aria-hidden="true"将其隐藏在AT设备中。

添加SVG样式

我们需要对SVG元素应用几种样式，以便正确定位和调整大小。 我们还可以使用fill属性更改其颜色（在这种情况下为blue ）：

.wrapper input + label svg {
    border: 0;
    fill: blue;
    height: 20px;
    width: 20px;
    opacity: 0;
    position: absolute;
    left: 10px;
    top: 10px;
    transition: opacity 0.2s ease-in-out;
}

记住焦点状态样式

我的示例复选框样式的灵感来自于GOV.UK的表单元素设计系统中发现的样式（非常有用的资源， 快来看一下）。 焦点样式与任何可焦点元素一样重要：

.wrapper input:focus + label::before {
	box-shadow: 0 0 0 3px #ffbf47;
}

我们将box-shadow用于焦点样式，因为它会遵循圆角边框，稍后还将在单选按钮中使用该box-shadow

为Windows“高对比度模式”添加焦点样式

Windows高对比度模式会删除框阴影规则，因此，由于这个原因，我们还需要添加透明的轮廓样式：

.wrapper input:focus + label::before {
	box-shadow: 0 0 0 3px #ffbf47;
	outline: 3px solid transparent; /* For Windows high contrast mode. */
}

在高对比度模式下，此透明轮廓显示为额外边框。

3. SVG作为伪元素背景

除了内联使用SVG代码外，我们还可以重新创建我们制作的第一个自定义复选框的版本，使用SVG作为伪元素的背景，而不用构建带有边框的“检查”。 我们已经介绍了您需要了解的所有技术，因此以下是您要演示的演示：

4.自定义单选按钮样式

到目前为止，我们用于复选框的所有样式和逻辑几乎都与单选按钮相同。 看一下演示，亲眼看看（要使用键盘进行导航，请使用箭头键 ）：

唯一明显的区别是我们使用border-radius并设置:checked状态的样式略有不同。 在这种情况下，您当然也可以使用SVG图标-我将其留给您作为作业！ 在评论部分向我们显示您的结果。

5.可访问性测试

修补本地HTML元素时，测试是该过程的重要组成部分。 我的测试远非完美，但这是我为本教程做的事情：

• 在所有现代浏览器和IE11中进行键盘测试。
• 使用Safari的画外音。
• 使用Firefox的NVDA Screenreader 。
• 使用Android设备进行对讲。
• 使用Sim Daltonism软件进行色盲条件。
• Windows中的高对比度模式。

可以说，此列表缺少诸如Dragon之类的语音识别软件或交换设备。 但是在我所有的测试中，自定义复选框和单选按钮的行为与本机元素相同。

结论与参考

希望本教程使您了解如何为复选框和单选按钮创建自定义样式，同时仍为可访问性而构建。

我强烈建议您从这些资源中了解有关自定义表单元素的更多信息：

• 斯科特·奥哈拉（Scott O'Hara）设计的样式表单控件的辅助功能 ：许多其他示例，例如星级，选择和切换。
• GOV.UK表单元素 。
• Adrian Roselli的自定义复选框和单选按钮 。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074

js复选框和单选按钮