下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922
论坛 >编程语言 >提高网页可访问性的十条建议(一)

提高网页可访问性的十条建议(一)

希尔瓦娜斯发布于 2017-09-25 09:40查看:585回复:1

        这十条网页可访问性准则旨在确保所有网站都是通用的。

        这不仅能帮助屏幕阅读器用户,而且还能改善浏览体验,以减缓连接速度。我们已经按照实施时间对我们的指导方针进行了排序,让您清楚地了解在这个过程中需要付出多大的努力。在你不知所措之前,请相信我的话,这是值得的。

     什么是网页可访问性?

        根据W3C的说法,Web可访问性意味着每个人都可以感知、理解、导航、与Web交互,并为Web做出贡献。在这方面,网站的可访问性包括所有影响网站访问的条件,包括视觉、听觉、物理、语言、认知和神经功能障碍。

        你会在网上找到很多关于这个话题的内容,如果这个话题让你感兴趣的话,你应该更深入地了解网站可访问性倡议(WAI)。

        考虑到这一点,以下是我们提出的十条提高网站可访问性的建议。

     不要依靠颜色

        颜色是一种强大的工具,我们经常用来表达情感和在网上交流信息。然而,我们不应该把所有的信息都用颜色来传达,用来表达我们的用户的意思和信息。

        为什么?

        例如,人们普遍认为绿色意味着是正确,红色意味着错误,但是当我们把它作为我们唯一的沟通方式时,会发生什么呢?

1506303264131189.png

        色盲是最常见的视力缺陷之一。全球人口总数大约有4.5%的人有这方面的缺陷(这个用户量已经超过了IE11用户数量)。

        如果我们用户界面中显示的重要信息只使用颜色来传达,那么也意味着全球将有4.5%的人受影响。

        颜色应该只是错误或确认信息的补充,但不能成为我们使用的唯一工具。为了确保我们的重要信息能够触达到所有的用户,我们应该要在表单中添加标签或图标来填充正确的信息。

1506303303677042.png

        Caniuse.com提供了一个非常有趣的解决方案,它提供了一个替代颜色调色板的兼容列表:

1506303366952235.gif

        在设计时检查颜色的识别力和对比是比较理想的,所以要确保你和你的设计团队有正确的工具。我们强烈推荐使用Sketch的Stark插件,可以帮助你设计可访问性!

     不要阻止放大

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

        其中maximun-scale=1.0就是幽灵之一,它让移动设备的网页无法放大。

image.png

        在欧洲和亚洲,散光影响着30%~60%的成年人,但模糊的视觉会影响到所有年龄和民族的人。

        放大的能力不仅仅是一个WCAG指导方针,而是日常生活中一个简化的工具。所以下次你在建立一个响应式网站的时候,要考虑到视力模糊的人群,比如我们的妈妈。

        除了让用户可以自由地在移动设备上缩放之外,还要记得检查PC端浏览器上高达200%的放大特性。

     重新重视alt属性

        不管你制作网站多久,你可能会惊讶地知道下面这些关于alt属性的建议:

      alt属性是img元素的一个强制性属性,但是alt的属性值是空的话完全有效。如果图像是装饰的或者没有必要的阐述页面的内容,那么你可以简单地使用alt=""

      屏幕阅读器会告诉用户img是一个图像,其中alt的值告诉用户这个图片表达的内容

      图像的功能和它的含义一样的重要,如果你的网站Logo链接到你的网站的主页,那么imgalt的属性值应该是“首页”,而不是“Logo”

      图像替换文本不仅仅是关于可访问性的。有时候,对于网络慢的用户为了提高浏览器的检验(更快)会禁用网页的图像。对于这些用户群体,你就需要记得给imgalt属性添加对应的属性值


但不是所有的图片都是使用img元素,对吧?你可能会用一个两个SVG或者一套SVG图标。

我们如何让每个人都能访问SVG?幸运的是,SVG(Scalable Vector Graphics)标准已经覆盖面已经很广!为了描述我们的SVG,我们可以使用元素来进行简述和详细的描述。

image.png

        这可能是WCAG最麻烦的原则之一,这不是因为技术上的困难,而是因为它可能是费时的。不过有一些方法可以做到这一点:

        让我们以YouTube为例。一旦你在这个平台上上传了一个视频,你就可以启用关闭标题。这些都是自动生成的,可能在某些情况下是不准确的,这取决于语言、背景噪音或说话人的口音。不过,这些都很容易实现,而且在大多数讲英语的视频中都能很好的工作

        如果我们很难看到百分百准确的标题,很难相信YouTube会有好的复制,所以我们必须自己写标题,或者雇佣第三方人员来做。如果我们不用任何字幕软件,或者我们希望我们的社区帮助我们翻译内容,YouTube将采用最常的副标题格式(.srt.sub.sbv)以及让我们在平台上写副标题。而不让管理员访问我们的账号,这将是非常方便的

1506303584978005.png

        

        也许你不想把YouTube当作你的主机平台。也许您希望在你的服务器上使用一个HTML5视频。HTML5有一个标签,可以使用它方便让你添加你喜欢的标题和字幕软件,你可以使用你喜欢的WebVTT(翻译FTW)

  • image.png


收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • 酸酸~甜甜
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 课课家技术团队1
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: