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

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

这里要注意的重要一点是，内容的变化 并不立即意味着上下文的变化。

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