上线商品目录前，怎样用静态预览核对搜索框的可见标签

为静态商品目录准备预览时，确保搜索框等界面元素的标签正确，对可用性与无障碍访问都十分重要。本文围绕本地预览阶段如何检查可见标签、并使之与既有的网页无障碍指南相协调这一常见问题展开，结合现有工具与标准，逐一说明确认标签是否存在及其位置的具体做法。

场景：在本地预览中检查搜索框标签

这是一个假设的预览场景。设想一位技术写作者正在为本地审阅准备一个小型静态商品目录，文件夹里是手写的HTML页面，文本编辑器正打开其中一页商品列表。搜索框位于每一页的顶部，任务是在预览分享给同事之前，决定搜索框旁边应该显示什么可见标签。

写作者为同一个搜索框拟了三个具体的标签候选。第一个是简单的占位提示“Search catalog”，只放在输入框内，不在框外重复。第二个是可见文字标签“Catalog search”，以简短一行直接放在输入框上方。第三个把可见标签“Find a product”与占位提示“Name or item number.”配在一起。写作者注意到，人一旦开始输入，占位提示文字就会消失，因此第二个和第三个候选保留了持续可见的提示，第一个则没有。

为了判断这几个候选，写作者整理了一份小清单，而不是罗列一长串原则。一项记录标签在开始输入后是否仍然可见。第二项记录标签是否说明搜索范围，例如是目录而不是整个站点。第三项记录措辞是否与周围页面标题一致，这份草稿中的标题使用的是简短名词短语。写作者把清单整理成以三个候选为行的表格，标出第一个未通过持续可见检查，第二个通过持续可见但在可输入内容上比较含糊，第三个两项都通过，只是稍长一些。

第二份材料是一则简短的目录式记录，按页面所带的搜索框变体把页面分组。写作者编了两条虚构记录来演示分组方式。第一条记录列出一个名为winter-jackets的页面，归在标题“Label: Catalog search”下，并注明搜索框只在靠近顶部的位置出现一次。第二条记录列出一个名为desk-lamps的页面，归在“Label: Find a product”下，并注明占位提示提到了商品编号。这些记录是为练习编造的，并非来自任何真实商品清单，页面名称也是写作者自己拟的工作标题。

至于最终选择，写作者为正在审阅的商品列表定下了第三个候选。理由很实际：可见标签在输入后仍然存在，占位提示则补充说明可接受输入的范围，另外两个候选在这点上处理得不够完整。简单的占位提示被放弃，因为写作者无法确认它在预览中会一直可见；较短的可见标签也被搁置，因为它没有说明可以输入什么。写作者还决定每页只设一个搜索框，让标签审阅在本地这一组页面之间保持可比，并在目录记录中写明每页使用的变体，方便同事快速发现不一致之处。

这些标签都没有经过读者试用，写作者把清单和目录当作预览用的工作笔记，而不是搜索框实际表现的证据。下一步是统一应用选定的标签，并把各页面并排对照。

用本地预览工具检查静态外观

所引官方指南描述了导入静态文件后的本地预览步骤：打开静态托管上传页后，选择文件或将其拖入上传区域，预览就会出现在左侧，右侧则显示文件名、文件数量和大小。选择文件和查看本地预览都不需要登录。¹

同一份指南指出，本地预览用于检查静态外观，会禁用脚本和网络请求，因此JavaScript按钮、远程字体、外部图片或API在这里可能无法工作。完整的交互要在下一步创建的分享链接中测试。¹

你可以从编辑器里已经打开的那个商品列表页开始。取出这一页的当前草稿，记下搜索输入框在标记中的位置，并把它的可见标签当作文件夹发给同事评论前要定下来的唯一决定。其余页面可以先等一等；这一轮先看预览打开时，同事在列表页顶部实际会看到什么。

具体的做法是就地修改标签文字，而不是在搜索框旁另加一条说明。如果输入框目前只带一个写着“Search catalog”的占位提示，你可以改动这段文字，让同样的词出现在搜索框上方的可见一行，然后去掉对占位提示的单独依赖。把早先的草稿文字另存到一个暂存副本里，方便你把两个版本并排对照。你要核对的事情很简单：搜索框为空时，这段文字是否仍像标签一样读得通；有人开始输入后，它是否还留在页面上？

你可以用自己的笔记把这次对照的结果记成几行普通文字。示例条目可以写成：字段：目录搜索；所用标签：Search the product catalog；为空时可见：是；输入时仍显示：是。但要把“输入时仍显示”这一栏的值当作你计划去确认的事项，而不是已经观察到的事实。

对于文件夹里剩下的页面，你可以按每页所带的标签版本分组，让整套预览保持一致。示例记录可以写成：文件夹：商品列表；页面数：三个商品页；标签版本：搜索框上方可见一行。另一条可以写成：文件夹：存档副本；页面数：两个；标签版本：search catalog占位提示。保留哪种分组由你决定；这些笔记只是让你在分享前一眼看出差异。

评估标签的视觉位置与清晰度

在静态商品目录预览发给同事之前，如果必须先把搜索框的可见标签定下来，NamesLink 的官方指南支持导入文件并检查本地预览；该指南说明，本地预览检查静态外观，并禁用脚本和网络请求。写作者可以按该指南上传目录的手写HTML，用本地预览判断搜索框及其标签在静态布局中的阅读效果，然后创建分享链接，在分享前核对导航和交互。¹

对照无障碍成功标准

资料把标签指引与具体的无障碍成功标准联系起来：“信息与关系”属于A级，“标题与标签”属于AA级，“标签或说明”属于A级，“名称、角色、值”属于A级。资料还列出相关技术，包括使用label元素把文字标签与表单控件关联起来，以及提供描述性标签。当无法使用可见标签时，资料把aria-label列为一种选项：它得到屏幕阅读器较好的支持，但不会把信息传达给视觉用户；资料建议仅在控件用途从周围内容中已足够清楚时才采用这种做法。²

你可以拿刚刚定下的修订标签，对照几项能靠自己从静态页面上判断的成功标准来检查。每项标准下，记录当前草稿里实际看到的情况，而不是你打算做到的情况。一条简单记录可以写成：标准为输入后标签仍可见；草稿显示可见文字位于输入框旁；选择为保留。另一条可以写成：标准为标签不依赖周围文字也能说明用途；草稿显示措辞点明了目录；选择为保留。还可以加上第三条：标准为输入框不能只靠占位提示来识别；草稿显示已有持续存在的标签；选择为保留。

这一轮检查的目的不是证明合规，而是让你自己的判断有迹可循，让审阅者看得出标签为什么这样选。你可以把每条记录写成读页面时从上到下回答的问题，再写一句理由。例如：这个列表页上的标签是否始终紧挨搜索框？是，因为文字就放在输入框正前方。这个文件夹里各页的措辞是否一致？这页一致；其他页面仍需做同样的检查。

如果某项标准不适用于没有脚本或样式的静态预览，可以如实记录后继续往下做。一条示例记录可以写成：标准为标签在交互过程中持续存在；草稿显示在这份静态文件中无法观察；选择为留待后续审阅。把这条记录与已经确认的记录分开，有助于避免夸大预览所能证明的范围。

记录写完后，可以对着页面朗读这些文字；只有当某条记录暴露出真正的出入时，才调整标签措辞。把这份清单留在工作笔记里，作为选择过程的记录，而不是声称该目录已符合任何标准。

处理以图片呈现的搜索按钮

对于以图片呈现的搜索按钮，来源说明该按钮的标签应设置在图片输入元素的alt属性中，并给出了示例：type为image的输入元素、搜索按钮图片的来源文件，以及读作Search的替代文本。它引导读者去看关于功能性图片的指南，以了解如何描述按钮中的图片，但没有在这里展开那份指南的细节。²

同一来源还讨论了搜索框紧挨搜索按钮时，搜索文本字段本身的标签：在许多情况下，输入框的用途可从上下文看出来，此时标签可以在代码中提供，而在视觉上隐藏。它的示例把一个与搜索输入框关联、带有视觉隐藏类的标签，与文本输入框和一个标为Search的提交按钮配在一起。它展示的隐藏方式使用CSS让标签在技术上可见、实际上隐藏，例如放在一个像素的区域里，同时指出在这种代码下交互元素仍然处于活动状态，因此它不适合用来隐藏表单中标签以外的部分。²

对于以图片呈现的搜索按钮，你可以把图形当作装饰，让旁边的可见文字承载选择，而不是只依赖一个符号。打开当前正在审阅的商品列表，找到图片元素及其旁边的文字，然后把标签写成该文字位置上的普通词语，例如“Search the product catalog”。如果页面上目前只有图片，你可以在工作草稿中于图片旁加一行简短可见文字，图片本身保持不动；这样既能让这个决定在预览中看得清楚，又不必把图片说成是一个控件。

比较候选方案时，用少量字段记录就能让推理保持清晰。一条示例记录可以写成：字段——目录搜索；位置——图片旁；候选A——“Search”；候选B——“Search catalog”；候选C——“Search the product catalog”；选择——C；理由——它同时点明了动作和范围。同一文件夹中某个归档页面的第二条记录可以写成：字段——目录搜索；位置——图片旁；候选——“Search archived catalog”；选择——此版本；理由——该页面属于较早的一组，措辞与其上下文相符。这些是你自己的工作笔记，不是读者反馈的结果。

你还可以记录在静态页面上图片缺失或加载较慢时，文字是否仍然可见。一条简短记录，如“无图片时标签仍可读：是”，就足以向审阅者说明你为何保留这些文字。如果某个页面在图片旁没有合适的空间，你可以记下这一情况，并为该页另选一种布局，而不是在所有页面强行使用同一位置。目标是做出一个你能解释、可追溯的选择，而不是声称标签已经过验证。

为分享链接测试准备文件

所引官方指南把文件准备当作可分享预览出现之前的第一步。它要求保持相对路径不变，并要求网站根目录下有一个非空的index.html，这样打开所选目录时就能直接看到index.html。对于ZIP压缩包，指南要求压缩输出目录的内容，让index.html出现在第一层，避免多出一层外层文件夹。对于框架项目，指南说明要上传构建后或静态导出的产物；它要求不要上传源代码仓库。指南还指出，当前网页上传器允许最多1,000个文件和总计25 MiB。¹

指南接着说明如何导入文件：选中或把它们拖进上传区域；并指出选中文件和检查本地预览不需要登录。它描述左侧为预览区，右侧显示文件名、文件数量和大小，并可切换桌面和移动布局。它提醒本地预览会禁用脚本和网络请求，因此完整交互应使用下一步创建的分享链接来测试。¹

检查，先把修订后的页面复制成单独的审阅副本，原文件保持不动。在这个副本里，确认你选定的可见标签仍出现在页面文本中，并确认目标链接指向预期的审阅副本而不是线上商品列表。把副本名称、标签文字和链接目标记录在你一直在用的那份简单笔记里。

记录，对于文件夹中的其余页面，可以在分享前按标签变体和链接目标逐页列出。一条示例记录可以写成：页面——第二个商品列表；标签——Search the product catalog；链接到——审阅副本；状态——已准备。另一条记录可以写成：页面——归档列表；标签——Search catalog；链接到——归档副本；状态——可供对照。把这些保留为工作笔记，同事就能看出自己打开的是哪个版本。

分享预览时，可以加一行说明，指出这些标签是供讨论的草稿选择，不是测试结果。这样如果有人问起为什么出现某种措辞，审阅过程仍然如实。你可以这样写：标签为本地审阅所选；尚无读者反馈。

如果某个页面仍沿用只放占位提示的旧做法，可以暂时保持原样并记下差异，而不是一次改动所有文件。一条简短记录，例如页面——第三个商品列表；标签——仅占位提示；尚未修订，就能让不一致之处显现出来，而不必假装工作已经完成。之后你可以再决定是否让那个页面与选定的标签保持一致。

常见问题

我怎样在自己的笔记里记录标签候选方案比较的结果？

你可以用几行朴素文字，在自己的笔记里记下这次比较的结果。一条示例记录可以写成：字段：目录搜索；采用的标签：搜索商品目录；空栏时可见：是；输入过程中仍显示：是。

我怎样把文件夹里其余页面按标签版本分组？

对于文件夹中剩余的页面，你可以按每个页面所带的标签版本分组，让预览集保持一致。一条示例记录可以写成：文件夹：商品列表；页面：三个商品页；标签版本：字段上方的可见文字行。

比较标签候选方案时，我可以写下什么样的示例记录？

比较候选方案时，用少量字段就能让推理保持清楚。一条示例记录可以写成：字段——目录搜索；位置——图片旁；候选 A——“搜索”；候选 B——“搜索目录”；候选 C——“搜索商品目录”；选择——C；理由——它同时点明动作与范围。