4.键盘

键盘也是处理可访问性问题时应关注的另一领域。

4.1 所有功能都能用键盘访问

WCAGSC2.1.1指出用户应当能用键盘导航到所有内容和功能，图10显示了一个关于键盘问题的例子。如果鼠标移动到用户名处，下方将会弹出一张卡片。用户单击弹出信息将打开整个名片。这整个操作过程都应当有为键盘用户设计的替代方法。这种情况下，快捷键就是一个不错的选择。例如，按下Ctrl+Enter将打开用户的名片。

 
图10.打开弹出信息时的键盘问题

图11显示了另一项复杂的操作，即拖放功能，这是Web 2.0应用程序中的常见特性，允许用户在UI上动态拖拽小部件。这项功能很难用键盘模拟，因此应该用其他方法实现。UI中的另一个明显的功能是向用户展示向哪里移动小部件。

 
图11.关于拖放功能的键盘问题

4.2不应有键盘陷阱：焦点可以进入和退出当前的UI

当用户在当前窗口之上再打开一个新窗口时，可能会对焦点变化感到疑惑。WCAGSC2.1.1指出不应有键盘陷阱。如果打开一个新窗口，焦点应当移到新打开窗口的第一个可编辑元素中，并且应该能通过关闭或按下键盘ESC键的方法来退出新打开的窗口。

图12显示的是UI中弹出新窗口的例子。当用户展开MoreActions按钮并单击ImportBookmarks时，屏幕显示焦点仍在MoreActions按钮上而不是移到新窗口中。这就是一个键盘陷阱，因为用户无法只用键盘就将焦点移到新窗口中。键盘导航仍停留在原窗口中。这种情况下，应当添加一些代码来专门将光标移到新打开窗口的第一个可编辑对象上。

 图12.焦点的键盘问题

图13显示的是另一个键盘陷阱问题。单击Prioritize按钮后，弹出一个下拉列表。如果用户不想选择任何项，只是退出列表，那么他们不管按下什么键都无法做到。这是一个键盘陷阱。应该有退出的方法，如按ESC键。

 
图13.下拉列表的键盘陷阱

5.高对比模式

高对比（下文简称HC）模式是一种特别的显示模式。在HC模式下，所有背景设置无效，包括图片和颜色。因此，应用程序中应有专门的代码处理HC模式。

图14显示的是关于该检查点的例子。每条用户记录都有一个按钮来读出名字。但图片是背景图，在HC模式下不会显示在UI中。在图14中，我们用替代文字来表示图标。清单6显示了如何通过第7行中的<span>指令来用span设置替代文字。

 
图14.高对比模式下的背景图

清单6.为HC用户生成替代文字

<atitleatitle="Playanaudiofilewiththepronunciationoftheperson'sname" 
id="pronunciation" 
href="/profiles/audio.do?key=4815d70b-680d-4bfb-ba05-f32ccedbbcb5  
&amp;lastMod=1248147056328"> 
<imgsrcimgsrc="/profiles/nav/common/styles/images/blank.gif"class="lconnSprite  
lconnSprite-iconAudio16"/> 
<spanclassspanclass="lotusAltText">Pronunciation</span> 
</a> 
 

6.其它问题

还有其他一些影响使用性的情形，它们不包含在以上类别中。本节将介绍这些情形。

6.1定时调整

WCAGSC2.2.1指出应用程序中不应有无法禁用或调整的时间限制。图15显示的是该检查点的例子。错误消息将在约5秒钟后消失，而用户无法禁用这个有关时间限制的配置。这对于残障人士是无法接受的，尤其是视力受损用户。解决方法是禁用时间限制或仅弹出一个错误消息即可。

 
图15.具有定时调整的消息

6.2导航特性

WCAGSC2.4.1指出所有UI都应有导航特性以帮助用户将焦点移到合适的位置，例如在包含空白图片的UI顶部使用“Skiptomaincontent”标记。当然，一个产品的所有用户界面都应有导航特性。清单7显示了该检查点。有三个标识供用户跳过他们不想听到的内容。

清单7.提供方法使用户跳过不希望听到的内容

<!--ThefollowinglinesarerequiredforAccessibilityandareusedbyscreenreaders.  
Pleasedonotremove--> 
<ahrefahref="#mainContent"id="lotusAccessLinkMainContent"accesskey="S" 
class="lotusAccess"> 
<imgsrcimgsrc="/activities/nav/common/styles/images/blank.gif" 
alt="Skiptomaincontentlink.AccesskeyS"/> 
</a> 
<ahrefahref="#tabNavigation"id="lotusAccessLinkTabNavigation"accesskey="1" 
class="lotusAccess"> 
<imgsrcimgsrc="/activities/nav/common/styles/images/blank.gif" 
alt="Skiptotabnavigationlink.Accesskey1"/> 
</a> 
<ahrefahref="#subNavigation"id="lotusAccessLinkSubNavigation"accesskey="2" 
class="lotusAccess"> 
<imgsrcimgsrc="/activities/nav/common/styles/images/blank.gif"alt="Skipto  
subnavigation.Accesskey2"/>