在一个HTML页面上有多种形式：如何将制表限制为单一形式？ [英] Multiple forms on one HTML page: how to restrict tabbing to a single form?

问题描述

我目前正在建设的网站与标准有点不同。而不是有多个单独的页面，所有的网站内容都在一个index.php文件中，并且使用绝对定位和JavaScript，用户在页面之间跨越网站。

页面中也有几种不同的形式。我被告知不要担心迎合JavaScript禁用的人员，所以我们选择了jQuery与JSON Web服务结合，以适应页面上的所有表单。这一切现在都完美了，但有一个轻微的可用性问题：tab-indices。

由于有多种形式，从一个输入字段到下一个输入字段可能导致当用户到达表单的结尾，然后再次选择标签时，用户突然跳到网站的完全不同的部分。这在Firefox和Safari中特别令人讨厌，因为按钮和单选按钮在选项卡时会被忽略。

所以，这里是我的问题：是否有人知道将用户焦点约束到单一形式的元素？

解决方案

我目前正在建设的网站与标准有点不同。所有网站内容都不在一个index.php文件中，而是使用绝对定位和JavaScript，而不是页面之间有多个单独的页面。

这是另一种可能使这个问题陷入困境的方法，并且最终可能更容易获得。

我假设你在页面上有一些元素用于触发从一个子页面到另一个子页面的平移？

如果是这样，基本的这里的想法是，当任何页面滚动，隐藏该'子页面'（大概是一些容器DIV）与显示：无或可见性：隐藏。

这里的关键问题是，用这两种方法中的任何一种隐藏的内容都是不可放置的，因此用户不会意外地将这些隐藏的页面放入。同样重要的是，从可访问性的角度来看，屏幕阅读器知道忽略以这种方式标记的内容，因此他们只会阅读当前页面（与正确的用户看到的内容一致），而不是整个页面。

b $ b

The site I'm currently building is a little different from the norm. Instead of having multiple separate pages, all site content is on a single index.php file, and using absolute positioning and javascript the user "pans" across the site from page to page.

There are several different forms in the page as well. I was told not to worry about catering to people with Javascript disabled so we've opted for jQuery combined with JSON web-services for all forms on the page. This all works perfectly now, but there's a slight usability problem: tab-indices.

Since there are multiple forms, tabbing from one input-field to the next can result in the user suddenly jumping to an entirely different part of the site when the user reaches the end of a form and then tabs again. This is especially annoying in Firefox and Safari where buttons and radiobuttons are ignored when tabbing.

So here's my question: does anyone know of a way to constrain a user's focus to a single form element?

解决方案

The site I'm currently building is a little different from the norm. Instead of having multiple separate pages, all site content is on a single index.php file, and using absolute positioning and javascript the user "pans" across the site from page to page.

Here's an alternate approach that might side-step this issue, and could end up being more accessible.

I'm assuming you have some elements on that page that you use to trigger the panning from one sub-page to the other?

If so, basic idea here is that when any page is "scrolled off", hide that 'sub-page' (presumably some container DIV) with display:none or visibility:hidden.

The key issue here is that content hidden with either of these two methods is non-tabbable, so the user can't accidentally tab into those hidden pages. Also importantly from an accessibility point of view, screenreaders know to ignore content that's marked up this way, so they will only read the current page (which is consistent with what a sighted user sees), not the entire page.

这篇关于在一个HTML页面上有多种形式：如何将制表限制为单一形式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！