译者注文章的英文原名为Ski2019iyiou最新

2019年05月15日 来源:

译者注:文章的英文原名为Skip Navigation Links,来自WebAIM。WebAIM组织为站信息无障碍提供了全面的解决方案。所谓站信息无障碍指任何人(无论是健全人还是残疾人,无论是年轻人还是老年人)在任何情况下都能平等的、方便地、无障碍地从站上获取信息、利用信息。最近在学习无障碍相关标准与技术,本文主要探讨如何在页面上设置一个跳过导航链接以方便视障人群来使用站功能。

英文原文:

一、概况

在许多模板设计中都存在一个问题:页面的主要内容并不在页面的最开始的位置。使用屏幕阅读器的用户常常要听完一长串导航链接、次导航链接、站logo、站搜索框和其他元素后,才能到达主要内容区域。事实上,键盘使用者为了要到达主内容区域,必须tab过所有的顶部导航链接。如下图,由于页面布局,导航链接分布在顶部和左侧,用户需要跳过118个链接才能到达内容区。

二、创建跳过导航链接

很简单:在页面顶部提供一个可以使用户可以直接跳到主要内容的链接。在大多数情况下,它确实很容易,有不只一种方法来实现。一些方法也优于其他。这里要讨论的方法如下:

在页面顶部提供可见的链接

在页面其他地方提供可见的链接

使链接隐藏

先隐藏链接,直至它获得键盘焦后再显示

(1)在页面顶部提供可见的链接

创建一个跳过导航链接最简单的方法就是把它放在页面顶部,把响应锚点放到主内容区域开始的位置。

链接在左边、右边还是中间的位置不重要,最重要的是要确保这个链接是屏幕阅读器使用者进入页面后最先听到的内容,同时也是键盘最先tab到的内容。否则,用户可能完全没有意识到还有一个跳过导航链接,然后浪费时间在跳过那些无关的链接。屏幕阅读器使用者很容易对此感到不耐烦。

跳过导航

标题

第一段

总结:这种方法是非常有效可行的。

(2)在页面其他位置放置可见的链接

一些开发者认为这样放置跳过导航链接会不美观,破坏了页面布局。所以把链接移到其他不那么影响页面整体布局的地方。下面这个例子中,开发者就把链接移到了页面左下角的位置。

这样不会显得那么突兀。但是带来了一个问题:它不再是这个页面的第一个链接。屏幕阅读器使用者不能首先听到这个链接,键盘使用者也不能第一个tab到它。虽然可以通过设置链接的tabindex属性来解决,但是假使阅读器使用者并没有使用TAB键来听页呢?

总结:这种方法并不是对所有用户都适合。

(3)不可见的链接

一些开发者决定隐藏这个链接。最常用的方法就是在页面顶部放一个透明的图片,并设置它的alt属性为跳过导航。

这解决了在布局的美观性上的问题。这对阅读器使用者也是完美的解决方案。然而,那些视力正常的键盘使用者看不到这个链接。当他们tab到这个链接的时候,他们不知道有一个链接在那,除非他们看到了浏览器底部的状态栏地址。

另一个类似的方法是使用CSS隐藏链接。这个方法比隐藏图片的方法更好,但是CSS会引起另一个问题:可能阅读器使用者也读不到这个链接了。更多信息查看CSS in Action: Invisible Content Just for Screen Reader Users。

总结:这种方法并不是对所有用户都适合。

(4)获焦后链接可见

另一种在美观和可访问性两者之间平衡的方法:当链接被tab时才显示。使用鼠标的人看不见这个链接。不需要跳过导航链接的用户完全意识不到这个链接。

现在这个链接是可见的了。它是页面的第一个链接,所以屏幕阅读器会首先读到这个链接。这看起来是几乎完美的解决方案了。唯一的缺陷就是键盘使用者要tab到它的时候才能看见。突然的出现可能会有一点令人疑惑。但是,链接突然出现会吸引用户的注意,这样可以增加用户点击它的可能性。在非官方的观察统计下,用户对这种方法反应良好。

CSS写法:

#skip a , #skip a:hover , #skip a:visited{position:relative; left:0;top:-500px;width:1px;height:1px;overflow:hidden;}

#skip a:active , #skip a:focus{position:static; width:auto; height:auto;}

HTML结构:

skip to man content

三、哪种文字描述比较好呢?

有不只一种好的方式来描述这个链接 。以下是比较常用的几种:

跳过导航

跳过主要导航

跳过导航链接

跳到主内容区

跳到内容区

以上任何一种都很好。

四、浏览器怪癖

Windows的IE号称是最棘手的浏览器了。在一些页面中,跳过导航链接如预期的一样起作用,但是在一些情况中,视线的焦点是改变了,但是输入焦点并没有。换句话说,当用户激活了跳过导航链接,焦点移到正确的位置,但是当用户再次TAB的时候,焦点重新回到了初始的位置。当这种情况发生时,跳过导航的链接就完全没有意义了。

是什么引起了IE下这个bug呢?事实证明,IE需要锚点在一个定义了宽度的元素内。宽度可以是绝对的(如600px),也可以是相对的(如100%等),但是宽度必须被定义。这个宽度可以定义给一个div,一个表格单元,span标签或者其他元素。

有时在一个特殊的设计里,找到一个可用的宽度单位是很不方便的。但是让跳过导航链接起作用是很必要的。事实上,所有页面上的每一个锚点都必须在一个定义了宽度的元素里,并不只是跳过导航链接的锚点。

五、跳过导航的替代方法

事实上,跳过导航是一个非常笨拙的方法。他将一直有效,直到有一种划分导航和主要内容的更标准化的方法出现。然后,还有不止一种方法来达到跳过导航的效果。

(1)按标题导航

最有效的办法就是创建有合适标题的文档结构,这样用户就能在标题之间跳转。大部分屏幕阅读器都允许用户只听标题,跳过段落、图片、链接和其他多余的信息。如果文档结构合理,通常可以形成一个标题大纲,这样不仅可以跳过导航,还能让屏幕阅读器使用者浏览整个页面的信息而不用阅读所有的文字。

这个方法的一个缺点就是,只有屏幕阅读器的用户可以使用这个功能。浏览器并不具备这个功能。这意味着视力正常的键盘用户不能像屏幕阅读器的用户那样跳过一个个链接。

总结:这个方法对屏幕阅读器的用户是非常有效的。

(2)替换阅读顺序

一些开发者使主要内容作为读屏的开始,把导航放到最后。 这种方法显得跳过导航链接就没必要了,但是它带来了另一个问题。是不是提供一个跳到导航链接呢?这是个非常严峻的问题。习惯了跳过导航的用户可能一不注意就会点去他们本想跳过的导航部分。这会使用户感到困惑。有或者没有跳到导航链接,都可能会使想要去导航的用户迷失,想知道这个页面到底有没有导航。

总结:这个想法是好的。但是现阶段把跳过导航链接放在页面顶部的约定决定了开发人员也必须这么做,确保用户不会在你的页面感到困惑。

2016年福州人工智能A轮企业
2014年深圳生活服务Pre-A轮企业
深圳汽车出行
相关文章
  • 牦牛腩炖口蘑的做法
    牦牛腩炖口蘑的做法

    牦牛腩炖口蘑的做法这次尝试做了牦牛腩,每块肉都有筋,特别好吃。配上口蘑,简直鲜美透顶。将第一天吃剩的牦牛腩加些土豆,第二天变成了新的一道菜--牦牛腩炖土豆,吃起来新鲜,别有一番滋味。 主料牦牛腩500口蘑适量豆瓣酱适量 ...

  • 我国风电自动化未来市场不容小觑行业动态
    我国风电自动化未来市场不容小觑行业动态

    工控摘要:未来全球新能源的竞争将会直接体现在风电行业,风电安全、环保,未来发展不容小觑。从相关设备方面来看,风机控制系统是风机的重要组成部分。而目前我国风电场经常基本上都是建立沙漠、海上等恶劣严酷的环境中,这就要求风电控制系统具有超高...

  • 女孩乘电梯时遭持刀抢劫淡定聊天劫匪算了不
    女孩乘电梯时遭持刀抢劫淡定聊天劫匪算了不

    女孩乘电梯时遭持刀抢劫淡定聊天 劫匪:算了 不抢了凶器从滁州琅琊警方获悉,结合程晨提供的相关线索,警方缜密侦查不到20小时,就将这名涉嫌抢劫的男子抓获归案。夜晚惊魂:女孩独自回家,电梯遭遇抢劫当天晚上21时20分不到,在滁州市明光西路一家吧上之...

  • 土耳其总理表示将推动与库尔德人和谈进程库
    土耳其总理表示将推动与库尔德人和谈进程库

    土耳其总理表示将推动与库尔德人和谈进程库尔德库尔德亾原标题:土耳其总理表示将推动与库尔德人和谈进程新华安卡拉1月25日电(郑金发邹乐)土耳其总理达武特奥卢25日表示,土耳其政府和执政的正义与发展党决心推动与库尔德人和谈进程,全力解决库尔德问...

  • 2000点关口蓄势蓝筹酝酿新一轮攻势
    2000点关口蓄势蓝筹酝酿新一轮攻势

    2000点关口蓄势 蓝筹酝酿新一轮攻势分析人士认为,目前大幅震荡意在消化利空预期,政策利好的发酵,将利于后市企稳上周沪深两市冲高后回落,上证指数最高冲至2079.55点,深证成指则摸高至7318.75点,最终在创业板指和中小板指的回落带动下回落,最终上证指数收...

  • 我国养老体系养老床位增长10
    我国养老体系养老床位增长10

    在今天召开的发布会上,民政部发言人陈日发介绍说,截至3月底,全国各类养老床位合计达到584万张,同比增长19.7%。截至3月底,全国各类注册登记的养老服务机构31833个。机构、社区等养老床位合计达到584.0万张,其中社区留宿和日间照料床位197.3万张。目前,每千...