p:select 的辅助功能问题

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>

错误的准则是

Success Criteria 1.3.1 Info and Relationships (A) Check 91: select element missing an associated label.

Repair: Add a label element that surrounds the control's label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.

错误第 1 行，第 16711 列：

<select id="_testapp_WAR_testapp001SNAPSHOT_:j_idt3:selectHowMuch_input"

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

我还注意到其他 select 组件也会发生同样的情况。有解决这个问题的想法吗？

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

<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

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

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

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

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

Answer 2

对不起，我要和上一个答案对比...

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

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

据我了解，input 和 select 都是为这一字段生成的，只有一个标签与 input 正确关联。这看起来像是 primefaces 中的一个错误，你应该请他们的工作人员进行一些更正...

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

p:select 的辅助功能问题

Accessibility issue with p:select

jsf

accessibility

primefaces