作者归档:sisiyuan

“跳过导航”链接

译者注:文章的英文原名为”Skip Navigation” Links,来自WebAIM。WebAIM组织为网站信息无障碍提供了全面的解决方案。所谓网站信息无障碍指任何人(无论是健全人还是残疾人,无论是年轻人还是老年人)在任何情况下都能平等的、方便地、无障碍地从网站上获取信息、利用信息。最近在学习无障碍相关标准与技术,本文主要探讨如何在页面上设置一个“跳过导航”链接以方便视障人群来使用网站功能。 英文原文:http://webaim.org/techniques/skipnav/ 译文原文:http://tid.tenpay.com/?p=4203 一、概况 在许多模板设计中都存在一个问题:页面的主要内容并不在页面的最开始的位置。使用屏幕阅读器的用户常常要听完一长串导航链接、次导航链接、网站logo、网站搜索框和其他元素后,才能到达主要内容区域。事实上,键盘使用者为了要到达主内容区域,必须tab过所有的顶部导航链接。如下图,由于页面布局,导航链接分布在顶部和左侧,用户需要跳过118个链接才能到达内容区。 二、创建“跳过导航“链接 很简单:在页面顶部提供一个可以使用户可以直接跳到主要内容的链接。在大多数情况下,它确实很容易,有不只一种方法来实现。一些方法也优于其他。这里要讨论的方法如下: 在页面顶部提供可见的链接 在页面其他地方提供可见的链接 使链接隐藏 先隐藏链接,直至它获得键盘焦后再显示 (1)在页面顶部提供可见的链接 创建一个跳过导航链接最简单的方法就是把它放在页面顶部,把响应锚点放到主内容区域开始的位置。 链接在左边、右边还是中间的位置不重要,最重要的是要确保这个链接是屏幕阅读器使用者进入页面后最先听到的内容,同时也是键盘最先tab到的内容。否则,用户可能完全没有意识到还有一个“跳过导航”链接,然后浪费时间在跳过那些无关的链接。屏幕阅读器使用者很容易对此感到不耐烦。 <body> <a href=”#maincontent”>跳过导航</a> … <h1><a name=”maincontent”id=”maincontent”></a>标题</h1> <p>第一段</p> </body> 总结:这种方法是非常有效可行的。 (2)在页面其他位置放置可见的链接 一些开发者认为这样放置跳过导航链接会不美观,破坏了页面布局。所以把链接移到其他不那么影响页面整体布局的地方。下面这个例子中,开发者就把链接移到了页面左下角的位置。 这样不会显得那么突兀。但是带来了一个问题:它不再是这个页面的第一个链接。屏幕阅读器使用者不能首先听到这个链接,键盘使用者也不能第一个tab到它。虽然可以通过设置链接的tabindex属性来解决,但是假使阅读器使用者并没有使用TAB键来听网页呢? 总结:这种方法并不是对所有用户都适合。 (3)不可见的链接 一些开发者决定隐藏这个链接。最常用的方法就是在页面顶部放一个透明的图片,并设置它的alt属性为“跳过导航”。 这解决了在布局的美观性上的问题。这对阅读器使用者也是完美的解决方案。然而,那些视力正常的键盘使用者看不到这个链接。当他们tab到这个链接的时候,他们不知道有一个链接在那,除非他们看到了浏览器底部的状态栏地址。 另一个类似的方法是使用CSS隐藏链接。这个方法比隐藏图片的方法更好,但是CSS会引起另一个问题:可能阅读器使用者也读不到这个链接了。更多信息查看“CSS in Action: Invisible Content Just for Screen … 继续阅读

发表在 技术 | 一条评论

aria-label及aria-labelledby应用

aria-label属性 正常情况下,会在表单里给input组件指定对应的label,当用户tab到输入框时,读屏软件就会读出相应label里的文本。 如:<label for=”username”>用户名:</label><input type=”text” id=”username”/> 当没有给输入框设计对应的label文本的位置时,aria-label属性为组件指定内置的文本标签。它不在视觉上呈现。 如:<input type=”text” aria-label=”用户名”/> 此时,当焦点落到该输入框时,读屏软件就会读出aria-label里的内容,即“用户名”。 经测试,aria-label只有加在可被tab到的元素上,读屏才会读出其中的内容。 以下情况,也是可以读出的:<span tabindex=”0″ aria-label=”标签提示内容”>可被tab的span标签</span>   aria-labelledby属性 当想要的标签文本已在其他元素中存在时,可以将其值为该元素的id。 <div role=”form” aria-labelledby=”form-title”> <span id=” form-title”>使用手机号码注册</span> <form>……</form> </div> 表单区添加了landmark标识role=”form”,在争渡中使用字母”D“键会在lankmark标识之间跳转。 当跳转到该区域时,不仅会读出”表单区“,也会读出”使用手机号码注册“。 如果一个元素同时有aria-labelledby和aria-label,读屏软件会优先读出aria-labelledby的内容。 测试软件:争渡读屏            浏览器:IE9

发表在 技术 | 留下评论