资讯专栏INFORMATION COLUMN

10条提高网站可访问性的建议

snifes / 2098人阅读

摘要:我们收集了条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。的可访问性的经验我们尝试着不断地测试我们的工作。

我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。

W3C和万维网的负责人Tim Berners-Lee发表了一篇报道,他说:“网络的力量在于它的普遍性”。 作为通过网站谋生的人,我们有责任确保每个人都能访问他们。 Web可访问性听起来很高端,但它实际上比听起来容易得多。

我们的十个网络可访问性建议旨在确保对所有网站都是通用的。

这不仅有助于正常的用户体验,而且还可以提高网速比较差的时候的浏览体验。 我们已经按照时间顺序对我们的指南进行了排序,以便您清楚地了解在每个过程中需要做的措施。 当你遇到类似的问题的时候,你可以参照我们的指南。

第一件事:

Web Accessibility是什么?

根据W3C,Web Accessibility意味着每个人都可以感知,理解,浏览,交互和对web贡献。 在这方面,Web Accessibility包括影响网络访问的所有条件,包括视觉,听觉,身体,言语,认知和神经障碍。

您将在网络上找到关于此主题的一些内容,如果此主题感兴趣,您应该更深入地介绍Web Accessibility Initiative(WAI)。

考虑到这一点,这里是我们的指导方针:

1、不依赖于颜色

颜色是我们经常用来表达情感和在web上传达信息的强大工具。 但是,我们不应该把我们所有的想法和信息都以色彩的形式传达给用户。

为什么?

例如,众所周知,绿色意味着“正确”,红色意味着“错误”,但是当我们将其用作沟通的唯一手段时会发生什么?


色盲是最常见的视力缺陷之一。 它影响了全球人口的4.5%(数量超过了IE11用户,您知道的...)。

如果在我们的用户界面中只通过眼色来传达重要的信息,那么我们是在忽略这占人口4.5%的用户。

颜色应该补充错误或确认消息,但它不能是我们使用的唯一工具。 为了确保我们覆盖所有用户,我们应该添加标签或图标,显示表单中填写的信息是对还是错。

caniuse.com采用了一个非常有趣的解决方案,该解决方案提供了一种替代调色板来显示其兼容性表的内容。

在设计时,理想的方案是检查色盲和对比度,所以确保您和您的设计团队拥有正确的工具。 我们强烈推荐用于Sketch的Stark插件,以帮助您设计可访问性!

2、不要禁止缩放

在响应式的时代,我们可能会犯下一些不负责任的错误。

其中之一是 maximum-scale=1.0 的出现,它禁用使用移动设备放大网页的功能。

散光影响欧洲和亚洲30-60%的成年人,但模糊的视力会影响到所有年龄和国籍的人。

缩放的能力不仅仅是WCAG的另一个准则,而是简化这些人日常生活的工具。 所以下一次你正在建立一个响应式的网站,想想视力模糊的这些人。

除了让用户可以在移动设备上自由缩放外,还要注意,您的布局还需要在缩放多达200%的桌面浏览器上可以正常显示。

3、重新认识alt属性

无论您制作网站多久,您可能都会惊讶地知道这些关于著名但又神秘的alt属性的几个功能。

alt属性是每个img标签必须有的,但空的alt属性是完全有效的。 如果一个图像是装饰性的或者跟页面主题思想没有强关联,你可以简单的使用alt =“”。

屏幕阅读器告诉用户,一个 4、为您的视频添加subtitle和captions

这可能是WCAG实现的最困难的准则之一,而不是因为技术上的困难,而是因为它可能是耗时的。 有几种方法可以完成这项工作:

我们以YouTube为例。 将视频上传到平台后,您可以启用封闭字幕。 这些会自动生成,并且在某些情况下可能会导致不准确,这取决于语言,背景噪音或扬声器的口音。 然而,这些都很容易实现,并且可以在大多数讲英语的视频上运行良好。

如果我们正在寻找100%准确的字幕,很难相信YouTube能够提供,所以我们必须自己写字幕或雇用第三方来做到这一点。 YouTube将采用最常见的字幕格式(.srt,.sub和.sbv),并让我们在平台本身上输入字幕。如果我们没有字幕软件,或者我们希望社区帮助我们翻译内容,但是并不希望对社区提供我们的平台账号。

但也许您不希望使用YouTube作为您的平台。 也许您希望使用服务器上托管的HTML5视频。 那么正好,HTML5包括标签,您可以使用它来轻松地使用WebVTT格式(翻译FTW!)轻松地附加尽可能多的字幕和字幕文件。

5、语义=可访问性

字体标记,记得吗? 我希望你最好不要记得那些是黑暗的时代。

尽管普遍认为,HTML5并不是本来就带有语义化的。 但是自从第一个HTML页面以来,他们一直在与我们在一起,并从此大大改善。 随着HTML5标准,引入了新的语义标签。

好的,但语义化标签是不是仅仅为了SEO?

并不是的。 当您通过

选择

标签时,您是在有意识的更改元素的含义,提供层次结构,并构建页面信息的树结构。

屏幕阅读器不会忘记这一点。 事实上,语义是其最有用的武器之一。

请记住,能力越大责任越大,所以请确保为每个元素使用正确的语义标签,从h1到全新的主标签。

6、使用正确的标记

接上前一个点,想和大家讨论一些事情

Time vs. Datetime

使用ISO8601标准来表示日期和时间元素显示许多类型的日期格式,时区和一段时间。

Datetime是一个可选属性,可以帮助表示

 Hours and minutes
 Year and month
 Time zones
 Harry Potter 2 Duration

CSSConf Argentina took place on

Del and Ins

web不断变化,但不需要忽视这些更改。 我们可以使用ins和del HTML标签与datetime属性组合来标记编辑。

ins元素代表文档的一个补充:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/56724.html

相关文章

  • 阿里云前端周刊 - 第 20 期

    摘要:网页可访问性似乎是一项艰巨的任务,但它确实比听起来要容易很多,这十条网页可访问性准则旨在确保所有网站都是通用的。 推荐 1. 阿里电商架构演变之路 https://yq.aliyun.com/article... 首届阿里巴巴中间件技术峰会上,阿里巴巴中间件技术部专家唐三带来阿里电商架构演变之路的演讲,本文从阿里业务和技术架构开始引入,分别分享了阿里电商从1.0到4.0架构的演变之路,...

    Baaaan 评论0 收藏0
  • 阿里云前端周刊 - 第 20 期

    摘要:网页可访问性似乎是一项艰巨的任务,但它确实比听起来要容易很多,这十条网页可访问性准则旨在确保所有网站都是通用的。 推荐 1. 阿里电商架构演变之路 https://yq.aliyun.com/article... 首届阿里巴巴中间件技术峰会上,阿里巴巴中间件技术部专家唐三带来阿里电商架构演变之路的演讲,本文从阿里业务和技术架构开始引入,分别分享了阿里电商从1.0到4.0架构的演变之路,...

    崔晓明 评论0 收藏0
  • 关于BOOTSTRAP的整理和理解

    摘要:规范名称定义,便于维护。譬如关于的定义在格式化的中会声明为,而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和,其中的最新版本是的最新版本。 随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我...

    amc 评论0 收藏0
  • 关于BOOTSTRAP的整理和理解

    摘要:规范名称定义,便于维护。譬如关于的定义在格式化的中会声明为,而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和,其中的最新版本是的最新版本。 随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我...

    Tony_Zby 评论0 收藏0
  • 关于BOOTSTRAP的整理和理解

    摘要:规范名称定义,便于维护。譬如关于的定义在格式化的中会声明为,而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和,其中的最新版本是的最新版本。 随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验。作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我...

    zeyu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<