Question

使用primefaces 5.1，我正在使用WCAG validator测试我的应用，以下代码违反了指南：

<p:outputLabel for="selectHowMuch" value="Do you feel edgy lately ?" />

<p:selectOneMenu id="selectHowMuch" value="Yes">
    <f:selectItem itemLabel="Argggg" itemValue="3" />
    <f:selectItem itemLabel="Yes" itemValue="2" />
    <f:selectItem itemLabel="hmmm" itemValue="1" />
    <f:selectItem itemLabel="NO!" itemValue="0" /> 
</p:selectOneMenu>

破碎的准则是

成功标准1.3.1信息和关系（A）检查91：选择   元素缺少相关标签。

修复：添加围绕控件标签的标签元素。组   label元素的for属性与id的值相同   控件的属性。和/或为输入添加title属性   元件。和/或创建包含输入的标签元素   元件。

错误第1行，第16711行：

<select id="_testapp_WAR_testapp001SNAPSHOT_:j_idt3:selectHowMuch_input"

请注意，p：outputLabel实际上有帮助（如果删除它，我会收到更多错误），但看起来它没有覆盖<select> _input标签

我也注意到其他选择组件也是如此。有什么想法来解决这个问题吗？

编辑：这是我生成的代码：

<label  id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:j_idt62"  class="ui-outputlabel ui-widget"
    for="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus">Do you feel edgy lately ?</label>

<div id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
    <div class="ui-helper-hidden-accessible">
        <input
            id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus"
            name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_focus"
            type="text" autocomplete="off" />
    </div>
    <div class="ui-helper-hidden-accessible">
        <select
            id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
            name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
            tabindex="-1"><option value="3">Argggg</option>
            <option value="2">Yes</option>
            <option value="1">hmmm</option>
            <option value="0">NO!</option></select>
    </div>
    <label
        id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_label"
        class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>
    <div
        class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
        <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
    </div>
    <div
        id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_panel"
        class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
        <div class="ui-selectonemenu-items-wrapper"
            style="height: auto">
            <ul
                class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
                <li
                    class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
                    data-label="Argggg">Argggg</li>
                <li
                    class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
                    data-label="Yes">Yes</li>
                <li
                    class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
                    data-label="hmmm">hmmm</li>
                <li
                    class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"
                    data-label="NO!">NO!</li>
            </ul>
        </div>
    </div>
</div>
<script id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_s"
    type="text/javascript">$(function(){PrimeFaces.cw("SelectOneMenu","widget__tutorial_WAR_tutorial001SNAPSHOT__j_idt3_selectHowMuch",{id:"_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch",widgetVar:"widget__tutorial_WAR_tutorial001SNAPSHOT__j_idt3_selectHowMuch"})});</script>

Answer 1

抱歉，我必须与最后的答案形成对比......

在您的示例中，此选择没有关联的标签

 <select
        id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
        name="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_input"
        tabindex="-1"><option value="3">Argggg</option>
        <option value="2">Yes</option>
        <option value="1">hmmm</option>
        <option value="0">NO!</option></select>

之后有一个标签可能已被考虑过，但它没有for属性且不包含select标记。

 <label
    id="_tutorial_WAR_tutorial001SNAPSHOT_:j_idt3:selectHowMuch_label"
    class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>

据我所知，{1}}和input都是为这一个字段生成的，只有一个标签与select正确关联。这看起来像是一个错误的表面，你应该让他们的工作人员做一些更正......

还有更多的修正要做，因为第一个标签应与select元素相关联，如果我正确理解，输入元素对于屏幕阅读器是不可见的。

Answer 2

您的标记本身没有任何问题。它符合公认的技术之一。

http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H44#H44-ex1

虽然该示例显示了使用<input>元素，但它对<select>元素同样有效。

这看起来像验证器中的错误。我建议尝试FireEyes http://www.deque.com/products/fireeyes/fireeyes-installation/

p：select的辅助功能问题

2 个答案: