ARIA与网页可访问性标签计算规则及冲突问题咨询

1. 可访问性名称的计算规则 #

按照W3C可访问性名称与描述计算规范，可访问名称的优先级从高到低依次为：

• 最高优先级：aria-labelledby属性指向的关联元素文本内容
• 第二优先级：aria-label属性的自定义文本
• 第三优先级：元素自身的可见文本内容（如<a>标签的文本、按钮的内置文本）
• 第四优先级：替换元素的alt属性（如<img>、<input type="image">）
• 第五优先级：title属性内容
• 最低优先级：占位符文本、元素默认值等

只有优先级最高的命名规则会生效，其余所有低优先级的命名属性都会被辅助技术直接忽略，也就是tenon.io报错提到的“冗余标签”问题。

2. 可访问性标签设置与报错原因说明 #

首先明确：完全可以给链接添加更具描述性的标签，示例中<a href="/pricing/" aria-label="Subscription pricing">Pricing</a>的写法符合规范，不会触发规则冲突。

该报错不是因链接的aria-label设置导致，而是来自其他元素的多命名属性冗余：

该元素使用了多种标签生成策略
该元素存在多个可选标签，控件可访问名称的计算遵循特定算法，仅有一种标签策略会生效，其余标签会被辅助技术忽略，请仅保留一个标签，删除其余冗余标签。

触发该报错的典型场景在提供的代码中非常明显：

• 所有logo图片同时设置了alt和aria-label两个命名属性，按照优先级aria-label会覆盖alt，alt完全冗余，属于典型的多标签策略冲突
• 报错指向的代码中<nav>额外加了role="navigation"，虽然不属于命名冲突，但<nav>原生隐式自带navigation角色，属于属性冗余
• 给<ul>额外添加的aria-label="Menu items"也不属于必要设置：<ul>默认不是可交互元素/地标元素，不需要单独设置可访问名称，父级<section aria-label="Main Menu">已经明确了该列表的上下文，去掉该属性不会影响可访问性，也不会导致导航结构识别异常，Firefox中显示为未命名属于正常表现，普通列表本就不需要额外命名。

关于检测规则的说明：
lighthouse的检测规则偏向基础可访问性合规，不会标记这类“功能正常但存在冗余”的问题；tenon.io的规则更偏向最佳实践，会标记冗余属性避免潜在的兼容问题，不属于规则过于严苛，按照提示清理冗余属性即可。

内容的提问来源于stack exchange，提问作者CodeGorilla