我们收集了改善网站可访问性的10个技巧,以确保您的网站对所有人(包括残障人士)友好。W3C和万维网负责人蒂姆·伯纳斯-李(TimBerners-Lee)发表了一份报告,他在报告中说:“网络的优势在于它无处不在”。作为以网站为生的人,我们有责任确保每个人都可以访问它们。Web可访问性听起来很高端,但实际上比听起来容易得多。我们的十项Web可访问性建议旨在对所有网站通用。这不仅有助于正常的用户体验,还可以改善慢速互联网连接时的浏览体验。我们按时间顺序对指南进行了排序,以便您清楚地了解沿途需要做什么。当您遇到类似问题时,可以参考我们的指南。首先:什么是Web可访问性?根据W3C,WebAccessibility意味着每个人都可以感知、理解、浏览、交互和贡献Web。在这方面,Web可访问性包括影响Web访问的所有条件,包括视觉、听觉、身体、语言、认知和神经障碍。您会在Web上找到一些关于这个主题的内容,如果您对这个主题感兴趣,您应该更深入地研究WebAccessibilityInitiative(WAI)。考虑到这一点,我们的指导方针如下:1.不要依赖颜色颜色是我们经常用来表达情感和在网络上传达信息的强大工具。但是,我们不应该以颜色的形式向用户传达我们所有的想法和信息。为什么?例如,众所周知,绿色表示“正确”,红色表示“错误”,但是当我们将其用作唯一的交流方式时会发生什么呢?色盲是最常见的视力缺陷之一。它影响了全球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=""。屏幕阅读器告诉用户一个
标签是一张图片,所以不用说这是XX的图片,直入主题。图片的作用与其所代表的意义一样重要:如果您的徽标链接到您网站的主页,那么您的替代文本应该是“主页”而不是“徽标”。替代文字不仅仅与可访问性有关。有时,连接速度较慢的用户会禁用图像以获得更快的浏览体验。每当你写你的alt属性时,想想这些用户!但并非您网站上的所有图片都是img标签,对吗?你可能有一个或两个SVG......或者整个SVG图标系统。我们如何让所有人都能访问SVG?幸运的是,我们可以看到可缩放矢量图形标准满足了我们的需求!为了描述我们的向量,我们使用和标签进行简短和详细的描述。语言图标更长的描述符号>4。为您的视频添加字幕这可能是WCAG实施起来最困难的指南之一,不是因为技术上的困难,而是因为它可能很耗时。有几种方法可以做到这一点:让我们以YouTube为例。将视频上传到平台后,您可以启用隐藏式字幕。这些是自动生成的,在某些情况下可能会导致不准确,具体取决于语言、背景噪音或说话者的口音。但是,这些很容易实现,并且适用于大多数英语视频。如果我们正在寻找100%准确的字幕,很难相信YouTube可以提供,所以我们必须自己编写字幕或聘请第三方来完成。YouTube将采用最常见的字幕格式(.srt、.sub和.sbv),让我们在平台本身上输入字幕。如果我们没有字幕软件,或者我们希望社区帮助我们翻译内容,但又不想将我们的平台账号提供给社区。但也许您不想使用YouTube作为您的平台。也许您想使用服务器上托管的HTML5视频。嗯,恰逢其时,HTML5包含