1. 我要软文网首页
  2. 站长新闻

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

声明:文中来自于微信公众号  读芯术(ID:AI_Discovery),创作者: 读芯术,受权爱站网转截公布。

《美国残疾人法案》(ADA)的纪念日刚过去没多久,此次节日将无障主题风格带到了探讨的前沿,尤其是在高新科技有关的话题讨论层面。好像许多开发者都将Web可浏览性规范放到一边,只做为画龙点睛的填补一部分,而不是从一开始就明确提出严苛的规定。

殊不知,在国外,有四分之一的成人都被评定为有残废,因而这类粗心大意很有可能代表着,假如你没采用一些对策来保证 任何人都能浏览该网址,那麼很多人很有可能都是在应用你的商品时碰到困难。除开很有可能导致潜在用户外流外、造成起诉和欠佳新闻报道以外,以民为本、心存真诚也一样关键。

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

大家归纳了一些简易的流程,能够 根据贯彻他们来使网址更便于浏览,可是一定要注意,这决不是一份详细的明细。因为存有各种类型的残废,比如视觉效果、英语听力、人体和认知功能障碍,因而还必须处理各种类型的可浏览性的问题。

《Web内容可访问性指南》(WCAG)简述了网址可浏览性的 4 条标准:

·        可认知的:客户务必可以应用一种或多种多样感观以某类方法认知它。

·        可实际操作的:客户务必可以操纵UI原素(比如,按键务必以某类方法可点击——电脑鼠标、电脑键盘、语音系统等)。

·        能够 了解的:內容务必对其客户便于了解。

·        强劲的:內容务必应用认可的Web标准开展开发设计,而且如今和未来都将在不一样的电脑浏览器上运作。

1.对全部图象应用取代文本

针对视障人员而言,取代文本或“取代文字”针对应用屏幕阅读器查询网址很有协助。取代文字用以叙述图象,最好深层叙述,便于让客户清晰掌握她们没法数据可视化的內容。比如:

    <imgsrc="https://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg"alt="cute wrinkly bulldog puppy standing in the water and lifting his paw,seemingly questioning his life choices"/>

    此外,取代文本还能够替代因种种原因而没法载入的照片,进而网站优化的百度搜索引擎。

    2.应用词义HTML和ARIA人物角色

    在撰写HTML时,不必对网页页面的全部一部分应用<div>或<span>,只是尽量应用能用的词义HTML原素,比如<header>、<main>、<p>、<nav>、<footer>、<button>等。这种原素出示了他们自身的作用,对屏幕阅读器很有协助,由于他们从DOM或HTML构造搜集全部信息内容。

    在撰写词义恰当的HTML时,让电脑浏览器了解它解决的是啥种类的內容,及其这种內容与别的內容的关联。这样一来,輔助技术性具备能够 应用的构造,便于更非常容易进行工作中。

    假如务必应用<div>或<span>,则能够 加上ARIA(輔助富互联网技术程序运行)城市地标人物角色和标识,以出示有关该原素的大量前后文,便于屏幕阅读器与客户开展沟通交流。这种还能够用以向连接和表格(如搜索栏)加上有效的信息内容。比如:

      <form role="search"><!-- search form--><input type="search"placeholder="Search query" aria- label="Search through site content"></form>

      有关应用ARIA也有许多信息内容必须学习培训,MDN文本文档会是一个非常好的起始点(https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)。

      3.容许客户跳到具体内容

      想像一下,你浏览了一个新闻媒体,在网页页面的具体内容上边全是广告宣传、导航条、检索表格、热烈欢迎方法这些。而这时,你要阅读文章的那一篇文章才算是具体内容。

      沒有视力障碍的人能够 迅速绕开别的全部內容,精确定位到文章内容的开始。可是针对应用屏幕阅读器的人而言,她们必须在得到 需要的具体內容以前逐一访问 每一个原素。你可以想像这将是多么的地讨厌和费时间吗?

      为处理这个问题,我们可以在网页页面外建立一个“跳至具体内容”连接,它在网址上不是由此可见的,可是会被屏幕阅读器接受。那样,客户的感受就可以更贴近与视力标准客户的感受,因而也更具有多元性。它是HTML的实例:

        <a href="#content">Skipto main content </a><main id="content"><!-- content goes in here --></main>

        它是随附的CSS:

          .skip-to-content {position: absolute;top: -1001080x;}

          4.应用rem或em替代px

          当客户必须将其浏览器调节为默认设置的很大文字尺寸以完成视觉效果可浏览性时,能够 期待不在毁坏UI的状况下扩张网页页面上的文字。假如文本是以清晰度或px编号的,则尺寸和行距将没法恰当回应,由于他们是固定不动规格,而且文本会不大。

          它是来源于24a11y.com的实例,在其中同样的文字仅以px,rem / px和rem撰写。假如你所闻,当客户将其默认浏览器字体设置更改成“十分大”时,px中的第一个实例不容易回应尺寸变更:

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

          由24a11y.com出示

          那样并并不是很便捷。在第二个实例中,应用px设定行高,能够 见到行中间的间隔维持不会改变,进而造成文字看起来错乱而且无法阅读文章。假如像上一个实例那般应用rem或em来调节文字尺寸,客户将感受到更强的結果,由于这种文件格式实质上全是可伸缩式的。

          5.切勿修改调焦作用!

          这些手臂或胳膊有人体残废的客户很有可能没法应用电脑鼠标来访问 网址,针对这种客户,她们很有可能仅借助电脑键盘在显示屏上导航栏,这就是默认设置聚焦点作用充分发挥的地区。按Tab键,则将见到原素全自动以深蓝色轮廊高亮显示,标示当今在哪个原素上。

          一些开发者很有可能觉得该作用在视觉效果上对她们的工作中沒有诱惑力,因而将其关掉,可是要是没有明确提出使用人在网页页面上的部位,那麼依靠此作用的人将怎样享有其客户体验呢?

          因此,假如出自于任何理由务必开展调节,请保证 仍在为客户出示清楚可见的网页页面部位标示。

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

          由Dockyard出示

          6.维持颜色饱和度

          针对红绿色盲或别的无法区别色调的客户而言,关键的是要维持较高的颜色饱和度。WCAG手册规定文字和背景颜色的最少符合率为4.5:1,提高级别的最少符合率为7:1。针对很大的文字大小(如题目),极小值为3:1,加强型为4.5:1。能够 查验颜色选择,以保证 他们合乎WebAIM.org这类的网址。

          这是一个合乎WCAG的优异颜色饱和度的实例,它根据了提高的定级:

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

          由WebAIM.org出示

          除开挑选适合的色调饱和度以外,另一种作法是包括文字或标志以标示“取得成功”或“不正确”信息,而不是只是应用翠绿色或鲜红色开展通讯。针对有红绿色盲的人,这种色调很有可能非常无法区别。

          这决不是一个能够 称之为详细的明细,仅仅一个触碰Web可浏览性的刚开始。做为开发者,请保证 你的商品对任何人全是可浏览且具备多元性的。终究,互联网技术朝向任何人对外开放。

          本文链接:https://www.yaoruanwen.com/n/385653.html

          版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 yaoruanwen@qq.com 举报,一经查实,本站将立刻删除。
          Copyright© 2009-2020 我要软文网