2

我目前有这样的表格：

<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 错误，因为所有表单都需要一个提交按钮。

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

谢谢。

4

2 回答 2

2

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

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

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

相关技术：G13：描述在对导致上下文发生更改的表单控件进行更改之前会发生什么

于 2014-02-21T15:12:33.017 回答
0

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

从3.2.2 指南的角度来看，您的选择框很可能完全没问题。

上下文的变化意味着一个非常剧烈的变化。当用户在选择框中选择一个选项时，焦点会转移到页面的不同部分。此外，诸如导致整页刷新或打开新选项卡之类的事情也将不符合此标准。

WCAG“上下文变化”定义

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

上下文的变化包括：

  • 用户代理;
  • 视口；
  • 重点;
  • 改变网页含义的内容。

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

示例：打开新窗口、将焦点移至不同组件、转到新页面（包括任何让用户看起来好像已移至新页面的内容）或大幅重新安排页面内容都是示例语境的变化。

因此，如果您所做的只是修改页面上其他地方的一些内容而不是弄乱用户的焦点，那么从 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>
于 2020-05-26T08:54:38.527 回答