web调用键盘显示_Web辅助功能键盘导航

web调用键盘显示

This is the second article in a series about web accessibility that aims to provide designers, developers and product owners with an understanding of the common challenges, who they affect and what solutions are available.

这是有关网络可访问性的系列文章中的第二篇，旨在使设计师，开发人员和产品所有者了解共同的挑战，它们所影响的人以及可用的解决方案。

介绍 (Introduction)

The QWERTY keyboard is almost 150 years old and computer Keyboards have been around since the 1940s. As data input peripherals they might not be as in-vogue as touchscreens, voice interfaces or haptic gloves, they remain ubiquitous and are still essential for many user groups. Some of those groups are people with physical impairments, some are specialists (copy writers for example) and some people simply prefer it as a means of data entry — entering a search term with a TV remote control just isn’t fun is it?

QWERTY键盘已有近150年的历史，并且计算机键盘自1940年代就已经存在。 作为数据输入外围设备，它们可能不如触摸屏，语音界面或触觉手套那么流行，它们仍然无处不在，并且对于许多用户组仍然必不可少。 这些人群中有些是身体残障的人，有些是专家(例如，文案作者)，有些人只是喜欢用它作为数据输入的手段-用电视遥控器输入搜索词不是很有趣吗？

Examples of the kinds of users who may not use a mouse or touchscreen at all are people with fine motor control restrictions (e.g. Parkinson’s disease or severe arthritis) and people with large motor control issues (e.g. Multiple Sclerosis‎). These are permanent conditions, but let’s not forget the temporary ones such as broken wrists or people, such as myself, with issues like repetitive strain injury (RSI).

完全不使用鼠标或触摸屏的用户的例子包括运动控制严格的人(例如帕金森氏病或严重的关节炎)和运动控制大的人(例如多发性硬化)。 这些是永久性的状况，但别忘了暂时性的状况，例如腕部折断或像我这样的人出现重复性劳损(RSI)等问题。

不良的导航体验 (Bad navigation experiences)

It would be cruel of me to single out a particular brand as an example of what bad looks like, however the sad truth is that you don’t have to look very far to find any such examples. Open some of your favourite travel, retail or banking sites and try to navigate purely using the keyboard and you will likely become lost quite early on in this process. What often happens is that it’s simply not clear where you are on the page. As you can imagine this is extremely frustrating for users who have little other choice.

挑出一个特定的品牌作为劣质外观的例子对我来说是残酷的，但是可悲的事实是，您不必走很远就能找到任何这样的例子。 打开一些您喜欢的旅行，零售或银行网站，然后尝试仅使用键盘进行导航，您可能会在此过程中很早就迷路。 通常会发生的情况是，您不清楚页面上的位置。 您可以想象，这对没有其他选择的用户而言非常令人沮丧。

状态 (States)

In my experience, the most common missing accessibility feature from any website is a clear and obvious focus state for a link, button or form element. The focus state is what is invoked when you navigate to an interactive element using the keyboard tab key or other similar input. By default, most browsers will add a blue outline to a focussed element. However, in many cases this isn’t particularly clear, so I recommend making the state change more obvious, which could be achieved via a background colour change or a custom outline that has a high colour contrast ratio (see previous article for more info on that).

根据我的经验，任何网站上最常见的缺少可访问性的功能是链接，按钮或表单元素的清晰明确的焦点状态。 焦点状态是使用键盘Tab键或其他类似输入导航到交互式元素时调用的状态。 默认情况下，大多数浏览器都会在焦点所在的元素上添加蓝色轮廓。 但是，在很多情况下，这种情况并不是特别清楚，因此我建议使状态变化更加明显，这可以通过背景颜色变化或具有高色彩对比度的自定义轮廓来实现(有关详细信息，请参阅前一篇文章)那)。

What