Html 如何创建符合508标准的单选按钮
我正在将我的公司网站转换为符合508标准的网站，需要帮助。目前，我正试图找出构建表单的正确方法，特别是使用单选按钮/复选框的项目。根据到目前为止我所做的研究，我已经建立了一个表格，但我想知道它是否正确 以下是我创建的表单：Html 如何创建符合508标准的单选按钮,html,forms,section508,Html,Forms,Section508,我正在将我的公司网站转换为符合508标准的网站，需要帮助。目前，我正试图找出构建表单的正确方法，特别是使用单选按钮/复选框的项目。根据到目前为止我所做的研究，我已经建立了一个表格，但我想知道它是否正确 以下是我创建的表单： <form onsubmit="" method="post" name="subscribeForm" action="https://cl.exct.net/subscribe.aspx" class="bordered"> <div role="gro
<form onsubmit="" method="post" name="subscribeForm" action="https://cl.exct.net/subscribe.aspx" class="bordered">
<div role="group" aria-labelledby="contact_info_head">
<input type="hidden" name="thx" value="http://www.bcbsm.com/content/microsites/mpsers/en/members/newsletters/sign-up/thank-you.html" />
<input type="hidden" name="err" value="http://www.bcbsm.com/index/common/error-pages/mspsers-error.html" />
<input type="hidden" name="usub" value="http://www.bcbsm.com/content/microsites/mpsers/en/members/newsletters/sign-up/unsubscribe.html" />
<input type="hidden" name="MID" value="62449" />
<input type="hidden" name="lid" value="2540764" />
<input type="hidden" name="EnrolleeID2" value="0">
<h2 id="contact_info_head">Your Contact Information</h2>
<input type="hidden" name="MID" value="62449" aria-hidden="true" />
<div class="caption"><strong>* Denotes a required field</strong></div>
<br>
<div class="control-group ">
<!-- Text input-->
<label class="control-label" for="FirstName">*First Name</label>
<div class="controls">
<input type="text" placeholder="" class="input" name="first name" id="FirstName" data-required="true" aria-required="true">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="LastName">*Last Name</label>
<div class="controls">
<input type="text" placeholder="" class="input" name="last name" id="LastName" data-required="true" aria-required="true">
<p class="help-block"></p>
</div>
</div>
<div class="control-group ">
<label class="control-label" for="EmailAddress">*Email Address</label>
<div class="controls">
<input type="text" placeholder="" class="input EmailAddress" name="Email Address" id="EmailAddress" aria-required="true">
<p class="help-block"></p>
</div>
</div>
<div class="control-group ">
<label class="control-label" for="ConfirmEmailAddress">*Confirm Email Address</label>
<div class="controls">
<input type="text" name="Confirm Email Address" class="input ConfirmEmailAddress" id="ConfirmEmailAddress" aria-required="true">
<p class="help-block"></p>
</div>
</div>
<div class="control-group ">
<label class="control-label" for="EnrolleeID" id="enrollee-id-explained">*Enrollee ID</label>
<span aria-labelledby="enrollee-id-explained">(located on the front of your Blues ID card)</span>
<div class="controls">
<input type="text" placeholder="" class="input" name="EnrolleeID" id="EnrolleeID" data-required="true" aria-required="true">
<p class="help-block"></p>
<br>
</div>
</div>
<!-- begin radio button section =============================== -->
<div id="check-group">
<fieldset>
<legend class="h3">Retiree Status</legend>
<!-- Multiple Checkboxes -->
<input id="medicare" class="checkbox-btn-control" type="radio" checked="checked" value="Medicare" name="MPSERS Status">
<label for="medicare">Medicare</label>
<input id="non-medicare" class="checkbox-btn-control" type="radio" value="NonMedicare" name="MPSERS Status">
<label for="non-medicare">Non-Medicare</label>
<input id="medicare-and-non-medicare" class="checkbox-btn-control" type="radio" value="MedicareAndNonMedicare" name="MPSERS Status">
<label for="medicare-and-non-medicare">Medicare & Non-Medicare</label>
</fieldset>
<p class="help-block"></p>
<br>
<fieldset>
<legend class="h3">Email Preference</legend>
<!-- Multiple Checkboxes -->
<input type="radio" class="checkbox-btn-control" name="email type" value="HTML" checked="checked" id="EmailPrefHTML">
<label for="EmailPrefHTML">HTML</label>
<input type="radio" class="checkbox-btn-control" name="email type" value="TEXT" id="EmailPrefText">
<label for="EmailPrefText">Text</label>
</fieldset>
<p class="help-block"></p>
</div>
</div>
您的联系信息
*表示必填字段
*名字
*姓
*电子邮件地址
*确认电子邮件地址
*注册者ID
（位于您的蓝色身份证正面）
退休人员身份
医疗保险
非医疗保险
医疗保险及；非医疗保险
电子邮件偏好
HTML
正文
非常感谢您在这个问题上提供的任何帮助。谢谢 据我所知，你做得很好。你所有的输入都有标签，你甚至使用了aria labelledby
如果你只是想通过508扫描器测试，你可能很好，这些都是很肤浅的。另一方面，如果你预计会有很多视力受损的访问者，那么运行屏幕阅读器并闭上眼睛测试网站是一个很好的测试。不幸的是，这段代码无法与我所知道的任何浏览器和屏幕阅读器组合使用。屏幕阅读器将跳过图例，只读取单选按钮答案 以下提示应该会有所帮助： -在所有标签中的星号和字段名之间添加空格。大多数读者会很好地处理它，但它可能会绊倒一些人 -清除父级div上的role=“group”，并替换为role=“form” -不确定是否正在执行此操作，但决不要使用JavaScript或autofocus属性在第一个表单字段上设置自动聚焦。这样做通常会阻止屏幕阅读器切换到表单模式，直到您通过第一个表单字段并切换到第二个表单字段。将焦点放在表单上方的某个位置，以便通过标签将屏幕阅读器带过表单标签和div，并使用role=“form”，触发屏幕阅读器的表单模式 -将单选按钮代码替换为以下代码。请注意aria required=“true”的位置，以及非常重要的是字段集元素上的arialabledby属性与图例元素上的id之间的关系：
<div id="check-group">
<fieldset role="radiogroup" aria-required="true" aria-labelledby="retireeStatus">
<legend class="h3" id="retireeStatus">* Retiree Status</legend>
<!-- Multiple Checkboxes -->
<input id="medicare" class="checkbox-btn-control" type="radio" checked="checked" value="Medicare" name="MPSERS Status">
<label for="medicare">Medicare</label>
<input id="non-medicare" class="checkbox-btn-control" type="radio" value="NonMedicare" name="MPSERS Status">
<label for="non-medicare">Non-Medicare</label>
<input id="medicare-and-non-medicare" class="checkbox-btn-control" type="radio" value="MedicareAndNonMedicare" name="MPSERS Status">
<label for="medicare-and-non-medicare">Medicare & Non-Medicare</label>
</fieldset>
<p class="help-block"></p>
</div>
*退休人员身份
医疗保险
非医疗保险
医疗保险及；非医疗保险
我已经测试了包含这些提示和代码的单选按钮字段，它们在以下浏览器/阅读器组合中运行良好：Chrome/JAWS、Firefox/JAWS、Chrome/ChromeVox、Edge/NVDA、Mac/Chrome/ChromeVox、Mac/Safari/VoiceOver，可能还可以与Opera/NVDA、Mac/Opera/VoiceOver一起使用。（目前正在扩展测试以包括Opera，Opera的可访问性似乎非常强。）可能重复的。如果编写JS，请小心使用多个值。i、 e.
name=“email type”