迅速提升商品的可浏览性的七个标准

摘要: 昨日是星期日,陪着侄子去看看了徐峥的影片《我不会是药神》,影片拍的很具体、很用心、很实际,强忍着泪水还没有哭出去。在济南市企业网站建设企业工作中的我觉得,从影片看...

昨日是星期日,陪着侄子去看看了徐峥的影片《我不会是药神》,影片拍的很具体、很用心、很实际,强忍着泪水还没有哭出去。在济南市企业网站建设企业工作中的我觉得,从影片看出出去的是大家在遭遇日常生活工作压力下安全性感缺少,在太阳直射不上的角落里好似被遗弃,乃至是冷的瑟瑟哆嗦,那麼《我不会是药神》商品中就表述了这一部影片的丰厚看性。

早期看了一个iPhone的宣传策划片《Apple不以大部分人,都不为极少数人》,这一部宣传策划片和《我不会是药神》的人群很相近,非常容易被别人忽略的冷门人群便是大家今日的关键目标。

数据商品的可浏览性是搭建能够普遍群体应用的数据內容和运用的实践活动,包含具备视觉效果,健身运动,听觉系统,語言或认知能力阻碍的本人。

使网站为全部人设计方案,被别人过多神话传说了,觉得那般做既艰难成本费也高,但具体上并不是这般。从设计方案前期就刚开始考虑到商品可浏览性,客观事实上,其实不会提升附加的作用或內容,因此都不应当会出现附加的成本费和勤奋。

可是,要修补一个早已没法浏览的网站将会就必须费一番活力了。 我之前在 Carbon Health 工作中时,大家应用 AXE 软件来查验了网站的可浏览性。 大家发觉仅在首页上就2八个违反规定个人行为必须处理。 虽然听起來很繁杂,但大家发觉这种难题其实不无法改正,仅仅必须花销一些時间和成本费来剖析这种难题,最终类似几日时间大家就所有处理了。

我觉得共享一些大家曾使用过的简易流程,来改进你的网站可浏览性。这种标准将偏重于于网站和手机端。

在刚开始以前,先来谈一谈为何做这种提升太重要。

一、为何设计方案必须考虑到可浏览性?

做为设计方案师,大家有工作能力和义务保证每一个人都能浏览大家设计方案的內容,不管其工作能力,情况或应用情景怎样。 搞好商品可浏览性能够为每一个人产生更强的感受。

英国有超出5六百万人(近五分之一)和全球超出十亿残废人。 在17年,有814起网站可浏览性起诉在联邦政府宦游人民法院提到。仅这二项数据信息便可以要我们坚信设计方案能用性的关键性。

可浏览性也有一个非常好的商业服务实例:剖析说明,可浏览的网站有更强的检索結果,可以遮盖大量的受众群体,对 SEO 友善,免费下载時间迅速,而且还激励应用更强的编码构造,她们也一直会出现更强的能用性。

下列提到的七个层面是非常容易保证,能够协助你的商品更贴近考虑 Web 內容可浏览性标准(WCAG 2.0)AA级规范。同时提议最好也去剖析下最经常用的輔助作用 包含显示屏阅读文章器,显示屏变大器和视频语音鉴别专用工具。

1. 提升充足的色调比照度

色调比照是一个常常被忽略的 Web 可浏览性的问题。 假如比照度低,弱视的人难以从情况色调中载入文字。 在有关眼睛视力损害和双目失明的状况表明书里,全球环境卫生机构(WHO)估算有2.17亿人得了中度至中重度眼睛视力阻碍。 因此,考虑到文字和情况中间的充足比照是相当关键的。

依据 W3C 要求,文字两者之间情况中间的比照度应当最少为4.5比1(合乎AA级別)。针对很大和较重的字体样式,比例相对性广泛一些,缘故是他们在较低比照度下也可以非常容易阅读文章。 例如应用的字体样式为18pt或14pt粗字体,则最少比照度将降到3比1。

一些专用工具能够帮你迅速查验。 假如你应用的是 Mac,提议应用比照运用(p>

2. 不可以仅应用色调来区别重要信息内容

如果你在传递关键的事儿、响应姿势或提醒时,不必把色调做为唯一的视觉效果案件线索。弱视或色盲的人将会难以了解你的內容。

试着应用色调之外的标记,比如文字标识或图案设计。 在页面上显示信息不正确时,不必太依靠色调,加上标志或在信息中写上一个题目。 考虑到为文章段落中的连接文字加上视觉效果提醒(如字体样式字体加粗或提升下横线),便于连接能突显显示信息。

假如只应用色调来区别数据信息,那麼具备更繁杂信息内容(如柱状图和曲线图图)的原素就非常难阅读文章。应用别的视觉效果原素来传递信息内容,如样子、标识和尺寸。还能够试着将多种多样方式开展组成,令其差别更显著。Trello 的色盲方式便是一个非常好的事例。开启后,根据加上纹路标识能让网站越来越更非常容易浏览。

一个非常好的方法是将你设计方案的內容以黑与白方式复印出去,看一下你是不是依然能够了解在其中的全部內容。 你要可使用 Color Oracle 那样的运用,它能够即时显示信息具备普遍视觉阻碍的人见到的內容。 这种提醒可协助你保证站点中的信息内容阻碍与色调不相干。

3. 设计方案能用聚焦点情况

你是不是留意到有时候会出現在连接,键入框和按键周边的深蓝色轮廊? 这种深蓝色轮廊称之为聚焦点标示符。 默认设置状况下,访问器应用 CSS 伪类在原素选定时显示信息这种轮廊。 你可以能会发觉这种默认设置聚焦点标示符并不是很美,随后一门思绪的要想掩藏掉他们。 可是,假如你来没了这种默认设置款式,请尽量将其更换为别的內容。

聚焦点标示符可协助大家掌握哪一个原素具备电脑键盘聚焦点,并协助她们在访问站点时清晰自身的部位。 这种全是对视障,必须显示屏阅读文章器,行動麻烦,受过腕管损害及其喜爱这类导航栏的高級客户有效的技术性。乃至大家中的一些人也会应用电脑键盘做为她们访问网页页面的关键方法。

应当能够聚焦点的原素有:连接,表格字段名,小构件,按键和莱单项。 她们必须有一个聚焦点标示符,使他们看上去与周边的原素不一样。

你可以以设计方案一个合乎你网站布局的聚焦点标示符,并与你的知名品牌维持设计风格一致。 建立一个高宽比由此可见的情况,并具备优良的比照度,促使它从别的內容中出类拔萃。

4. 在表格和键入项外加上标识和表明

仅应用占位性病变符文字做为标识是设计方案表格时较大的不正确之一。 当部位比较有限或想让设计方案更简易和当代时,大家将会会要想切合这类发展趋势。 占位性病变符文字一般是深灰色的,比照度不太高,因此难以阅读文章。 假如你像我一样,你一般会忘掉你一直在写甚么,因此一旦文字消退,难以了解这种字段名是啥。

应用显示屏阅读文章器的人一般应用 Tab 键访问表格以绕过表格控制。 依靠原素载入控制, 一般会绕过一切非标准签文字(如占位性病变符文字)。

自始至终协助大家掌握她们应当干什么,并且以一种确立的方式得出。最好标识不容易消退,即便这一人已经键入信息内容;大家不可该丧失她们的创作情况。当设计方案师在她们的表格中掩藏叙述时,客观事实上,是放弃了能用性而追求完美简约。

这类作法其实不寓意着你务必用无须要的信息内容来搞混你的设计方案,仅仅保证出示必需的案件线索。过多的具体指导性文字将会和太少的难题一样。总体目标是确定每一个人会有充足的信息内容来进行她们的每日任务而沒有阻碍。

5. 为照片和别的非文字內容提前准备有效的取代文字

弱视的人常常运用显示屏阅读文章器来「听」网页页面。这种专用工具会将文字变换成视频语音,那样大家便可以在网站在听见英语单词。

有二种方式能够显示信息取代文字:在照片的特性中;在照片自身的情况或自然环境中。

试着叙述照片中产生的事儿,及其它对小故事的关键性,而已不只限因此说「照片」。

假如照片纯碎是装饰设计性的,或是因为左右文早已表述了內容而越来越过剩。 试着加上一个空的特性将使显示屏阅读文章器绕过它。 假如不写一切取代文本,一些显示屏阅读文章器将载入文档名,那样的客户感受会很不尽人意。

Google已经剖析一种图象外挂字幕人力智能化,它可以94%的精确度叙述相片(2016/09/23/Googles-image-captioning-ai-can-describe-photos-94-accuracy)。 这一实体模型是开源系统的,仍在剖析中,期待大家可以看到它不在同的商品中应用。 此外,大家应当在大家的內容中手动式加上叙述图象含意和作用的文字。

6. 以内容上应用恰当的标识

题目,标识內容刚开始的地区。他们是给文字再加的标识,用于界定其设计风格和目地。题目还建立了网页页面內容的层级构造。

大字体大小的题目有利于于阅读者更强自然地理解內容的次序。 一样,显示屏阅读文章器也应用题目标识来阅读文章內容。 那样,弱视的人根据阅读文章內容中的每一个题目来得到网页页面的大概內容。

在开发设计站点时应用适度的构造原素太重要。 HTML 原素向访问器传递他们包括的內容种类,访问器应怎样展现或解决这种內容。 网页页面的部件和构造产生內容树。 载入內容树是显示屏阅读文章器的强劲作用,他们被视障应用,促使她们能够「听」网页页面內容。

歪斜确应用标识会阻拦可浏览性。不必仅将 HTML 标识用以款式实际效果,显示屏阅读文章器根据题目构造(真实的题目,而已不只限因此大字体大小和粗字体款式的文字)按层级构造访问网页页面。 应用你网站的客户能够收听全部题目的目录,按题目种类自动跳转內容,或立刻导航栏到顶尖题目。

7. 适用电脑键盘导航栏

电脑键盘可浏览性是 Web 可浏览性的最重要层面之一。 有健身运动阻碍的人,依靠于显示屏阅读文章器的视障,沒有精准全身肌肉操纵的人,乃至高級客户都依靠电脑键盘来导航栏內容。

假如你像我一样,常常应用电脑键盘上的 Tab 键来访问网页页面上的互动原素:连接,按键或键入项。 大家前边探讨的聚焦点情况出示了当今挑选的部件的可视性化标示器。

如果你访问网页页面时,互动原素的次序太重要,导航栏务必有逻辑性且形象化。 选择项卡次序应遵照网页页面的阅读文章次序:从左往右,从上到下 题目,核心航,內容按键和键入项,最终是页脚。

一个好的作法是仅应用电脑键盘检测你的网站。 应用 Tab 键挑选连接和表格。 应用 Enter 键检测以挑选原素。 认证全部互动式部件是不是可控性且井然有序。 假如你可以以在沒有电脑鼠标的状况下访问全部网站,那麼你的网站就做的非常好了!

最终一点,但并不是不看重要。一定要注意导航栏的尺寸 包含连接的总数和文字的长短。 针对有健身运动阻碍的人来讲,根据长莱单开展转换将会会很艰难。 针对应用显示屏阅读文章器的人来讲,听冗杂的连接将会很不便 尽可能维持简约。 出示 ARIA Landmarks 或 HTML5构造原素将使导航栏更非常容易。

二、跨越这种规则

这七条规则是一个非常好的刚开始,假如你要要做大量的事儿来使你的商品更非常容易浏览,我激励你来做下列一些事:

建立一个可浏览性核查规章制度,应用核查规章制度来明确你的商品是不是与輔助技术性适配并合乎 WCAG 2.0 AA 级別规范。应用核查結果修补难题并开展再度检测。

任职核查员。 你可以以任职你企业的人做常常性的无障核查,能够就是你的 QA 精英团队中的某一人。假如找不着有工作经验的人,你可以以聘请一个外界供货商来做。

让可浏览性变成你设计方案剖析的一一部分。 在做剖析时,认证你有关可浏览性的假定是不是恰当,及其是不是存有一切改善的潜伏机遇。征募残废人将会必须做大量的工作中,请绝不迟疑地联络研究会和小区,大家想要出示协助。

小结

做为设计方案师,大家有义务提倡无障设计方案。拥有它,大家使技术性能为全部人服务,无论她们的工作能力、经济发展情况、年纪、文化教育或地区。

做有义务感的设计方案师,设计方案有使用价值的商品。

能用性:商品是不是非常容易入门,客户可否进行每日任务,高效率怎样,及其这全过程选用户的主观性体会可好,是以客户的视角看来商品的品质。能用性好心味着商品品质高,是公司的关键市场竞争力。可浏览性:Web 內容针对残障客户的可阅读文章和可了解性。

不管客户是不是残障,都得根据客户代理商(User Agent)到访问 Web 內容。因此要提升可浏览性,最先得考虑到各种各样客户代理商 :桌面上访问器、视频语音访问器、移动手机、车载本人电脑上这些。在 Google, 专业聘用了一些残障聘员,来协助提升商品的可浏览性。

打赏主播创作者 关注()



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序搭建