开云网址·(中国)官方网站如何做网站无障碍及适老化?看这篇就够了现在,互联网对人们生活的影响在不断加大,网络的出现也确实为我们的生活带来了许多便利条件,然而,像老人或残障人士等这部分人群却有时会被互联网“拒之门外”,而这说明了无障碍设计的重要性和必要性。本篇文章里,作者就对网站如何做无障碍、适老化设计进行了总结,一起来看。
我国 60岁及以上的老年人有2.6亿,据第二次全国残疾人抽样调查数据推算,全国各类残疾人总数为8296万人。看到这组数字,大家有什么想法?
我们买菜购物看病几乎都是在网上操作,确实网络给我们带来很多便利的条件,但同时还有部分群体(老人和残障人士)他们使用网络的方式和我们不一样,如果都按照统一标准来设计,那他们就是被拒之门外的用户群体。在设计中考虑到这部分群体,让每个人都可以公平的享受到互联网的便利,这就是无障碍的意义。
在我们日常生活中有很多关于无障碍的标识,例如地铁这样的公共设施中一定会有无障碍通道,电梯里有无障碍电梯,还有路边人行道斜坡,都是为了有行动障碍人士设计的,这些都是生活中的无障碍设计。
现在,我们进入了互联网时代,网络对许多人来说是日常生活中的重要组成部分,但是对于残障群体和老年群体他们很难跟我们一样正常的使用网站,在网络中他们会遇到很多困难,在这个信息化的时代,给我们带来的是便利,可对于他们来说是层层障碍。
实现网站无障碍是指无论你是残疾人、老年人、还是健全人都可以正常的使用网络,为了做到这一点,就要实现网页内容无障碍以及上网使用的辅助软件技术的无障碍。
随着人的寿命越来越长,老年人使用网站的次数也越来越多,为老年用户提供良好的服务成为了一个重要的社会因素。许多老年人的障碍与年龄相关,这些障碍会影响他们使用网络。
听觉障碍 – 包括难以听到较高音调的声音和分离声音,从而难以听到播客和其他音频,尤其是在有背景音乐的情况下。
认知障碍 – 包括短期记忆减少、难以集中注意力和容易分心,从而难以遵循导航和完成在线. 残障人士的网络障碍
许多人可能跟我有一样的疑惑,残障人士是怎么使用电脑的呢?有肢体障碍的人,无法直接用手指敲键盘,可配合头控杆、口含棒等来操作键盘;有听觉障碍的人听不到声音是通过字幕来获取信息的,有视觉障碍的人,需要使用屏幕阅读器朗读屏幕上内容来获取信息。这些都是他们使用电脑以及网络的方式。
视觉障碍:有眼部疾病或者全盲,色盲(难以区分颜色,例如红色和绿色,或黄色和蓝色)低视力人群(视力不佳、只能看到视野的中间、只能看到视野的边缘和模糊的视野)。
无障碍设计不只对残障人士有好处,对每个人都有好处,我们健全人在一些情境下也会出现情境障碍,例如你的近视镜丢失了,导致不能看清楚身边的事物,在地铁嘈杂的环境下不能听到语音信息,或者在开车的时候想找播放音乐又挪不开手,这些都是情境性残疾(situational disability)或暂时性残疾(temporary disability)。
举个例子,网站的读屏功能是为了盲人用户设计的,通过鼠标悬浮的位置读出对应的内容,读屏软件就是他们的眼睛,那老年用户也属于视觉障碍人群,他们也可以使用读屏功能来获取信息,所以无障碍设计的改造就是让老年用户,残障人士以及所有人都能使用的设计方式。
做好无障碍设计首先要考虑到不同用户的需求,在整个设计过程中可以提出一组问题来问自己,做的这个设计是否能满足盲人用户需求,是否能满足肢体障碍者的需求,是否能满足老人的需求,是否能满足听障人士需求等等,通过这些问题,你将更加包容用户的需求,从而为所有人设计更易于访问的用户体验。
虽然颜色对于传达信息很有用,但颜色不应该是传达信息的唯一方式。在使用颜分元素时,还要提供不依赖于颜色的附加标识。
例如,在输入密码无效时,设计上只用带有红色的框和图标表示无效,对于有颜色缺陷的用户或者使用屏幕阅读器的用户来说,并不能很好的获取到信息,甚至可能接收不到信息,我们应该为用户提供多种途径来获取关键信息。可以用颜色加上说明文字的方式,这样看不到颜色的用户也可以通过文字里来获取信息。
确保网站中的交互元素易于识别要做到两点:1、视觉焦点状态可见,2、交互元素的样式和命名保持一致
什么是视觉焦点状态?可以理解为用户当前所在的位置要给一个突出明显的UI视觉样式,让用户明确知道自己当前的位置。
视力正常的鼠标用户可以把光标移动到他们想点击的按钮上,而键盘用户可以使用Tab和箭头键的组合来移动到同一个按钮上。因此键盘用户在操作电脑时,我们要显示出键盘焦点的当前状态,这样用户始终知道它在哪个位置,才能继续操作,这点非常重要。下面是谷歌浏览器用键盘操作时会用蓝色的框UI样式来体现当前的位置。确保所有鼠标可操作的组件都可以通过键盘访问。
相同功能的组件可以复用,样式上保持统一,我们设计网站时命名也要规范,相同的功能命名保持一致,例如网页中的提交搜索按钮和另一个网页中的查找按钮,同样的功能,命名要保持一致。这样对于有认知障碍的人,可以降低理解成本。
网站中导航的作用是对信息进行分类,告诉用户这里有什么,当前的位置在哪,可以到哪里去,让用户可以更高效、准确的在各个模块之间完成操作。不一致的导航设计会给所有用户带来困难和挫败感,尤其是本来就对电脑操作就不是很有信心的老年人以及残障人士。
任何需要填写的字段或表单元素旁边都应该有描述性标签。在从左到右的语言中,标签将位于字段的左侧或上方,而单选按钮或复选框位于右侧。标签和字段之间不应有过多的空间,这样有助于所有用户,尤其是那些有学习障碍的用户可以正确输入信息。
网站中不同的模块会有对应不同的标题,每一个标题之间都应该留有足够的间距,使用空白和邻近使内容之间的关系更加明显。样式标题以对内容进行分组、减少混乱并使其更易于浏览和理解。
这样做的目的是帮助用户了解网页中包含哪些信息以及这些数据是如何组织的。当标题清晰且具有描述性时,个人可以很容易地找到他们正在寻找的信息,然后可以更容易地理解内容部分之间的关系。
考虑如何在不同大小的屏幕中呈现页面信息,例如手机或缩放的浏览器窗口。可以更改主要元素的位置和表示,例如标题和导航,以充分利用空间。确保设置文本大小和线宽以最大限度地提高可读性和易读性。
这部分可访问性的目的是确保非文本的信息可通过文本替代访问,可以通过任何符合用户需求的感官方式(如触觉、听觉或视觉)来呈现它们。当提供替代文本时,信息可以以许多不同的方式呈现。例如开云网址,有视觉障碍的人可以使用合成语音大声朗读替代文本,有听力障碍的人可以显示文本,以便他们阅读。
有采用“智网解析”有接入“互联网信息无障碍云服务”和独立服务系统两种。其中,接入互联网信息无障碍云服务模式,是网站直接引用“互联网信息无障碍云服务”提供的前端解析脚本;独立服务系统至少需要1台服务器来支撑后端服务系统的运行,前端网页也需要引用自身系统的“智网引擎”。
简单来说,在原网站基础上接入第三方无障碍插件,网站就实现了无障碍的功能服务。可以让老人、盲人、弱视、低文化人群等多类访问网站有障碍的人群正常访问网站。像知乎、淘宝、京东都是用的这种无障碍服务。
网站无障碍的功能有读屏专用、声音开关、语速、阅读方式开云网址、配色、放大、缩小、鼠标样式、十字线、重置、固定、说明这几种。基本上都可以满足老年人和残障人士的需求。
网页盲道:网页为用户提供栏目导航、信息区域、文字输入、列表及正文、网站服务等六个类别的信息盲道。
操作引导:网页及时为用户提供网页服务类型、区域所含区域类别及数量、区域快捷定位等人工智能技术服务。
辅助服务:全程提供键盘替代鼠标操作,各类信息区域定位或查询、在线语音阅读文字等无障碍服务。
配色、放大缩小、鼠标样式、十字线、大字幕这部分功能,使用人群:视力、文化及阅读能力低下人士
大多数网站无障碍入口是在网站的顶部导航栏上,固定在网站顶部,网站顶部导航栏是用户进入网站最先看到的位置,放在这个位置可以让用户迅速找到需要的功能,降低用户寻找的时间成本。
少数网站会把无障碍入口放在网站的内容区,例如868公交网和百度首页,放在内容区不好的地方是我点击到二级页面就看不到无障碍入口了,只有在首页时会出现,位置不明显,用户可能注意不到。
目前网站无障碍入口名称有这几种【网站无障碍、切换无障碍、爱心模式、适老化及无障碍、无障碍、辅助功能、进入关怀模式、无障碍浏览等】还有部分网站没有名称只有无障碍的标识。
网站入口的名称是爱心模式、关怀模式、无障碍、适老化及无障碍等,这些都可以联想到这是为老人和残障人士设计的功能,但是名称只是适老化,那残障人士会以为这只是给老年人设计的功能,会不确定对他们是否有帮助。
2021年4月,工信部发布了互联网网站适老化通用设计规范》和《移动互联网应用(APP)适老化通用设计规范》,要求在2021年底完成115个网站和43个APP的适老化及无障碍改造开云网址。其中热门应用淘宝、百度、五大银行都在改造名单中。
京东的无障碍功能,放大缩小配色这些功能都是可以正常使用,重置固定说明退出服务这几个功能这里不多描述。最主要的是为视障人士设计的读屏功能,读取时有延迟且读的不准确,有的内容还不能读取,例如鼠标放在“PLUS会员”上,应该读出“PLUS会员”结果等待能有几十秒读出来的是“京东国际”