Question

我正在将公司网站转换为符合508标准并需要帮助。目前，我正试图找出构建表单的正确方法，特别是使用单选按钮/复选框的项目。根据我迄今为止所做的研究，我已经建立了一个表格，但我想知道它是否正确。

以下是我建立的表格：

<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 &amp; 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>

非常感谢有关此问题的任何帮助。谢谢！！！

Answer 1

据我所知，你做得很好。您的所有输入都被标记，甚至可以使用aria-labelledby。

如果您只是尝试通过508扫描仪测试，那么您可能很好，那些事情非常肤浅。另一方面，如果您期待许多有视觉障碍的访客，运行屏幕阅读器并闭眼测试网站是一个很好的测试。

Answer 2

不幸的是，此代码不适用于我所知道的浏览器和屏幕阅读器的任何组合。屏幕阅读器将跳过图例，仅阅读单选按钮的答案。

以下提示应有所帮助：

-在所有标签的星号和字段名称之间添加一个空格。大多数读者会很好地处理它，但是它可能会使它绊倒一些。

-删除父级 div 上的 role =“ group” ，并替换为 role =“ form”

-不确定是否要执行此操作，但不要使用JavaScript或 autofocus 属性在第一个表单字段上设置自动对焦。这样做通常会阻止屏幕阅读器切换到表单模式，直到您在第一个表单字段之前跳到第二个表单字段为止。将焦点放在表单上方的某处，以便通过制表符使屏幕阅读器通过 role =“ form” 移过 form 标签和 div ，触发屏幕阅读器的表单模式

-用以下代码替换您的单选按钮代码。请注意 aria-required =“ true” 的位置，并且非常重要的是，请注意 fieldset 元素上的 arialabelledby 属性与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 &amp; 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的过程中，它的可访问性似乎很强。）

如何创建508兼容的单选按钮

2 个答案: