Html 隐藏字体的标签复选框

我在一个站点上实现了一个非常棒的复选框，并且遇到了一个我正试图解决的问题。基本上，该网站必须是508兼容和屏幕阅读器必须能够阅读通过一切

我有带标签的复选框，但是我想在特定实例中隐藏标签，但使其对屏幕阅读器可见。我听说使用“可见性：隐藏”会使屏幕阅读器无法使用它

在下面的示例中，我如何隐藏标签（或者我应该说只隐藏标签中的文本），而不保留复选框

自定义复选框
复选框1
复选框2
复选框3
@导入url（//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css）；
/***基本风格***/
正文{页边距：30px；}
h1{字体大小：1.5em；}
标签{字体大小：24px；}
div{
宽度：175px；
左边距：20px；
}
/***自定义复选框***/
输入[type=checkbox]{display:none；}/*以隐藏复选框本身*/
输入[类型=复选框]+标签：在{
字体系列：Fontsome；
显示：内联块；
}
输入[类型=复选框]+标签：在{content:“\f096”}/*未选中图标之前*/
输入[type=checkbox]+标签：在{字母间距：10px；}/*复选框和标签之间的空格之前*/
输入[类型=复选框]：选中+标签：在{content:“\f046”}/*选中图标之前*/
输入[类型=复选框]：选中+标签：在{字母间距：5px；}/*为复选标记留出空间之前*/

    <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 */