Menu
帮助中心

帮助中心

专注网站建设12年,已为2600家公司提供网站建设
您当前所在位置:首页 > > 信息中心 > 帮助中心

建站基础之提高页面可访问性的实践

建站基础之提高页面可访问性的实践

Web内容无障碍指南(WCAG)2.0定义了如何使web内容更便于残障人士访问。它定义了web内容无障碍的四项基本原则,即可感知、可操作、 可理解和健壮性,为了达到这些基本目标,每条原则之下设置了应遵循的准则,对每一个准则,提供了可测试的成功标准。围绕这四条原则,我们此次优化的目标 为:

  1. 增强页面区块和模块的语义。
  2. 提高屏幕阅读器用户的访问效率。
  3. 优化首页的键盘操作问题和信息理解问题。

1.设置“跳过导航”链接,直达用户首要目的地。

社交网络的重要特点就是News Feed,动态地向用户提供好友的各种消息。通常,用户登录网站的首要目的是查看“好友动态”,视障用户tab多次才能到达该区域,“跳过导航”链接允许 屏幕阅读器用户跳过大块的内容和链接,用户访问新页面时也不必每次都浏览banner和导航,这样可以节省视障用户的时间。

2.划分网页区块,增强区块语义,提高区块间跳转的速度。

朋友网的页面结构是标准的三栏结构,大致可归纳为顶部logo、页面导航及搜索区,底部是版权信息,中间左中右三栏分别为:应用导航、News Feed和推荐信息。各区块的信息都较多,尤其是News Feed区,视障用户在各个区域内切换时十分繁琐。

建站基础之提高页面可访问性的实践

解决该问题的一种方法是设置区域定位点,即在各个区域前添加一个仅对屏幕阅读器可见的锚链接,并为该链接设置accesskey。

台湾行政院研考会将这种方法写入了无障碍网站规范中,定位点又称为导盲砖,独创性的使用三个冒号(:::)来表示,主要用来帮助用户快速定位和搜索,代码如下:

<a accesskey="U" href="#" title="顶部区域"> ::: </a>
<a accesskey="L" href="#" title="左侧区域"> ::: </a>
<a accesskey="C" href="#" title="中间区域"> ::: </a>
<a accesskey="R" href="#" title="右侧区域"> ::: </a>
<a accesskey="B" href="#" title="底部区域"> ::: </a>

官方解说title属性值用来方便语音合成器告知用户其所在的网页区域。但笔者使用nvda在IE9和Firefox6中测试以上代码,nvda都不会读title值,即使设置了读出工具提示。

建站基础之提高页面可访问性的实践

键盘可访问性一文中分析了使用accesskey的缺点,由于屏幕阅读器依赖于浏览器的功能,不同品牌和操作系统上的浏览器在实施 accesskey上差别很大,比如激活accesskey快捷键的按键组合不同,对重复的accesskey的处理方式不同,用户代理的键盘快捷键和 web内容快捷键冲突时的表现也不一致。另外一个头疼的事情就是如何让用户了解我们设置了快捷键?加上上述的各浏览器的细微差异,accesskey的利 用率是很低的,所以最后我们没有使用这个方法。

我们的目标是用户学习成本低,网间快捷键一致(不只是站内),会使用屏幕阅读器就能够高效利用我们的网站。

只要使用wai-aria landmark role属性,即可迎刃而解。landmark role帮助屏幕阅读器用户了解页面区块的用途,好快速地位到想要到的位置。使用方便,只要简单的在元素内添加role属性即可,可使用的值有 banner、complementary、contentinfo、form、main、navigation、search。视障用户只要使用屏幕阅 读器的快捷键即可,如NVDA按快捷键d即可在页面地标间导览,这样就保证了网间访问快捷键的一致性,使快捷键访问更加可行。

建站基础之提高页面可访问性的实践

3.强化现行通用模块的书写方式,利用屏幕阅读器的标题导航特性,提高视障用户在模块间跳转的速度。

上面我们把页面划分为若干区块,现在我们来看页面的更小的单元——模块。区块有若干的模块组成,模块可以视为网页中的某一功能或某一类信息的集合, 比如“你可能认识”、“最近访客”。通用模块的书写方式我们借鉴了YUI使用的标准模块格式,这种div和class的通用格式可以很容易地将模块从一个 网页、区块、甚至一个网站移至他处,Web页面已经从文档格式转变为模块的集合。

<div class="mod">
    <div class="hd">
        <h3>Module Header</h3>
    </div>
    <div class="bd">Module content</div>
    <div class="ft">Module footer</div>
</div>

屏幕阅读器一般都提供标题导航的功能,即视障用户按某一快捷键(NVDA为h键)可在各级标题间跳转。我们利用这一特性,就可以方便的在各个模块间 跳转。在实践中,每条feed的结构我们也是按照这种方式来书写的,用户可以先阅读feed的标题,如果不感兴趣可以迅速跳至下条feed, 减少视障用户的键盘操作。

4.降低信息噪音,减少干扰。

将重复信息和为明眼用户提供的信息从屏幕阅读器访问序列中移除。

建站基础之提高页面可访问性的实践

以feed为例,头像链接的作用:

  • 明眼用户快速辨识好友,这对视障用户没有意义;
  • 链接至好友主页,与人名链接的作用一致,作用重复;

为了减少干扰,我们可以使用tabindex=“-1”,将头像链接从屏幕阅读器访问序列中移除。

以上是我们初步优化的部分要点,仍然有许多地方需要优化,如弹出层焦点控制、动态信息通知、组件可访问性等,我们会持续跟进

相关阅读

汇总搜索引擎网站的免费提…

帮助中心 2009-11-15
1,Google免费网站提交入口http://www.google.com/addurl/2,百度免费网站提交入口http://www.baidu.com/se…阅读新闻

网站建设分为几个步骤?

帮助中心 2009-11-01
1.域名注册域名,是互联网上的一个企业或机构的名字,是在互联网上企业间相互联络的网络地址。一个企业如…阅读新闻

网站能干什么?

帮助中心 2009-11-01
例如一个企业在互联网上发布公司简介、新产品信息、产品说明、宣传公司服务、招聘人才等多方面信息。不仅可…阅读新闻

谷歌关闭三个工程办公室 全…

帮助中心 2009-11-01
谷歌周三表示,该公司将关闭三个工程办公室,并在全球范围内裁减约100名员工。据国外媒体报道,谷歌人力资源…阅读新闻

重庆网站制作对企业的帮助…

帮助中心 2023-03-27
作为现代企业的重要组成部分,网站对企业的帮助可以从多个角度进行深度分析:1.品牌形象塑造:网站是企业对…阅读新闻

建设一个网站需要多久

帮助中心 2022-10-17
建设一个网站到底需要多长时间?这要看你的网站具体的功能,要求。根据工作量来确定时间的,一般企业网站功…阅读新闻
返回全部新闻

最新发布

重庆网站制作对企业的帮助…

帮助中心 2023-03-27
作为现代企业的重要组成部分,网站对企业的帮助可以从多个角度进行深度分析:1.品牌形象塑造:网站是企业对…阅读新闻

传统行业如何把握ai人工智…

行业新闻 2023-03-27
传统行业可以通过以下几个步骤来把握AI人工智能的崛起:1.研究AI技术原理和应用场景:了解AI技术的基本原理…阅读新闻

AI人工智能对网站建设行业…

行业新闻 2023-03-27
人工智能(AI)对网站建设行业的影响越来越显著,它可以在自动化方面提供更高效、更准确的解决方案,同时也…阅读新闻

签约重庆韶恒科技有限公司…

公司新闻 2023-03-27
沛宣网络签约重庆韶恒科技有限公司营销型网站建设项目。网站定位:品牌营销型网站建设;企业宣传型网站建设…阅读新闻

福莱雅暖通设备有限公司官…

公司新闻 2023-03-27
热烈祝贺河南省福莱雅暖通设备有限公司官方网站正式上线!网站定位为:全网营销型网站建设。网站首页预览:…阅读新闻

祝贺重庆视吉通信工程有限…

公司新闻 2023-03-27
由沛宣网络公司设计开发制作的“重庆视吉通信工程有限公司”官方网站于2023年1月2日正式上线!网站首页预览…阅读新闻

建设一个网站需要多久

帮助中心 2022-10-17
建设一个网站到底需要多长时间?这要看你的网站具体的功能,要求。根据工作量来确定时间的,一般企业网站功…阅读新闻

签约重庆立平物联网科技公…

公司新闻 2022-10-17
公司签约重庆立平物联网科技公司品牌营销型网站建设。网站类型:品牌网站建设、公司营销型网站建设开发周期…阅读新闻

定制型网站到底有哪些好处…

新闻动态 2022-07-18
沛宣网络专注15年网站建设行业,主要以定制型的企业网站;高端网站建设,为客户制作有价值网站。定制网站是…阅读新闻

如何让你的网页设计更漂亮…

帮助中心 2022-07-18
什么样的网页设计能点亮你的眼睛?对你来说,什么是不可思议的网页设计项目?如果你的作品是现代的,简单易用…阅读新闻

网站如何通过设计来保持网…

网站建设中心 2022-07-18
网站设计系统稳定器不是一个框检查或组件建立。相反,它们是对系统的信任和尊重的衡量标准,它们是通过你与…阅读新闻

签约图源建筑设计公司官方…

公司新闻 2022-07-18
沛宣网络签约图源建筑设计公司网站设计与制作。网站定位为:品牌型网站建设;企业宣传型网站建设;H5响应式…阅读新闻
返回全部新闻
友情链接:
  • 企业网站建设
  • 营销型网站建设
  • 手机网站建设
  • 模板网站建设
  • H5网站建设
  • 网站改版升级
  • 重庆网站建设
  • 模板网站建设
  • 公司简介
  • 成功案例
  • 解决方案
  • 新闻中心
  • 联系我们
  • 网站地图
  • XML
  • 万州网站建设
  • 江津网站建设
  • 永川网站建设
  • 合川网站建设
  • 北碚网站建设
  • 黔江网站建设
  • 涪陵网站建设
  • 南川网站建设
  • 铜梁网站建设
  • 璧山网站建设
  • 大足网站建设
  • 綦江网站建设
  • 长寿网站建设
  • 开州网站建设
  • 潼南网站建设
  • 武隆网站建设
  • 奉节网站建设
  • 荣昌网站建设
  • 梁平网站建设
  • 城口网站建设
  • 云阳网站建设
  • 巫山网站建设
  • 丰都网站建设
  • 垫江网站建设
  • 秀山网站建设
  • 酉阳网站建设
  • 忠县网站建设
  • 石柱网站建设
  • 彭水网站建设
  • 巫溪网站建设
  • 万盛网站建设
  • 巴南网站建设
  • 江北网站建设
  • 南坪网站建设
  • 九龙坡网站建设
  • 沙坪坝网站建设
  • 大渡口网站建设
  • 毕节网站建设
  • 安顺网站建设
  • 六盘水网站建设
  • 铜仁网站建设
  • 黔东南网站建设
  • 黔南网站建设
  • 黔西南网站建设
  • 遵义网站建设
  • 昆明网站建设
  • 曲靖网站建设
  • 昭通网站建设
  • 绵阳网站建设
  • 自贡网站建设
  • 攀枝花网站建设
  • 玉溪网站建设
  • 保山网站建设
  • 丽江网站建设
  • 临沧网站建设
  • 大理网站建设
  • 普洱网站建设
  • 拉萨网站建设
  • 日喀则网站建设
  • 昌都网站建设
  • 林芝网站建设
  • 山南网站建设
  • 那曲网站建设
  • 阿里网站建设
  • 宝鸡网站建设
  • 汉中网站建设
  • 铜川网站建设
  • 咸阳网站建设
  • 渭南网站建设
  • 安康网站建设
  • 延安网站建设
  • 商洛网站建设
  • 榆林网站建设
  • Copyright © 2008-2018 沛宣网络 渝ICP备13000588号-5 工商备:500108000067794 渝公网安备 50010802002673号

    扫描二维码添加微信:沛宣网络
    确 认