加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

《网页设计综合指南》(三):移动适配、无障碍设计等

发布时间:2017-12-20 04:27:03 所属栏目:建站 来源:人人都是产品经理
导读:副标题#e# 注:设计师和开发人员在构建网站时,需要考虑很多事情,从视觉外观到功能设计。为了简化这个过程,我们准备了这个指南。限于篇幅限制,将这一指南分为三部分,此为第三部分内容。 前两篇: 《网页设计综合指南》(一):网站地图优化篇 《网页设

表单中仅使用颜色表达提示信息是常见的方式。成功和错误消息分别以绿色和红色显示。但是红色盲和绿色盲是色盲群体中最多的。大多数情况下,你能接收到错误信息,比如“这段文字被标红”。看起来没什么问题,但是对色盲用户在这种形式下无法接收到错误信息。颜色应该是突出或补充已经看得见的信息。

《网页设计综合指南》(三):移动适配、无障碍设计等

不好:这种形式仅仅依靠红色和绿色来表示字段有没有错误。色盲用户是无法识别的。

在上面的表格中,设计师应该给出更具体的说明,比如“您输入的电子邮件地址无效”或者在需要注意的地方显示图标。

《网页设计综合指南》(三):移动适配、无障碍设计等

好:图标和标签显示哪些字段无效,更好地将信息传递给色盲用户。

4.3 盲人用户

图片和插图是网页的重要组成部分。但盲人需要屏幕阅读器等辅助技术来翻译网站。屏幕阅读器依靠于图像的替代文本来“读取”图像。如果该文本不存在或者描述不清晰,他们将无法按照预期获取信息。

考虑两个例子 – 第一,Threadless,一个流行的T恤店。这个页面并没有多少关于正在销售的商品的信息 。唯一可用的文本信息是价格和大小的组合。

《网页设计综合指南》(三):移动适配、无障碍设计等

第二个例子来自ASOS。同样销售T恤的页面为该商品提供了准确的替代文字。 这有助于使用屏幕阅读器的人想象商品的外观。

《网页设计综合指南》(三):移动适配、无障碍设计等

为图像创建替代文本时,请遵循以下指南:

  • 所有“有意义”的图像都需要描述性的替代文字。(“有意义”的照片指为上下文提供补充性信息)

  • 如果图像纯粹是装饰性的,没有提供帮助用户理解页面内容的有用信息,则不需要代替文本。

4.4 键盘适配

某些用户使用键盘而不是鼠标浏览网站。例如,运动障碍的人在使用鼠标这类精细的运动时有困难。通过将交互式元素适配Tab键,并显示键盘指示符,使交互式和导航元素可以被这类用户轻松访问。

键盘导航的基本规则:

  • 检查键盘指示符是否可见和明显。 一些网页设计师会删除键盘指示符,因为他们认为不美观。但这阻碍了键盘用户正确地与网站交互。如果您不喜欢浏览器提供的默认指示符,请不要全删了它; 相反,设计它来满足你。

  • 所有的交互元素都应该可以通过键盘访问,而不仅仅是主要的导航选项或主要的CTA。

您可以在W3C的“WAI-ARIA Authoring Practices”的文件中“设计模式和小工具”部分中找到有关键盘交互的详细要求。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读