01
写在前面作为设计师我们必须对我们创造的产品负责任，在传统的本科教育和研究生课程以及一般课程中并没有正式训练学生去提高他们构建可用性产品的能力，开发人员也很难在工作过程中接受这样的训练。在这个领域大多是一些自学成才的人，或者从其他领域转行过来学习的人。尤其是在无障碍领域，这种相关的训练和研究更是少之又少，所以十分有必要参加关于这一主题的专门课程，以便掌握更好的做法。考虑到这些问题，我作为一个专门从事可用性设计的设计师，我将把自己的经验分享个给大家，确保每个读者学有所获，尤其是在无障碍领域，这真的对于一个产品来说十分重要。在web端的无障碍设计中，我们的责任比视觉设计更加重大，需要仔细地考虑每一个步骤应该怎么做，怎么更好得帮助用户使用这个产品，下面我将用一个web网页如何做可用性设计的案例来将我的经验传授给大家。
02
提高培养同理心的意识为什么我们要努力提高我们的同理心呢？在实际工作中，开发可交付的产品并不是很复杂，但是在前期如何定义这个产品对于我们来说十分必要，因为一个好的定义和明确的方向更有助于我们开发它。尤其是为无障碍用户进行设计时，可能我们需要设身处地的考虑他们的使用场景和痛点需求。比如我们为屏幕阅读器用户设计出很独特的导航系统，可能我们全球的盲人用户就会切实感受到这其中的便利。
模拟场景以培养同理心设身处地为他人着想，或者至少经历某些和用户同样的处境，才会有助于我们产生同理心并理解某些需求的重要性。当我们开始将可用性设计应用到这些上面时，可能会对我们的设计产生重大影响。比如，在互联网上有一些很好用的小工具、插件、网站或者扩展工具，可以模拟视觉障碍，如色盲和青光眼等。当我们应用这些工具时，我们就可以很好的感受到这些障碍患者在使用一些产品时，是处于一种怎样的状态下了。!Image用于模拟色盲类型的Chrome扩展程序如何测试无障碍web端产品的可用性和其他类型的导航一样，我们需要测试滚动滑轮来实现网页滑动的可用性。在测试无障碍web网页时，我们需要使用 TAB 和数字小键盘的方向键，甚至使用屏幕阅读器来做可用性测试。特别是要注意测试在 Mac 、Windows、Linux 不同系统上开启屏幕阅读器的可用性。还要明确为用户指出下载它们的位置以及如何在智能手机上开启此功能。为将来可能加入团队的其他人准备教程视频，这样有助于提高我们的团队协作效率。
03
对以往的工作流程做出更改
合理使用一些在线验证工具
在实际工作中我们需要及时验证一些设计是否可行，这可能需要一些用户来进行测试，但是用户并不能随时随地参与到我们的设计中来。我们需要寻找一些好用的在线验证工具来对现有的设计做一些简单的快速验证。
● 在线验证网站 —— 像 WebDev 这样的一些网站允许你进行初步测试以验证页面的代码是否合理有效。测试可用性、页面性能和搜索引擎（SEO）算法非常重要。Wave 工具也会为你提供一些有关辅助功能改进的建议。● 检查元素 —— 开发人员使用的浏览器“检查元素”还提供了一些辅助功能信息，例如颜色之间的对比度是否符合要求。!Image
● Web内容无障碍指南（WCAG） —— 为了确保WCAG合规性，这份指南不仅可以由设计人员使用，还可以由开发人员，质量保证分析师和产品经理使用。你可以根据里面的内容创建测试规则，也可以自己创建新的测试规则。
适当地思考一些替代方案
在无障碍场景模拟过程中，我们要合理考虑残障用户的行为，对现有的方案合理地提出质疑，并思考一些合适的替代方案。比如，残障人士如何对平台进行调整，使其符合他们的需求？或者依赖屏幕阅读器的用户的流程如何更加顺畅，它与没有视觉障碍的用户是相同还是不同？这些问题我们都可以提出，并思考一些其他的替代方案。
对做好的原型进行文档说明
记录下来所交付产品的质量和可用性所需的所有规范标准，可以使用 Figma、Adobe XD、Sketch 或类似工具使用箭头和可视化方案进行说明。!ImageZeplin 工具还可以在设计系统元素的交接方面有很大帮助，因为它允许导入带有不同状态的组件。!Image
除了设计工具之外，还可以使用其他制作说明文档的工具，如Google Docs和Craft，它们可以为每个需求添加一层解释。!Image现在我们已经准备好了基础，创建了布局，并配备了必要的文本说明，后面更重要的是要深入研究产品并用编程代码编写网页。在这个阶段，设计师对HTML语句有基本的了解可以帮助与开发人员工更好地沟通。
正确使用 HTML 语法
正确合理地使用HTML语法是非常重要的，因为屏幕阅读器将一字不差地描述每个元素的功能，这样，盲人用户在使用网站和应用程序时将更加明确界面上到底是什么，而无需依赖视觉线索引导。让我们通过一些例子来理解：使用按钮（button）标签（而不是div或span）来制作按钮，比如下面的“立即购买”按钮。
同样，按照标题标签的层次结构，我们将把各种元素按标题和副标题分组。!Image
菜单和导航一般也应该使用 nav、ul 和 li 标签。!Image!Image
正确使用 HTML 语法
对于不支持文本的视觉元素（例如，仅使用图标和广告横幅制作的照片、表格或按钮），设计人员必须在程序编写的文案中中提供将应用于该图像的 HTML 标记的文本。另外，请记住在语音中自然会出现呼吸停顿的地方添加逗号，以便屏幕阅读器说话发音更自然。!Image!Image!Image
屏幕阅读器也要适当得忽略一些元素的文本描述
屏幕阅读器应忽略装饰性图像、禁用的输入和其他不提供相关信息的元素。用备注指出这些元素哪些可以忽略，以便开发人员可以对读者“隐藏”它们，以防止用户浪费时间。!Image
需要特别描述发生错误时的帮助文本
所有功能都有发生错误的风险，无论是由于互联网断开连接、服务器问题还是用户发送的数据不正确。因此，有必要描述这些错误、诊断和帮助，以解释原因并提供纠正故障的说明。
注意信息阅读顺序
没有视觉障碍的用户的阅读顺序将受到我们将使用的视觉模式的影响。较大和/或粗体文本更容易被注意到，因为正常人的阅读顺序可能并非线性的。 但是，当我们讨论屏幕阅读器用户时，他们的阅读顺序往往是线性的： 用户将按照元素在代码中出现的顺序听到一个又一个元素的描述。这意味着，我们有必要通过页面代码指示读取元素的正确顺序。
元素状态变化也要考虑
在输入某些文本框或者按住按钮时，屏幕上的元素状态视觉上会有所改变，但是对于盲人用户来说他们可能无法从视觉上看到这种变化，根据WCAG必须考虑这种发生这些变化时的状态是怎样的。如果本身的设计系统中已经提供了这些状态，则可以按照规则设计，但如果没有，请在设计师在设计时单独为这些元素状态的改变做出合理的设计。!Image
设备的响应能力和兼容性
在设计无障碍产品的可用性时我们还要考虑用户使用的设备类型和浏览器兼容性。这需要开发人员在不同的浏览器中进行测试，不要忘记平板电脑和手机的水平分辨率，这些分辨率通常与其他设备结合使用，就像身体活动不便的轮椅使用者会用特定的界面显示设备。!Image
WAI-ARIA无障碍网页应用技术
WAI-ARIA是对标准HTML的补充，它主要解决的一个问题：让残障人士能无障碍地访问网页上的动态内容。值得一提的是ARIA适用范围很广，它是W3C的一个标准且一直都在更新，对于IE8+和几乎全部的主流浏览器都做到了良好的支持，而且一些注重体验的网站，对于WAI-ARIA的应用更是普遍。这样讲述对于设计师来说还是有点抽象，不知道有了这种技术具体有什么优势。
想象一下，一个电子商务网站有一个包含数十种产品的列表，而购买按钮只包含文本“购买”。那么使用屏幕阅读器导航的用户大多会使用 TAB 键从一个按钮跳转到另一个按钮，以加快导航速度。这样，这些用户可能只会听到“购买，按钮”、“购买、按钮”、“购买、按钮”，根本不知道购买的是什么，因为它们无法看到图片展示。!Image使用 WAI-ARIA 技术后，可以将该标签将替换仅用于屏幕阅读器的按钮文本（视觉文本将保持不变），因此依赖听觉信息的用户可能会听到“购买 iPhone 14”、“购买 iPhone 13”，这样用户就会清晰地知道页面上到底是什么内容。!Image对WAI-ARIA有充分了解的开发人员将能够添加额外的一些标签，使用户能够获得更愉快的产品体验。
搜索引擎优化（SEO）
搜索引擎优化，也称为SEO，是对内容和网站本身进行处理，以提高其在Google搜索结果中排名的做法。但这与可用性或者说可访问性有什么关系呢？实际上关系很大，谷歌优先考虑可用可访问的网站。在可用性、可访问性方面得分高将排名更高，从而使你的网站对用户更可见，它将出现在搜索结果的顶部位置。我们可以在交接中添加与SEO相关的可用性要求，例如图像描述，页面标题，使用正确的HTML语法等，这会优化我们的设计，也同样让我们的网站更容易被搜索到。!Image
04
拓展思考“ 除了符合无障碍标准之外，你认为产品设计师应该考虑哪些因素，以确保产品为所有人提供最佳体验？”
“ 可以在评论区留言 分享一些成功的无障碍设计产品案例，并阐述为什么这些产品在市场上成功？“
05
书籍推荐&自助领取
《Inclusive Design for a Digital World》是一本关于无障碍设计的指南，作者Regine Gilbert在本书中探讨了如何为所有用户创造可用性和可访问性的数字产品。无障碍设计可以为身体残障者、老年人和那些使用不同技术设备的人提供更好的用户体验。
这本书提供了丰富的实践指南，包括如何设计无障碍数字产品、理解用户需求、使用语义标记和ARIA来提高可访问性、设计易于导航和易于理解的界面、设计具有简单和明确交互的产品等等。此外，书中还介绍了许多无障碍设计工具和资源，以帮助读者在实践中实现无障碍设计。
每个章节都涵盖了无障碍设计的各个方面，从设计的基本原则和过程到特定的设计技巧和工具。以下是每个章节中包含的主要内容：
第1章：介绍了无障碍设计的概念和意义，探讨了如何创造包容性的数字产品。
第2章：讲述了如何理解残障用户，以及如何使用人类中心设计的方法来满足他们的需求。
第3章：介绍了无障碍设计的过程和原则，以及如何将这些原则融入设计流程中。
第4章：探讨了视觉设计和包容性排版的概念和技巧。
第5章：讲述了如何使用颜色对比度和包容性色彩设计来增强可访问性。
第6章：介绍了如何设计可访问的表单，以及如何使用ARIA来改善表单的可访问性。
第7章：讲述了如何设计易于导航和易于理解的界面。
第8章：探讨了如何设计易于交互和理解的数字产品，以及如何使用语义标记和ARIA来提高可访问性。
第9章：介绍了如何设计包容性的音频和视频内容。
第10章：讲述了如何设计可访问和包容性的移动产品。
第11章：讲述了如何测试数字产品的可访问性和包容性，并提供了一些测试工具和技术。
第12章：探讨了如何在数字产品之外的领域中推广无障碍设计和包容性原则。
总之《Inclusive Design for a Digital World》为读者提供了实践无障碍设计的基本知识和实践方法，是一本重要的无障碍设计指南。
（关注公众号，回复后台关键词：无障碍设计指南，即可领取此英文版书籍）
如果你喜欢本篇文章，别忘记为我们点击“在看”或者“分享”～～
加入社群
UXDaily交流群为大家提供交流分享交互设计、用户体验、服务设计、前沿科技与设计相关的优质知识的环境，也鼓励大家分享干货知识，互相交流学习，共同成长进步。
加群通道
往期阅读UXDaily \|设计更具吸引力的用餐体验：用户体验案例研究
UXDaily \| 为什么所有好莱坞UI界面看起来都一样？
UXDaily | 《星际迷航》是否预测了用户体验的未来？UXDaily \| 博物馆一定是无聊的吗？用游戏化的思维设计博物馆体验！
UXDaily \| 新思路！为注意力缺陷障碍 （ADHD） 患者的软件可用性设计！
凝聚前沿设计优质内容更多精彩分享请关注▼
朝菌学园ZhaoDesign
朝菌学园是一家专注前沿、未来、智能设计领域的品牌。包含人机交互设计、服务设计、用户体验设计、互动媒体装置、智能产品设计等学习方向，已经帮助数百名学员取得考研、保研与留学申请的名校录取offer
930篇原创内容
Official Account
，
AABOUT US
参考文章：查看链接 ↗ Vaccani译者：小鸡炖蘑菇为尊重版权和译者转载请联系我们