网站建设资讯

NEWS

网站建设资讯

互联网面向所有人:使你的网站更易访问的6条tips

《美国残疾人法案》(ADA)的周年纪念日刚过去不久,本次纪念日将无障碍主题带入了讨论的最前沿,尤其是在科技相关的话题方面。似乎很多开发人员都将Web可访问性标准放在一边,只作为锦上添花的补充部分,而不是从一开始就提出严格的要求。

创新互联服务项目包括宜秀网站建设、宜秀网站制作、宜秀网页制作以及宜秀网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,宜秀网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到宜秀省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

然而,在美国,有四分之一的成年人都被认定为有残疾,因此这种疏忽可能意味着,如果你不采取某些措施来确保所有人都能访问该网站,那么很多人可能都会在使用你的产品时遇到困难。除了可能造成潜在客户流失外、导致诉讼和不良新闻之外,以人为本、心怀善意也同样重要。

我们汇总了一些简单的步骤,可以通过践行它们来使网站更易于访问,但是请注意,这绝不是一份详尽的清单。由于存在多种类型的残疾,例如视觉、听力、身体和认知障碍,因此还需要解决多种类型的可访问性问题。

《Web内容可访问性指南》(WCAG)概述了网站可访问性的 4 条原则:

·可感知的:用户必须能够使用一种或多种感官以某种方式感知它。

·可操作的:用户必须能够控制UI元素(例如,按钮必须以某种方式可单击——鼠标、键盘、语音命令等)。

·可以理解的:内容必须对其用户易于理解。

·强大的:内容必须使用公认的Web标准进行开发,并且现在和将来都将在不同的浏览器上运行。

1.对所有图像使用替代文字

对于视障人士来说,替代文字或“替代文本”对于使用屏幕阅读器查看网站很有帮助。替代文本用于描述图像,最好是深度描述,以便让用户清楚了解他们无法可视化的内容。例如:

另外,替代文字还可以代替因某种原因而无法加载的图片,从而优化网站的搜索引擎。

2.使用语义HTML和ARIA角色

在编写HTML时,不要对页面的所有部分使用

,而是尽可能使用可用的语义HTML元素,例如

这是随附的CSS:

.skip-to-content{position:absolute;top:-1000px;}

4.使用rem或em代替px

当用户需要将其浏览器设置调整为默认的较大文本大小以实现视觉可访问性时,可以期望在不破坏UI的情况下扩大页面上的文本。如果文字是以像素或px编码的,则大小和行间距将无法正确响应,因为它们是固定尺寸,并且文字会很小。

这是来自24a11y.com的示例,其中相同的文本仅以px,rem / px和rem编写。如你所见,当用户将其默认浏览器字体设置更改为“非常大”时,px中的第一个示例不会响应大小更改:

由24a11y.com提供

这样并不是很方便。在第二个示例中,使用px设置行高,可以看到行之间的间距保持不变,从而导致文本显得混乱并且难以阅读。如果像上一个示例那样使用rem或em来调整文本大小,用户将体验到更好的结果,因为这些格式本质上都是可伸缩的。

5.请勿改动对焦功能!

那些手部或手臂有身体残疾的用户可能无法使用鼠标来浏览网站,对于这些用户,他们可能仅依靠键盘在屏幕上导航,这就是默认焦点功能发挥作用的地方。按Tab键,则将看到元素自动以蓝色轮廓高亮显示,指示当前在哪个元素上。

一些开发人员可能认为该功能在视觉上对他们的工作没有吸引力,因此将其关闭,但是如果没有明确指出使用者在页面上的位置,那么依赖此功能的人将如何享受其用户体验呢?

所以,如果出于任何原因必须进行调整,请确保仍在为用户提供清晰可见的页面位置指示。

由Dockyard提供

6.保持色彩对比度

对于色盲或其他难以区分颜色的用户来讲,重要的是要保持较高的色彩对比度。WCAG指南要求文本和背景色的低符合率为4.5:1,增强等级的低符合率为7:1。对于较大的字体大小(如标题),最小值为3:1,增强型为4.5:1。可以检查颜色选择,以确保它们符合WebAIM.org之类的网站。

这是一个符合WCAG的出色色彩对比度的示例,它通过了增强的评级:

由WebAIM.org提供

除了选择合适的颜色对比度之外,另一种做法是包含文本或图标以指示“成功”或“错误”消息,而不是仅仅使用绿色或红色进行通信。对于有色盲的人,这些颜色可能特别难以区分。

这绝不是一个可以称得上详尽的清单,只是一个接触Web可访问性的开始。作为开发人员,请确保你的产品对所有人都是可访问且具有包容性的。毕竟,互联网面向所有人开放。


文章标题:互联网面向所有人:使你的网站更易访问的6条tips
当前地址:http://cdweb.net/article/cjscjs.html