本文旨在解决web开发中常见的可访问性（accessibility）错误——“重复标签”。当一个输入框同时拥有html `
理解“重复标签”可访问性错误
在开发符合可访问性标准的Web应用时，确保所有表单元素都有清晰、唯一的标签至关重要。一个常见的错误是，当一个<input>元素同时通过<label for="...">关联了一个标签，又通过aria-label属性定义了另一个标签，并且这两个标签文本内容完全一致时，可访问性测试工具（如ARC Toolkit）可能会报告“重复标签”错误。尽管在某些情况下这可能不会直接破坏功能，但它代表了代码冗余，并可能对辅助技术（如屏幕阅读器）造成不必要的混淆。
示例代码中的问题表现
考虑以下表单结构：
<form onsubmit="return false;" class="city-form-inner">
<div id="ember506" class="wrap-autocomplete ember-view">
<label for="search-locations-address">Enter ZIP, State or City</label>
<div class="autocomplete-input">
<input aria-label="Enter ZIP, State or City"
role="combobox"
aria-expanded="false"
type="text"
name="search-locations-address"
id="search-locations-address"
class="form-control ember-text-field ember-view ui-autocomplete-input"
autocomplete="off">
<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete custom-autocomplete ui-front" role="listbox" style="display: none;"></ul>
</div>
<div role="status" aria-live="polite" class="autocomplete-status">0 results are available, use up and down arrow keys to navigate</div>
</div>
<input type="button" value="Find Stores" class="btn-blue submit" data-ember-action="" data-ember-action-513="513">
</form>在这个例子中，id="search-locations-address"的<input>元素同时具备：
- 一个通过for属性正确关联的<label>元素：<label for="search-locations-address">Enter ZIP, State or City</label>。
- 一个aria-label属性：aria-label="Enter ZIP, State or City"。
由于两者文本内容相同，这导致了可访问性工具的警告。
aria-label与<label>的优先级：可访问名称计算
要理解为何会发生此问题，我们需要了解辅助技术如何确定一个元素的可访问名称（Accessible Name）。W3C的“可访问名称计算（Accessible Name Computation）”规范详细定义了这一过程。其中一个关键规则是，aria-label属性在确定元素的名称时具有较高的优先级。
根据W3C的Accessible Name Computation 1.1规范，可访问名称的计算步骤如下：
- 步骤2C：如果元素具有aria-label属性，则其值将作为可访问名称。
- 步骤2D：如果元素没有aria-label但有aria-labelledby属性，则根据aria-labelledby引用的元素内容来计算名称。
- 其他步骤：如果上述属性都不存在，才会考虑其他来源，例如关联的<label>元素的内容。
这意味着，当一个<input>元素同时拥有<label>和aria-label时，辅助技术会优先使用aria-label的值作为其可访问名称，而忽略关联的<label>元素。在这种情况下，如果两者内容相同，<label>元素就变成了冗余代码，且可能被测试工具标记为潜在问题。
解决方案：消除冗余标签
既然aria-label会覆盖<label>，那么当两者内容一致且<label>已经正确关联时，最直接且推荐的解决方案是移除冗余的aria-label属性。
修正后的代码示例
<form onsubmit="return false;" class="city-form-inner">
<div id="ember506" class="wrap-autocomplete ember-view">
<label for="search-locations-address">Enter ZIP, State or City</label>
<div class="autocomplete-input">
<!-- 移除了 aria-label 属性 -->
<input role="combobox"
aria-expanded="false"
type="text"
name="search-locations-address"
id="search-locations-address"
class="form-control ember-text-field ember-view ui-autocomplete-input"
autocomplete="off">
<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete custom-autocomplete ui-front" role="listbox" style="display: none;"></ul>
</div>
<div role="status" aria-live="polite" class="autocomplete-status">0 results are available, use up and down arrow keys to navigate</div>
</div>
<input type="button" value="Find Stores" class="btn-blue submit" data-ember-action="" data-ember-action-513="513">
</form>通过移除aria-label，<input>元素的可访问名称将通过其关联的<label>元素正确获取。这不仅解决了“重复标签”的警告，还简化了代码，提高了语义的清晰度。
最佳实践与注意事项
- 优先使用语义化HTML标签： 尽可能使用原生的HTML语义标签（如<label>与for属性）来提供可访问性信息。它们通常具有浏览器和辅助技术的最佳支持。
-
何时使用aria-label：
- 当视觉上没有对应的文本标签，但元素需要一个可访问名称时（例如，一个只有图标的按钮）。
- 当现有视觉标签不足以提供完整上下文时，aria-label可以提供更详细的描述。
- 当无法使用<label>元素（例如，某些自定义组件或动态生成的元素）。
- 何时使用aria-labelledby： 当可访问名称由页面上已存在的多个元素组合而成时，可以使用aria-labelledby引用这些元素的ID。
- 避免冗余： 除非有明确的理由需要覆盖或增强现有标签，否则应避免同时使用<label>和aria-label。如果两者都存在，请确保您理解aria-label的优先级。
- 定期进行可访问性测试： 使用工具（如ARC Toolkit, Lighthouse, axe-core）进行自动化测试，并结合手动测试（使用屏幕阅读器）来确保您的Web应用对所有用户都可用。
总结
解决“重复标签”可访问性错误的关键在于理解aria-label属性在可访问名称计算中的高优先级。当一个输入框已经通过<label>元素正确关联了标签时，如果再添加一个内容相同的aria-label，将导致冗余并可能触发警告。最佳实践是优先使用语义化的<label>元素，并在不需要覆盖或增强其内容时，避免使用重复的aria-label。通过遵循这些指导原则，开发者可以构建更健壮、更可访问的Web应用。
