企业与服务网站：如何安排面向新访客的入门内容（首次建站）

首次推出企业或服务网站时，最初的入门内容会影响访客对网站的信任。本文聚焦于如何规划一段易读、易导航的介绍。我们假设你已经有了首页的草稿文字，正在决定如何清晰地呈现它。目标是在规划阶段就应用基本的无障碍原则，确保你的信息能够传达给所有潜在客户。

规划你的首页入门内容

设想一位假设的作者正在为一家小型咨询机构准备首个首页。她先草拟了三个开篇候选句，再做选择：“我们帮助小企业理清财务”“为独立店铺提供实用的财务指引”“日常财务问题的清晰解答”。这三种写法给访客的定位各不相同。第一种强调服务对象；第二种突出帮助方式；第三种把新访客可能带着的问题放在前面。她注意到，只有第二种点出了可辨识的受众，而第三种暗示了有用内容，却没有作出她无法兑现的承诺。

接着，她为每个标题各写一段支撑文字。对第一个标题，她写了两句，讲先倾听客户处境、再提建议。对第二个标题，她列出三项服务：月度记账复核、一次性预算检查和员工工作坊。对第三个标题，她写了一个简短的问答块，放入一条关于逾期发票的示例提问。支撑文字会改变开篇的具体程度：第一种读起来亲切但含糊，第二种读起来务实，第三种读起来信息充分，但对首页而言或许过于谦逊。

第二个决定涉及行动号召。她考虑“预约一次交谈”“了解我们的工作方式”和“把问题发给我们”。第一种要求对方作出承诺，第二种邀请对方浏览，第三种降低了门槛。没有哪一项显然正确，因为她还没有决定，从搜索结果来到这里的访客更需要安心感，还是需要一条直达联系方式的路径。

还有一个未定的问题是篇幅。她有一张员工会议照片，以及一份已获允许使用的客户评价，但不确定入门内容应该放在两者之上，还是客户评价应另放一页。这些是为说明规划问题而自行设想的例子，并非对某家现有企业、真实反馈或已完成草稿的描述。

通过对比度确保文字可读

对于入门文字，W3C 无障碍倡议组织建议前景文字与背景颜色之间应有足够对比度。这包括图片上的文字、背景渐变、按钮和其他元素上的文字。该建议不适用于徽标，也不适用于偶然出现的文字，例如恰好位于照片中的文字。¹

该指南指出，有些人在对比度不足时无法阅读文字，而另一些人无法阅读明亮的高亮度颜色，需要低亮度。该页面链接到 WCAG 的最低对比度要求，以及用于检查对比度的工具；“对比度”是更技术性的术语“亮度对比度”的简称。¹

同一页面还提醒不要仅用颜色传达信息。当用颜色区分元素时，应提供不依赖颜色感知的额外标识——例如，在颜色之外用星号标记必填表单字段，并用标签区分图表中的区域。¹

你可以通过把一小段正文及其背景放在一起阅读来检查自己草稿中的对比度，而不是单独判断某一种颜色。试着把标题颜色放在同一页面的段落颜色旁边，然后判断哪种搭配在你计划使用的字号下读起来舒适。如果某种组合让人疲劳，可以考虑加深文字或调浅背景，再把修改后的搭配与原搭配进行比较。

作为一个假设性演示，一位正在准备入门内容的作者可能先在白底上写一句浅灰色文字，并注意到它在正常阅读字号下会变淡。她可以把它改成更深的灰色，将两个版本并排放在一起，并选择较深的版本，因为它在不与标题争夺注意力的同时仍保持可读。这是一个示例选择，不是经过测量的结果。

你还可以简短记录自己尝试过哪些搭配、为什么选择其中一种，这样后续修改就不会推翻一个已经可读的决定。具体颜色和最终选择仍由你决定。

为交互元素提供清晰标签

清晰的标签能帮助访客理解一个交互元素会做什么。W3C无障碍倡议（WAI）的页面举了一个搜索按钮的例子：合适的文本替代是“搜索”，而不是“放大镜”。标签应当传达图像或功能的用途，而不只是描述它的外观。²

标签还支持鼠标以外的操作方式。同一个WAI页面指出，文本替代可作为控件和功能的标签，帮助键盘导航和语音识别导航。它还补充说，呈现给用户的标签应当与代码中对应的对象名称一致，以支持通过语音激活。²

该页面还指出，链接的用途应当清楚，理想情况下即使单独看这个链接也能明白。对首次入门内容来说，这意味着访客不必依赖上下文，就能判断一个带标签的控件或链接接下来会做什么。²

对草稿中的每个交互元素，你可以先写一个暂定标签，再问自己：第一次到访的人是否知道接下来会发生什么。作为演示，作者可能先把一个链接标为“了解更多”，然后改成“阅读我们的服务方式”，因为第二种写法点明了目的地，而不只是动作。两种选择都不是必须的；如果周围句子已经提供了语境，你也可以偏好更短的标签。

同样的比较可以用于按钮和表单控件。假设草稿中一个按钮写着“提交”；作者可以考虑改成“发送你的问题”，因为它告诉访客要发送什么、发送给谁。把你试过的每个标签以及保留其中一个的理由简单记下来，这样以后修改时就不会悄悄换回更含糊的说法。最终措辞由你决定，适合一个页面的标签放到另一个页面可能就显得不合适。

避免仅用颜色传递信息

如果必填字段只用红色文字提示，同一必填状态还应带有不依赖颜色的信号。W3C WAI指南建议在必填表单字段的颜色之外再加上星号，并用标签区分图表中的区域，这样信息就不会只靠颜色传递。该指南的示例把仅用颜色的版本与必填字段为红色并标有星号的版本进行对比。这不仅适用于表单：当颜色用于区分元素时，还应提供不依赖颜色感知的额外标识。¹

先从自己草稿中找出一个仅靠颜色承载含义的地方。假设一位作者在服务名称旁列了一个浅绿色的“新客户”标签，然后把它改写成“新客户——本月接受预约”，这样即使看不到颜色，这一区分也能保留下来。你可以决定对应的标签放在原处，还是放在附近句子里。

对于数量不多的项目，例如三个服务套餐，你可以同时用填色和“最多人选”这几个字标出推荐项，再把纯色版本与带标签版本作比较。如果去掉填色后差别不清楚，可以修改措辞，而不是增加更多颜色。具体如何搭配以及最终文字，由你自己决定。

将无障碍理解为通用设计

无障碍入门资料把万维网描述为“从根本上为所有人而设计，不论其硬件、软件、语言、位置或能力如何”。它把网络无障碍定义为：设计并开发网站、工具和技术，使残障人士能够使用它们；更具体地说，是让人们能够感知、理解、浏览并与网络交互，也能为网络作出贡献。³

同一来源把无障碍视为比残障本身更广的议题。它列出了这些受益情形：使用手机及其他小屏幕设备的人，能力随年龄变化的人，因手臂骨折或丢失眼镜而暂时不便的人，处于强光下等情境限制中的人，以及带宽缓慢或昂贵的人。它还指出，无障碍设计能改善整体用户体验与满意度，尤其是在不同设备上以及面向年长用户时。³

从你自己的入门内容中取一段，把它当作访客唯一能收到的信号来读。设想一位正在制作服务页的作者写下：“绿色标签表示可预约。”她可以改写为直接说明状态，例如“可承接新项目”，这样含义就不必依赖颜色选择。你也可以选择短语、句中的一个词，或条目旁的注释；这些做法都能让访客保持方向感，而不必解码视觉线索。

标题和链接也值得用同样朴素的方式读一遍。设想草稿里有个标题写作“解决方案”；如果这一节实际介绍的是服务，你可以把它改成“面向小团队的服务”。然后你可以检查链接文字：问一问首次到访的访客在选中它之后预期会发生什么，而不是依赖周围排版暗示的内容。当目标是价格页时，“查看我们的价格”这样的候选写法可能比“了解更多”更合适。具体措辞仍由你决定，判断标准是这句话本身能否承载含义。

用实际例子审阅内容

“修改前与修改后”演示提供了一种审阅入门内容的实用方法：它把同一个网站的两个版本并排展示，一个是存在无障碍障碍的版本，另一个是经过改造的版本，页面上还带有内联注释，激活后可以突出显示关键的无障碍障碍或修复之处。每个页面还附有一份评估报告，说明其符合《网页内容无障碍指南》的程度。⁴

该演示明确列出的用途包括：了解具体的无障碍障碍，即问题的成因以及如何修复；以及通过不同的浏览器配置或辅助技术（例如屏幕阅读器和放大镜）浏览存在障碍的页面，再以同样方式浏览无障碍页面来展示差异，从而理解这些障碍的影响。概述还指出，该演示只说明网页无障碍的部分方面，并未涵盖所有类型的障碍或要求。⁴

拿你刚刚修改过的入门内容草稿，再读一遍，看看首次到访的访客会依据哪些实际细节采取行动。作为一个假设示例，作者可以在自己的草稿中标记三处：开篇句、第一个服务标题和结尾句。然后她可以逐一问：“一个毫无背景、直接来到这里的人，会知道这家企业做什么、接下来该做什么吗？”如果答案不清楚，她可以只重写那一行，其余部分保持不动，先把平实的版本与原稿对比，再决定保留哪个。

她还可以把整份草稿放在一份简短清单旁边，列出她所知道的访客需要的信息：用平实的话说明服务内容、适合谁，以及一个容易采取的下一步。把两者对照阅读，她可以记下草稿已经涵盖哪些项目、哪些仍留给访客自行推断。要补充什么仍由她决定；这份清单只是给她一个具体可核对的参照，而不是依赖页面“感觉已经准备好了”的笼统印象。

常见问题

为咨询类首页选择开场白之前，作者可能会先勾画哪些选项？

设想一位假设的作者正在为一家小型咨询机构准备首个首页。她在做出选择前先勾画了三个开场候选：“我们帮助小企业理清财务”“为独立店铺提供实用的财务指导”以及“清晰解答日常资金问题”。

作者可能会为咨询页面考虑哪些行动号召选项？

第二个决定涉及行动号召。她考虑了“预约一次谈话”“了解我们的工作方式”和“把问题发给我们”。

对于尝试并选定的颜色搭配，你可以保留怎样的简短记录？

你也可以保留一份简短记录，写明你尝试过哪些搭配以及为什么选择其中一种，这样以后的修订就不会推翻一个已经可读的决定。