Question

我在网站上实施了FontAwesome复选框，并遇到了一个我想弄清楚的问题。基本上，该网站必须符合508标准，屏幕阅读器必须能够读取所有内容。

我有带标签的复选框，但是我想在特定实例中隐藏标签，但让屏幕阅读器可以看到它。我听说过使用＆＃39;可见性：隐藏＆＃39;使屏幕阅读器无法使用。

在下面的例子中，我如何隐藏标签（或者我应该说只是隐藏标签中的文字），但保留复选框？

    <h1>Custom Checkboxes</h1>
<div>
  <input id="box1" type="checkbox" />
  <label for="box1">Checkbox 1</label>
  <input id="box2" type="checkbox" />
  <label for="box2">Checkbox 2</label>
  <input id="box3" type="checkbox" />
  <label for="box3">Checkbox 3</label>
</div>

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*** basic styles ***/

body { margin: 30px; } 
h1 { font-size: 1.5em; }
label { font-size: 24px; }
div { 
  width: 175px; 
  margin-left: 20px;
}

/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

隐藏FontAwesome复选框的标签

0 个答案: