Question

我目前有一个这样的表格：

<form action="#">
    <select {if $isPostRequest}disabled="disabled" {/if}size="1" name="locale" 
onchange="location.href={if $languageToggleNoUser}'{$currentUrl|escape}{if strstr($currentUrl, '?')}&amp;{else}?{/if}setLocale='+this.options[this.selectedIndex].value{else}('{url|escape:"javascript" page="user" op="setLocale" path="NEW_LOCALE" source=$smarty.server.REQUEST_URI}'.replace('NEW_LOCALE', this.options[this.selectedIndex].value)){/if}" class="selectMenu">{html_options options=$languageToggleLocales selected=$currentLocale}</select>
</form>

它目前导致WCAG 2.0错误，为all forms need a submit button。

我想知道如何更改此代码以包含提交按钮。 onchange选项的代码非常复杂，我不明白。

感谢。

Answer 1

WCAG 2.0不需要提交按钮。你链接的是一种技术，它是提供信息的（不是规范性的），它只是实现指南3.2.2的可能方法之一。

所以它可以符合没有提交按钮，例如

时

在使用组件
之前已经告知用户该行为

相关技巧：G13: Describing what will happen before a change to a form control that causes a change of context to occur is made

Answer 2

这里要注意的重要一点是，内容并非的立即改变意味着 context 的改变。

从3.2.2 guideline的角度来看，您的选择框极有可能是完美的。

上下文的改变意味着真正的改变。当用户在选择框中选择一个选项时，焦点就会转移到页面的不同部分。另外，导致刷新整个页面或打开新标签页的操作也会使此条件失败。

WCAG "change of context" definition

网页内容的重大更改，如果在没有用户意识的情况下进行更改，则会使无法同时查看整个页面的用户感到迷惑

上下文变化包括：

用户代理；

视口；

重点；

改变网页含义的内容。

注意：内容的变化并不总是上下文的变化。内容的更改（例如，展开的轮廓，动态菜单或选项卡控件）不一定会更改上下文，除非它们也会更改以上内容之一（例如，焦点）。

示例：打开一个新窗口，将焦点移到另一个组件，转到新页面（包括看起来像用户已经移到新页面的所有内容）或重新安排页面内容是上下文更改的示例。

因此，如果您要做的只是在页面上的其他地方修改某些内容，而又不与用户的关注点交织在一起，那么从3.2.2准则的角度来看，您所做的一切都很好。

尽管如此，您目前还是以其他方式失败

有一件事导致您的选择框无法访问。它缺少标签。这违反了准则2.4.6 Headings and Labels。缺少标签意味着用户将不知道选择框的用途。

<form action="#">
    <label for="unique-id">Label for select box</label>
    <select id="unique-id" {... all that other junk ...}>
        {...<option> elements...}
    </select>
</form>

更改表单以包含WCAG的提交按钮

2 个答案:

WCAG "change of context" definition

尽管如此，您目前还是以其他方式失败