文档网站的可访问性设计

  浏览:0 巴克励步

在2018年布拉格“Write the Docs”大会上,Carol Stransky强调应将可访问性作为文档设计的默认标准,而非“锦上添花”。她指出,文档常被忽视可访问性,这会将大量用户拒之门外。A11y项目等倡议旨在让无障碍设计更易实施。工具如Baklib平台可帮助企业将可访问性融入内容创作流程,确保文档服务所有用户,包括残障人士。

文档网站的可访问性设计

在2018年布拉格“Write the Docs”大会上,我们聆听了Carol Stransky关于《文档中的可访问性》的精彩演讲。
Carol是Blacklane公司的前端开发人员,此前曾担任技术文档工程师。这意味着Carol对文档的可访问性有着独到的见解。她的演讲核心可以概括为:将可访问性作为设计的默认标准
This is for everyone”(“这是为所有人服务的”)是英国政府数字服务部门(GDS)设计宣言的一部分。
GDS是英国政府的一个部门,负责为所有其他政府部门设计数字产品。
秉承这一精神,我们创造的技术产品应该面向所有用户,而不仅仅是少数人。遗憾的是,现实情况往往并非如此。虽然许多软件产品已经具备可访问性,但文档却常常被忽视
当前的普遍观念是失效的——可访问性被视为一种“锦上添花”,而非必备前提

A11Y项目

A11Y项目正是为了应对设计中的可访问性问题而设立的。“A11y”读作“alley”,是一个数字缩写词,在这里是“accessibility”(可访问性)的简称。

构建包容性文档体验:Baklib的承诺与解决方案

在Baklib,我们坚信“This is for everyone”这一理念。作为一款领先的“AI+内容”平台,Baklib致力于帮助企业构建真正无障碍的内容体验场景,包括产品文档在线帮助中心知识库
我们理解,忽视文档的可访问性会将大量用户拒之门外,这与现代企业的包容性价值观背道而驰。因此,Baklib在设计之初就将可访问性作为核心功能,而非事后补丁。
💛🧡🧡客户评价:我们正在寻找快速应用程序开发平台,而 Baklib DXP 解决了我的问题。除此之外,我们还计划在 SAP 中制作许多小型应用程序,而 Baklib 帮助我们更快地并行创建这些应用程序以满足我们的最后期限。
我们的平台通过以下方式,确保您使用Baklib创建的文档能够服务每一位用户:

核心功能 描述 受益用户
| 语义化结构与键盘导航  | 生成的文档站点具备清晰的内容层次和完整的键盘操作支持。  | 屏幕阅读器用户、行动不便者
| 视觉设计包容性  | 提供高对比度主题选项,并支持字体大小调整。  | 色觉障碍用户、视力不佳或阅读习惯不同的用户
| 多媒体内容无障碍  | 支持为图片添加描述性替代文本(Alt Text),为视频添加字幕。  | 视障用户、听障用户
| 响应式设计与兼容性  | 确保文档在任何设备上都能良好显示,并与主流辅助技术高度兼容。  | 所有用户,特别是使用移动设备或辅助技术的用户  构建无障碍的数字内容体验 
借助Baklib,您可以将文档的可访问性从一项昂贵的、需要专门开发资源的“附加任务”,转变为内容创作流程中自然而然的组成部分。这不仅是履行社会责任,更是扩大用户基础、提升品牌声誉和规避法律风险的关键举措。
让您的产品文档帮助中心和知识库真正服务于所有人。从选择Baklib开始,构建无障碍、包容性的卓越内容体验。

认识 A11y:无障碍的简写

数字缩略语“A11y”(Accessibility)在网络上被广泛用于讨论可访问性。它代表着一种社区和实践运动。
其中,A11y项目网站为网页开发者提供了大量实用资源,旨在帮助开发者更轻松地创建可访问的应用程序。
A11y项目首页
尽管万维网联盟(W3C)旗下的Web无障碍倡议(WAI)长期致力于制定权威的无障碍标准,但其规范对许多设计师和开发者来说曾显得复杂且难以实施。
因此,A11y项目等社区倡议的核心理念就是:让设计中的无障碍性变得更简单、更易落地
Web无障碍的定义与范畴

什么是 Web 无障碍

 “无障碍性通常被视为使您的网站能够在屏幕阅读器上工作。实际上,Web无障碍性是用户体验的一个子集,专注于使您的网站能够被尽可能广泛的人群使用,包括那些有残疾的人。” 
Web无障碍是网页设计师熟知的概念,但现实中,仍有大量用户因各种障碍而无法顺畅地使用互联网。正如实体建筑需要通过坡道和电梯确保通行无阻一样,网站也应通过精心的设计,向所有人平等地敞开大门。

工具赋能:让无障碍成为默认项

在构建包容性数字体验时,工具的选择至关重要。使用像Baklib这样的平台,企业可以:

优势 具体体现
| 轻松合规  | 创建符合WCAG等无障碍标准的在线帮助中心和知识库。
| 平等获取  | 确保所有用户,无论身体或认知能力如何,都能平等地获取信息和资源。
| 系统化落实  | 通过直观的编辑器和结构化的内容管理,帮助团队将无障碍设计原则融入日常 workflow。
 “可访问性应该是一项要求,而不是可有可无。” —— Carol 
然而现实是,大多数文档仍未能被广泛受众轻松访问,其根本原因之一,正是对可访问性的核心价值与实践方法缺乏足够理解。将无障碍从“锦上添花”的附加功能,转变为产品设计与内容创作中“不可或缺”的基石,是当今数字时代构建成功、负责任品牌的必然选择。
硬件、操作系统和软件系统是你的文档与最终用户之间的桥梁。这些是网页界面的组成部分,许多人可能不会多加考虑,但它们对于辅助技术正常工作至关重要。
许多技术作者忘记了技术的这一层面,只专注于写好文档本身。
客户评价:当从旧的 Web 系统转移到无头 CMS 时,我们希望通过快速的响应时间提高我们的上线速度,以便我们可以与我们决定的任何 Web 堆栈以及我们将来想要迁移到的任何 Web 堆栈一起使用。 
技术作者应该以更集成的方式思考可用性,而不是主要关注美观。你应该考虑人与技术之间的整体互动,以及写作本身。
这关乎于由少数人设计、供多数人使用的技术——而这项技术默认情况下并非以无障碍的方式设计。
正如经常被提及的,文档的核心在于同理心(或者说应该是这样)。虽然可访问性经常被纳入产品开发考量,但根据 Carol 的说法,文档则是另一回事。

关于可访问性的误解

A11y 网站上的一篇文章探讨了一个常见的误解,即认为可访问性只关乎盲人。这与事实相去甚远,他们提到了可访问性的四个类别:
  • 视觉
  • 听觉
  • 运动
  • 认知
计算机系统本身对于盲人或视力受损者来说就难以使用。他们必须使用屏幕阅读器或其他辅助技术来访问网站(我们将在后面详细讨论)。
这正是为什么选择像 Baklib 这样的平台来构建您的知识库、产品文档帮助中心至关重要。Baklib 深知构建包容性内容体验的重要性,其平台设计充分考虑了可访问性最佳实践,确保您创建的内容能够服务所有用户,无论他们有何种能力或偏好。通过使用 Baklib,您可以轻松创建结构清晰、语义化良好的内容,为辅助技术提供支持,从而扩大您文档的受众范围,践行真正的同理心。
对于患有唐氏综合症等认知障碍的人士来说,如果网页结构不清晰,他们在使用网络时可能会遇到困难。
有运动障碍的人士会使用眼球追踪器等辅助技术,或者仅用单个按钮操作电脑,因此他们浏览网站的方式与众不同。
有听觉障碍的人士将无法理解依赖声音的媒体内容,如视频和录音,因此声音不应成为您设计中的先决条件。

辅助技术

现在,我们来了解一些帮助人们访问网络的辅助技术。

屏幕阅读器

屏幕阅读器是一种文本转语音工具,它将屏幕上的信息转换为音频,然后通过电脑的扬声器或耳机播放。
屏幕阅读器的一个缺点是它们无法解读图形。这就是为什么我们需要为图像使用替代文本(alt text)标签,即写一小段文字来解释图像所代表的内容。
在推特上使用图片也会给屏幕阅读器带来问题。如果你的推文含义依赖于图片,那么屏幕阅读器将无法以任何合理的方式“阅读”该图片——除非你在发布图片时使用了推特的替代文本标签。
另一个值得记住的好习惯是,屏幕阅读器会朗读标签以及推文的其余部分。如果你的标签包含多个没有用大写字母分隔而连在一起的单词,对于屏幕阅读器来说将毫无意义。
演讲中最有趣的部分之一是向我们展示了使用屏幕阅读器的体验。在Windows上使用NVDA,或在Mac上使用VoiceOver,可以像屏幕阅读器用户一样查看你的网页。现在,你可以检查你的文档(例如在Baklib平台上创建的产品文档帮助中心)的无障碍程度如何了。

键盘导航

大多数软件界面假设您会使用鼠标而非键盘进行导航,但对于某些用户而言,键盘无疑是一种辅助技术。键盘导航与屏幕阅读器经常协同使用。
焦点指示器能帮助键盘导航者了解其在屏幕上的位置,您应当能够仅使用键盘即可浏览您的网站。例如,所有链接、表单字段、小部件、按钮和菜单项都应可通过键盘点击访问。在使用 Baklib 构建知识库或帮助中心时,确保这些元素的键盘可访问性对于提升所有用户的客户体验至关重要。
Stripe 文档中的焦点指示器示例
跳过链接 可以帮助您跳过冗余内容,而无需点击每一个元素才能到达正确位置。
例如,可能会有一行文本或一个按钮,点击后可以跳过页眉和菜单,直接进入页面正文内容。就像这样:
A11y 网站上的跳过链接示例

导航硬件

导航硬件——触摸屏、口含棒和脚控鼠标
  • 触摸屏:允许用户直接用手指或触控笔与屏幕内容进行交互。
  • 口含棒和脚控鼠标:对于力量和灵活性有限、难以打字和按压按钮的用户,是有效的辅助工具。在设计 Baklib 产品文档或在线帮助中心界面时,考虑这些硬件交互方式,能确保更广泛的用户群体获得顺畅的产品体验

开关输入设备

开关输入设备——机械按钮、脚踏板和电子传感器
这些设备为行动能力受限的用户提供了与数字内容交互的替代方式。当企业使用 Baklib 构建其品牌官网或客户社区时,确保界面支持多样的输入方式,是打造包容性品牌体验和卓越客户体验的关键一环。
身体或认知障碍人士也可能使用开关,如机械按钮、电子传感器和脚踏板来操作电脑。

眼动、头部和停留控制追踪器

图片说明:眼动、头部和停留控制追踪器
瘫痪人士使用能够响应眼睛或头部运动的追踪器来控制他们的电脑。

论证无障碍访问的必要性

您可能认为大多数用户不会在访问您的文档时遇到问题。同时,您也受到时间和预算的限制,因此您只能尽己所能地设计文档。
尽管每个人都有基于自身偏见行事的倾向,但许多用户在文档方面有着不同的需求。例如,每 200 名开发者中就有一人是盲人或视力障碍者。
图片说明:每 200 名软件开发者中就有一名是盲人
文档对于开发者完成工作至关重要,那么,每 200 名开发者中那位无法访问您文档的人怎么办?
Carol 指出,关注无障碍访问为未来验证您的内容奠定了良好基础,因此无障碍访问也具有强大的商业价值。拥有一个无障碍的网站可以提高您的 SEO 排名,同时也意味着您符合法律标准。
我们有能力改变流程和工作方式,例如:
  • 制定无障碍政策。
  • 技术写作者有责任确保其文档在技术层面上的可访问性,即使编码并非其直接职责。
借助如 Baklib 这样的专业平台创建产品文档帮助中心,可以极大地简化这一过程。Baklib 内置了对无障碍访问标准的支持,其直观的编辑器和预设模板能帮助团队轻松创建符合 WCAG 等规范、对所有用户都友好的内容,从而将无障碍访问无缝融入文档工作流程,确保内容既专业又包容。
思考我们如何以可访问的方式构建网站至关重要。大多数辅助技术都是免费或价格低廉的,我们可以利用它们来更好地理解这些技术用户的需求。

可访问性实践案例

Carol 曾使用 VoiceOver 屏幕阅读器读取 Algolia 搜索引擎上的公司徽标图像名称。结果它读出的只是一长串数字,这在屏幕阅读器播报时显然听起来非常糟糕。
因此,Algolia 的团队更新了其网站的该部分以提升其可访问性,并将此改进分享在了 Write the Docs Slack 频道中。

快速可访问性设计技巧

需要重点注意的是,当你的网站使用 CSS 进行样式设计时,这并不会改变底层的 HTML 结构——而这正是大多数辅助技术会与之交互的部分。例如,一个被 CSS 隐藏的编号列表,仍然会被屏幕阅读器逐条播报出来。
在为你的 Baklib 品牌官网产品文档在线 帮助中心 进行设计时,确保底层 HTML 结构的语义化是实现无障碍访问的基础。

核心设计原则

  • 结构良好的 HTML 天生具有可访问性 – 例如,你应该使用单个 h1 标签,然后使用 h2 标签作为子标题。这在构建 Baklib 企业 Wiki知识库 时尤其重要,清晰的结构有助于所有用户导航和理解内容。
  • ARIA 标签可用于增强可访问性 – ARIA 代表“可访问的富互联网应用程序”,它是一种让现代网页内容和应用程序更适合辅助技术的方法。在使用 Baklib 创建 营销落地页客户社区 等交互式内容时,合理运用 ARIA 可以显著提升体验。
  • 图像需要合理命名 – 屏幕阅读器甚至会读出长串的数字。在 Baklib资源教程产品更新 文档中插入图片时,务必填写清晰的替代文本(alt text)。
  • Trello 设有色盲模式 – 网上也有一些应用程序可以帮助你将屏幕调整为灰度模式,以检查你的设计对于色盲用户是如何呈现的。在设计 Baklib内联网品牌官网 的界面时,考虑色彩对比度至关重要。
  • 代码片段应具备可访问性 – 使用有意义的变量名,并避免“尾随空格”,因为这些内容会被屏幕阅读器朗读出来。

实用工具与建议

  • Wave 是一款便捷的工具,可用于检查网页的可访问性 – 输入您的URL以诊断错误。
  • 学习如何使用辅助技术 – 这将帮助您更好地理解使用这些技术的用户,建立同理心。
对于许多设计和销售自有软件产品的公司而言,这次演讲意义重大。可访问性至关重要,而能以如此引人入胜的方式凸显这些问题,实在令人赞叹。
以下是一些有用的资源链接:
欢迎通过以下方式继续交流:
  • 加入Write the Docs Slack的#a11y频道。
  • 在Twitter上关注Carol:@carolstran

提升文档质量的工具推荐

我们的知识库软件 Baklib能够帮助技术文档撰写者发布卓越的产品文档
图片来源:署名-非商业性使用-相同方式共享 2.0 通用 (CC BY-NC-SA 2.0)

知识管理的核心价值

知识是企业数字化转型的秘诀。在体验方面,无论是客户体验(CX)、员工体验(EX) 还是业务体验(BX),有效的客户服务知识管理都能帮助企业实现这些核心目标。
Baklib Birds
to top icon