发现招聘网站设计领先实践

世界许多地区都遵守无障碍法律。例如，在加拿大，拥有 50 多名员工的私有、公共和非盈利组织必须确保其网站可访问。Web 内容可访问性指南 (WCAG) 是通过 W3C 流程与世界各地个人和组织合作制定的，目的是为满足国际个人、组织和政府需求的 Web 内容可访问性提供单一共享标准。WCAG 文档解释了如何让残障人士更方便地访问 Web 内容：https://www.w3.org/WAI/standards-guidelines/wcag/ 每个准则都有三个级别的可访问性：A、AA 和 AAA。

WCAG 2.2 版是 WCAG 准则的最新发布版本：https://www.w3.org/TR/WCAG22/。WCAG 2.2 的发布不会弃用或取代 WCAG 2.0 或 WCAG 2.1。建议采用 WCAG 2.2，以最大限度地提高无障碍工作的未来适用性。

美国无障碍准则要求联邦机构开发、获取、维护和使用残疾人可以使用的信息和通信技术 (ICT) - 无论他们是否为联邦政府工作。参见《康复法案》第 508 条：https://www.section508.gov/manage/laws-and-policies/https://www.section508.gov/manage/laws-and-policies/。

屏幕阅读器是将数字文本转换为合成语音的软件程序。它们允许盲人或视障用户阅读显示在计算机屏幕上的文本。屏幕阅读器公布图像的页面标题（HTML 标记中的"反驳标题"元素）、标题、链接和 alt 文本（描述）。要全面了解页面的内容，用户可以从标题跳转到标题、从链接跳转到链接以及从段落跳转到段落。

可访问性工具（如 WAVE (https://wave.webaim.org)）将标记网站上的可访问性问题，但无法告知您是否可以访问 Web 内容。只有一个人才能确定真正的可访问性。工具将标记某些可访问性错误和警告，但无法检测图像上的嵌入式文本。

"WAVE 摘要视图"显示具有嵌入式辅助功能图标和指示符的页面。

• 红色图标表示需要修复的可访问性错误。
• 黄色图标表示可能存在问题的警报。
• 其他图标和标识符突出显示有关站点的其他元素。

在详细信息标签中，您可以单击图标以查看页面上的项目。

参考视图显示您正在查看的元素的说明。

相关代码显示在页面底部。

对于复杂招聘网站或标题固定的站点，没有"样式"视图对于访问错误和提醒非常有用。关闭"样式"将显示表已线性化的页面。此视图显示基础读取和导航顺序，即仅键盘和屏幕阅读器用户访问页面的顺序。

对比度视图基于 WCAG 2.0 准线仅在您的页面上显示对比度问题。您可以使用面板中的工具更改颜色对比度，直到收到"通过"报表，并记下符合这些准则的更新颜色以更改站点。

结构标签显示页面上的标题。

元标记（也称为元数据）帮助告诉搜索引擎和用户您的站点是什么。元数据用于描述网站上的各个页面，允许搜索引擎了解每个页面包含的内容。此数据有助于搜索引擎评估页面内容的相关性，从而确定页面是否将在搜索结果中显示。

搜索引擎结果：

页面标题 也显示在浏览器标签上：

元数据包含三个主要元素：

1.页面标题（或标题标签） - 站点的页面标题是搜索结果中显示为蓝色链接的标题。页面标题被视为页面上最重要的单个元素，用于告知搜索引擎页面内容以及要关注的关键字。标题应为 70 个字符或更少（包括空格），并且应以最重要的关键字开头。除站点范围的元数据外，每页还应具有唯一的标题和描述。

描述（或元描述）- 描述显示在搜索引擎列表中的标题和 URL 正下方。页面的描述应包含与页面标题类似的信息（即目标关键字），但不完全相同 - 应该用于简明地描述网页的内容。页面描述应限制为大约 160 个字符，包括空格。

如果遍历单词计数，则副本将不会显示在搜索引擎结果页面上。另请注意，不要使用"关键字 stuff"（在说明中多次使用相同的关键字）。写好的描述不仅会告知用户您的页面内容，还要求他们访问您的站点。描述是此处在搜索引擎结果中显示的内容。它就像是好的窗户包扎。描述较差的网站将减少点选次数，搜索引擎将降级您的网站以支持其他网站。不要使用引号或任何非字母字符。（Google 将其切出元描述。）

2.关键字 – 近年来，包含关键字的重要性有所下降，因为搜索引擎在排名结果时不再将关键字标记视为主要因素。唯一 再看关键词的搜索引擎是微软的必应，他们用它来帮助检测垃圾邮件。但是，进行关键字研究仍然极其重要，保持您了解访客正在搜索哪些词语，以便您优化这些短语。在内容中使用关键字比在元数据中填充关键字更重要。

1 元数据：填充站点范围的元数据

站点范围元数据从 设置→站点配置→站点信息 中设置。如果未在页面级别替换此信息，则使用此信息。在描述中，包括公司名称、工作或职业以及公司正在招聘的战略职位（例如，列出医生、护士等）。如果公司只有一个地点，则还要包括该地点。

2 元数据：填充页面元数据

应为站点的每个页面指定唯一元数据。这是 一 种领先实践，提高了 SEO 价值。

为此，请导航到页面，单击齿轮图标，然后选择标记或元标记。

为以下各项的页面输入唯一元数据：

• 每种页面类型（登录页面除外）：主页、内容和类别
• 每个区域设置，使用适当的语言
• 每个品牌

例如，在销售职位的"类别"页面上，包括以下描述：在线申请 Best Run Sales Jobs。

页面上的内容应使用标题进行组织。页面应以分层方式构建，通常第一度标题（×h1>）是最重要的（通常是页面标题或主内容标题），然后是第二度标题（通常为主要节标题），直到第三度标题（"h2"的子节）等。在 WAVE 中，使用侧边栏中的大纲标签查看标题。

不要使用文本格式（如字体大小或粗体）来呈现标题的视觉外观 - 对所有内容标题使用实际标题（×h1>- 反抗 6>）。辅助技术和其他浏览器依赖于页面的文字标记来确定结构。同样，不要使用标头仅实现可视结果。例如，如果要突出显示或强调内容中不是标题的元素，请不要使用标题元素来实现所需的视觉外观。请改用字体大小、粗体或斜体。

第一级标题应包含页面最重要的标题（通常是文档标题），以传达页面的内容。招聘网站构建器会自动从页面标题中为每个页面添加一个"反驳"标签，但通常不显示。该网站仍然被认为符合可访问性准则。CSB 站点的主页将从 设置→站点配置→站点信息 中获取页面标题，但不会显示在页面上。

对于其他页面类型，从该页面的页面标题中获取 restih1>tag，默认情况下将其隐藏。

但是，在"Category"页面上，"restih1>tag"可以是可见的或隐藏的。

"类别"页面上需要"反差"标签，但客户可以选择隐藏它，并且仍然符合指导原则。

屏幕阅读器和键盘用户通常按标题元素导航。空标题不会显示任何信息，并且可能会引起混淆。基本上，任何具有标头的元素都应填充它，但您可以将其隐藏。

Alt 文本（也称为备选文本或 alt 标记）用于描述网页上的图像。在网站上的照片中添加替代文本很重要，主要有以下三个原因：

1. 如果图像加载失败：如果由于任何原因，图像未在网页上渲染，则 alt 标记将显示在其位置。这意味着网页的访客了解应该出现什么图像，即使他们无法看到。
2. 对于搜索引擎：Google 和 Bing 等搜索引擎会定期爬网。他们很容易理解页面上的文本副本，但图像很难阅读。这就是 alt 文本发挥作用的地方。Alt 文本用于描述搜索引擎显示图像的内容，从而允许用户在执行图像搜索时获得更好的结果。Alt 文本还可以提高网站的 SEO 值。
3. 对于弱视者：视障者使用屏幕阅读器浏览 Web 页面。这些屏幕阅读器将识别并解释其屏幕上显示的内容。因此，请务必在备选文本中传达上下文信息，以便更详细地解释图像。

应为所有图像和所有语言填充备选文本。为每个图像输入唯一的替代文本。包含有关图像的任何唯一或相关内容。从图像选择器窗口添加替代文本。您可以在上载图像时添加，也可以稍后添加。

确保为徽标提供替代文本。

当两个图像具有相同的替代文本时，这通常会导致冗余或指示不正确的替代文本。移除不必要的冗余，并确保每个图像的 alt 文本都合适。唯一不需要包含 alt 文本的时间是图像用作装饰性背景图像的时间，如下所示。

屏幕阅读器或搜索引擎无法读取嵌入式文本。领先做法是不使用图像上的嵌入式文本。如果客户想要保留包含嵌入式文本的图像，请向图像添加替代文本。请注意，Web 辅助功能工具（如 WAVE）无法检测图像上的嵌入式文本。

• 超链接有意义的文本：链接到"单击此处"标签对 SEO 很糟糕，对于用户来说很糟糕，这些用户被隐式强制寻找有关其确切点击内容的更多信息。向每个链接添加标题标签。用户点击逐页点击时应充满信心。
• 使用一致的样式：选取设计并坚持。链接在整个站点中的可视化方式应没有变化。
• 剪切蓝色非链接文本：蓝色与可点击性紧密关联。如果站点上的蓝色文本不可单击，则会导致沮丧。下划线文本也是如此：它与链接密切相关。
• 鼠标悬停：链接应改变鼠标悬停时的样式，强调用户可以单击。
• 填充：确保链接有足够的空间可在移动设备上单击。

如果链接不包含任何文本，则不会向用户显示链接的功能或目的，这可能会给屏幕阅读器用户造成混淆。最常见的问题是将图像上的嵌入式文本用作链接。移除空链接或在描述链接功能和/或目标的链接中提供标题文本。或向图像添加替代文本。

任何具有链接的内容也应具有标题标签。当用户将鼠标悬停在链接上时，通常会显示标题文本。标题文本用于提供咨询信息；特别是，它应指明链接的实际作用。该页面上具体是什么？您将从中学到哪些内容？作为领先实践，标题文本应与链接名称不同，但最好使用冗余标题文本，而不是不填充。

类别页面链接示例：

在某些区域中，产品在后台复制链接文本作为标题文本，因此不会将其标记为可访问性错误。无法对此进行修改。

相邻链接转到同一位置（例如产品页面）时，会导致屏幕阅读器和键盘用户进行附加导航和重复。转到同一位置的相邻链接应合并，或者应移除一个。三列组件对抬头和图像使用相同的链接，如下所示。无法更改。您可以从图像中移除链接或移除标题和/或单独链接。

所有用户都必须有充分的对比，特别是对于视力低的用户。这通常是悬停颜色的问题。将前景文本和背景颜色之间的对比度增加为大于 4:5:1 的对比度。较大的文本（大于 18 点或 14 点粗体）不需要与较小文本一样多的对比度。确保对比度大于 3:1。一些客户的品牌颜色没有提供足够的对比度。我们建议您在站点上使用符合对比度准则的颜色。

此悬停链接未提供足够的对比度：

…除非您还更改了组件的背景颜色，如下所示。

原始搜索网格格式不符合辅助功能指南，使得有视觉障碍的人很难在招聘网站上找到职位。在可行的情况下，我们建议启用统一数据模型，以便候选人可以使用增强的可访问搜索功能。

Google 职位地图在外部维护，不符合所有可访问性指南。现在，客户可以配置 Google 职位地图，以显示之前隐藏的消息，该消息仅可从屏幕阅读器读取。在 Google 地图组件中，启用显示标题。可以从 "工具" "→翻译" 中更改提供的文本。单击链接将打开填充有搜索栏和搜索结果的页面。

为了获得有价值的用户体验，信息必须：

• 有用 - 您的内容应为原始内容并满足需求
• 可用 - 站点必须易于使用
• 需求 – 图像、身份、品牌和其他设计元素
• 可查找 - 内容需要可导航且可定位
• 可访问 — 内容需可供残障人士访问
• 可信 – 用户必须信任并相信您告诉他们的内容

在两个关键领域优化站点转换：

• 职位已申请
• 人才社区会员资格和发展（创建账户）

增强可用性：

• 最大限度地减少现场还车，减少特定领域的用户流失
• 支持访客快速、轻松、直观地查找相关工作

展示品牌：

• 以富有创造性、视觉上符合指南的方式展示品牌
• 传达公司价值观

在设计前后简化设计

本例中的"后"设计（不是招聘网站）更开放，有空白。图像具有具有高分辨率图片和对比颜色的单一产品。

7 规划简单站点的规则

1. 研究您的受众及其访问最多的网站。寻找关于这些网站设计变化的案例研究，以及这些变化如何改善关键领域。
2. 为自己的站点创建所有"工作"组件的混搭。
3. 当你布置你的设计时,厌恶认知流畅的规则。把你的访客变得习惯了的东西去寻找他们。
4. 依靠自己的颜色、徽标和字体进行清晰和细微的交流。不要添加副本和/或图像，除非它传达访客实际关心的事情。
5. 尽量保持简单，即一个大图像而不是一堆小图像，一个列而不是三列；尽可能多利用空格。
6. 仔细检查以确保您的网站符合定价、美学、速度等方面的公众期望。
7. 请记住，"原型"并不意味着站点的方方面面都应适合这种模具。

源：

https://medium.com/@tommyismyname/why-simple-websites-are-scientifically-superior-168074e9575#.dwy8r9pdx

将卓越实践作为基础，提供出色的用户体验，有效地指导合格的申请人进行申请，支持您的战略招聘目标，并体现您的独特品牌。

目标是在两个关键领域优化站点转换并最小化站点卸载：

• 职位申请：单击"立即申请"按钮的个人
• 人才社区会员：注册工作提醒的个人

• 使用高对比度文本，例如，白色背景的黑色文本。
• 选择易于读取的字体。Sans-serif 字体（例如 Arial、Verdana）通常被认为在 Web 上比衬线字体更清晰（例如，Times New Roman）。
• 在此处查看 Web 的建议字体列表：http://accessibility.psu.edu/fontfacehtml/
• 在所有页面一致地使用字体。
• 14-16 点是我们建议最好在台式机和手机上阅读的正文。

• 使用简短、易于理解的单词和短语。
• 避免使用行话。

• 尽快了解相关内容。使用一半字数或少于传统书写。
• 内容应该是可滑稽的，因为网络用户不多读。研究表明，在最佳案例场景中，我们只读取网页上 28% 的文本。
• 分解冗长的内容。标题和副标题应从文本中脱颖而出。
• 将信息分块时，将大量内容集中在最重要的信息上，并将其放置在页面顶部附近。
• 尽可能使用项目符号列表或编号列表。
• 使用相关视觉效果分解冗长的内容。

• 支持页面内容
• 突出贵公司的品牌和价值观；精心挑选的图片可增强您的讯息
• 避免库存照片

• 具有强大焦点的图像可吸引用户注意。
• 为图像滑块使用持续放置的焦点。
• 使用多种图像来保持用户的参与度。
• 在后台/前台、位置和主题方面考虑多样性。

• 每个组件的"安全区域"将根据其配置在台式机、平板电脑和移动设备上的显示高度/宽度而有所不同。
• 通过查看每种设备类型的组件的最终维度来确定"安全区域"。

• 允许布局中附加剪切和覆盖元素的灵活性。
• 允许在各种组件和布局中轻松修改图像。

• 使用大图像部件时，请考虑优化手机图像并添加两次组件，一次用于台式机/平板电脑，一次用于移动设备。
• 如果图像上有文本，则此功能特别有用。

• 客户负责提供符合准则的图片。请参阅设置和维护 SAP SuccessFactors Recruiting 中的图像建议。
• 图像通常通过授权访问图像库、登录照片站点（类似于 photobucket.com）或 zip 图像文件来提供。
• 至少需要 15-20 个高分辨率就业品牌图像。
• 招聘网站构建器中可以使用以下媒体类型：GIF、ICO、JPG、JPEG、PNG、SVG。请注意，无论显示或布局大小如何，可缩放矢量图形 (SVG) 图像都会正确渲染。因此，公司徽标的单个 SVG 图像可用于招聘网站的桌面和移动布局。如果需要调整 SVG 图像的大小，则可以使用应用程序，例如 https://www.iloveimg.com/resize-image/resize-svg。
• 所有招聘网站构建器图像应定向为横向，而不是纵向。
• 为每个图像添加替代文本，以提高站点的可访问性。请参阅上面的可访问性部分。
• 对于背景图像，请选择细微的模式和颜色。
• 图片上的文本是过时的网络实践，不建议使用。
• 不建议使用图像滑块。

• 图像的最大文件大小为 500KB。
• 强烈建议优化图像，因为它会降低加载速度，从而提高站点的性能。我们建议以更接近 100KB 的文件大小为目标。
• 您的媒体资源应专门为 Web 导出所选图像。
• 可以使用 Photoshop 等图像程序，也可以在网络上使用免费图像压缩机，例如 FastStone Photo Resizer。
• 如果您需要提供 Web 就绪图像的帮助，SAP 的 Web 设计团队可以准备您的图像文件。需要对时间进行开票。

招聘网站构建器中上传的图像托管在 Akamai 内容交付网络 (CDN) 上，该网络使用世界各地的服务器减少页面加载时间。

根据部件，要向页面添加图像，通常从"样式"选项卡中单击"选择图像"或"+添加"。

您可以选择从之前添加的图像列表中添加图像。

1. 单击上载图像。

2. 单击选择图像。

3. 浏览并选择要使用的图像。单击添加。

4. 单击后退箭头。

5.单击编辑备选文本，输入文本，然后单击保存。

6.单击后退箭头并单击选择。

添加图像时，选择所需的图像位置（如右侧所示）。无论候选人使用哪种浏览器和设备类型，此功能都允许始终显示图像的"焦点"。例如，图像中的人员将始终在每个设备上居中。

如果图像未按要求显示在所有设备上，您可以添加具有不同大小图像的多个组件以在每种设备类型上显示。

如果站点需要视频或 Flash, SAP 需要链接到在线托管视频或 Flash 的位置。必须提供直接路径；例如，YouTube 链接通常用于视频资产。SAP 不会在其服务器上托管视频或 Flash。

其他视频提示：

• 关闭自动播放。
• 请简明扼要地介绍这些视频。建议在 30 到 60 秒之间。
• 包括视频的标题和简要描述。

搜索引擎优化是通过无薪（"有机"）搜索引擎结果增加网站流量质量和数量以及品牌曝光的做法。

尽管缩写为"SEO"，但"SEO"与搜索引擎一样，也与人们一样重要。而是要了解人们在网上搜索的内容，以及他们希望使用的内容类型。通过了解这些问题的答案，您可以与在线搜索您所提供的解决方案的人员联系。

如果知道观众的意图是 SEO 硬币的 一 面，那么以搜索引擎爬虫可以查找和理解的方式递送的是另 一 面。搜索引擎对数十亿的内容进行评分并评估数千个因素，以确定最有可能回答查询的内容。他们通过称为"爬网和索引"的过程在互联网上发现和编目所有可用内容，然后按与查询的匹配程度对其进行排序（"排名"）。

搜索引擎优化是 SAP SuccessFactors Recruiting 的核心组成部分。在实施招聘网站时，我们会遵循 SEO 领先实践，并与客户合作，让他们的工作出现在感兴趣且合格的候选人面前。

功能包括：

• 便于爬虫程序 — 对于大多数求职者跟踪系统 (ATS) 而言，搜索引擎爬虫无法按照链接找到工作，因此他们的职位不会在搜索引擎结果中显示。SuccessFactors 通过从 ATS 中导入职位并将其放入对搜索引擎友好的站点来解决此问题。
• 每日站点地图更新 – 搜索引擎用于了解站点上可用内容的工具之一是站点地图，其中包含指向每个页面的链接。当 SAP SuccessFactors Recruiting 运行其夜间维护时，站点将使用对职位收集或登录页面的任何更改进行更新。
• 在招聘网站构建器中细化 SEO 设置 – 默认情况下，CSB 会生成一个热门作业页面，该页面根据最常搜索的词列出搜索结果页面的链接。可以禁用此设置，以便更好地控制职位在您的招聘网站中的展示方式。您还可以将要在结果集末尾显示的特定术语降级，防止搜索引擎完全使用某些术语为作业建立索引，并控制搜索引擎是否为用户生成的搜索页链接建立索引。
• 类别页面 – 构建页面的 SEO 值需要时间 - 比大多数职位发布允许的时间多。构建客户招聘网站时，我们会考虑他们的招聘优先级和工作集合，根据热门搜索词构建类别页面。我们在页面和 HTML 元数据的战略位置中包含这些搜索词或关键字。当每个页面上的职位来临时，通过构建类别页面来托管职位，SAP SuccessFactors Recruiting 可以建立持久的 SEO 价值。
• 相关元数据 - 搜索引擎、职位公告板和职位整合器均在职位或页面的 HTML 代码中使用不同的元数据。我们建议站点的每个页面都有唯一的元数据信息。我们自动在元数据中的标题标签中插入相关信息，以确保我们的流量源具有使我们的工作和页面便于搜索所需的内容。
• 在职称末尾包括"职位"：候选人搜索职位时，通常会在搜索词中包含"职位"一词。在页面标题和 URL 中包含"职位"有助于将页面识别为搜索引擎的职位，随着这些职位发布到页面，它们会创建相关的动态内容，以提高页面的 SEO 价值。

• URL 结构 – 搜索引擎在其中一个位置查找以确定与页面关联的关键字类型是 Web 地址或 URL。ATS 中的大多数页面都填充了数字、符号和不相关的文本。

  例如：jobDetails.do?functionName=getJobDetail&jobPostId=140552&localeCode=en-us

• 创建页面时，我们会在 URL 中包含页面名称以改进 SEO。

  例如：careers.SuccessFactors.com/go/Boston-Sales-Jobs/242462/

• 工作页面上的"类似职位"链接 — 当搜索引擎爬虫阅读每个职位页面的底部时，它们会遇到相关职位类别的链接。与页面底部的段一样，这些链接还会增加相关关键字，并为搜索引擎提供更多链接。
• 响应式招聘网站 — 搜索引擎不仅根据内容对网站进行排名，还根据网站与其执行搜索的设备的适合程度对网站进行排名。利用响应式招聘网站，提高所有网站搜索结果的排名。

• 职位分配 — 通过将职位分配到包含客户招聘网站链接的主要职位公告板，这些入站链接可提高职位的相关性和重要性。越来越受欢迎和被贩运的职位公告板和聚合商将有助于提高客户的排名，尤其是当他们从这些来源获得大量流量时。