Question

我想创建自定义和可访问的Radio-和Checkbox-Buttons，并找到了W3C的优秀解决方案，使用div和aria role =＆＃34; radio＆＃34;。

https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/radio/radio-1/radio-1.html

<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
   <h3 id="group_label_1">Label</h3>
   <div role="radio" aria-checked="false" tabindex="0">
   Button
   </div>
</div>

它看起来很适合我，但我想实现Radio-Buttons作为表单的必填字段。问题：在这个解决方案中没有输入元素，因此没有必需的属性..

Answer 1

WAI-ARIA aria-required属性表示在提交前需要用户输入。 aria-required属性的值可以是“true”或“false”。例如，如果用户必须填写字段，则将aria-required设置为“true”。

<div role="radiogroup" aria-labelledby="group_label_1" aria-required="true"  id="rg1">
   <h3 id="group_label_1">Label</h3>
   <div role="radio" aria-checked="false" tabindex="0">
   Button
   </div>
</div>

Answer 2

你只需要添加一个属性

aria-checked = true

进入第一台收音机。

例如：

<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
   <h3 id="group_label_1">Label</h3>
   <div role="radio" aria-checked="true" tabindex="0">
   Button
   </div>

   <h3 id="group_label_2">Label2</h3>
   <div role="radio" aria-checked="false" tabindex="1">
   Button2
   </div>
</div>

Answer 3

选中W3school custom radio button以创建自定义单选按钮。并且您可以将所需属性放到单选按钮上，检查以下代码以进行演示。

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<form method="post" action="https://facebook.com" target="_blank">
<label class="container">One
  <input type="radio"  required="" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio" required="">
  <span class="checkmark"></span>
</label>

<input type="submit" value="asd" />
</form>
</body>
</html>

Answer 4

您只需将required标记添加到输入元素即可。

这是一个有效的CodePen：https://codepen.io/anon/pen/zWzaKM

如何根据需要设置div（自定义单选按钮和复选框）？

4 个答案: