在HackerRank创建无障碍内容的步骤

Last updated: May 27, 2026

概述

候选网站现在根据WCAG 2.1（Level AA）。 因此，确保问题也具有可访问性变得至关重要，以免影响无障碍。

如果您是招聘人员，试图为您的评估创建问题，以下步骤将帮助您创建无障碍问题。 

  • 创建评估后，转到“问题”标签并以查看模式打开一个问题。

    image4.png

    如果您是问题的所有者，您将能够以编辑模式打开问题，并将端点更新为如下所示的查看模式。

    image5.gif

  • 通过axe运行此问题。您可以安装此扩展并运行它以修复任何违规行为。这将捕获大部分违规。  以下步骤强调如何使用此工具识别问题并修复它们。

    运行axe的步骤：

  1. 安装 Axe 扩展。

  2. 安装扩展后，您需要重新启动浏览器。

  3. 通过点击上下文菜单中的检查打开开发者工具。您可以通过右键单击打开上下文菜单。

    image9.png

  4. 现在你应该能够在开发者菜单中看到 axe dev tools。

    image8.png

  5. 点击左侧面板中的“扫描”以运行 axe Dev tools。

    image3.gif

注意：默认情况下，axe 将扫描整个页面，因此您可以忽略问题描述之外的其他问题。

  • Axe 将报告所有违规行为及建议的修复方法。一旦违规行为被修复，重新运行扫描，问题现在可以访问了。

    image1.png

处理图片

为什么需要替代文本（alt文本）？

有时你可能想在问题描述中添加图片，而这些图片可能不会被每个用户感知。在这种情况下，拥有一个使这些图片对每个用户都可访问的选项变得非常重要。因此，需要有一个替代文本（alt文本）来描述相关图片。

以下情况需要添加alt文本（替代文本）。

  1. 对于屏幕阅读器用户，图片无法传达信息。

  2. 对于具有认知障碍的用户，他们无法理解图片内容。

  3. 有时用户可能会关闭图片以防止分心。

因此，建议使用alt文本，以确保上述用户不会丢失信息。

如何添加alt文本？

在问题创建流程中，你可以通过点击“图片”图标（如下截图）在问题描述中添加图片。这将打开“图片属性”弹出窗口，其中有一个文本显示字段。设置一个合适的值在文本显示字段中，这将作为图片的替代文本（alt文本）。

image6.png image2.png

每个图片都需要替代文本（alt文本）吗？

并非每个图片都需要有alt文本。大多数情况下，使用的图片仅用于装饰目的，或者问题描述中的一些文本可能已经传达了图片的用途。在这种情况下，添加空的alt文本完全可以，因为描述中包含有关图片的信息，如下所示。

image7.png

何时必须使用alt文本（替代文本）？

在以下情况下需要描述性alt文本

  1. 图片作为导航元素，例如链接。

  2. 图片包含文本

注意：建议在问题描述中仅将图片（如果使用）用于装饰目的，以便所有人都能轻松理解。