ARIA地标合规求助：添加角色后仍提示文本未纳入ARIA地标

你遇到的提示核心不是给文本添加heading角色，而是所有可感知文本必须被包裹在ARIA地标区域内——也就是语义化容器（如<header>/<main>/<footer>）或带地标role的容器里，你之前的操作方向完全错了，反而添加了冗余甚至有害的ARIA属性。

先纠正你代码里的错误操作 #

1. 冗余的ARIA属性：<h1>本身就自带role="heading"和aria-level="1"的语义，手动添加属于画蛇添足；且aria-label和文本内容重复，会导致屏幕阅读器重复朗读，反而影响体验。
2. 错误的role使用：给<p>加role="presentation"会让段落失去语义结构，屏幕阅读器无法识别它的段落属性；给<a>加role="button"会混淆链接语义（这是跳转登录页的链接，不是按钮），同样干扰无障碍识别。

正确解决步骤 #

1. 清理冗余/错误的ARIA属性

修正后的代码片段：

<div class="sign-up-title-container">
  <h1 class="sign-up-title" style="color: #000000; background-color: #fcb913">
     Sign up now
   </h1>
</div>

<div class="sw-cta-container-v1">
  <p class="sw-cta-sub-text-v1">
    Already a member?
    <span>
      <a class="sw-cta-text-v1" href="/en-us/login/?redir=/en-us/home/">Log In</a>
    </span>
  </p>
</div>

2. 给页面添加ARIA地标容器

把所有可感知文本放到对应的语义化地标标签中（现代浏览器支持这些标签的无障碍语义，无需额外加role）：

<!-- 页面头部地标 -->
<header>
  <div class="sign-up-title-container">
    <h1 class="sign-up-title" style="color: #000000; background-color: #fcb913">
       Sign up now
     </h1>
  </div>
</header>

<!-- 页面核心内容地标 -->
<main>
  <!-- 这里放你的页面主要内容 -->
</main>

<!-- 页面底部信息地标 -->
<footer>
  <div class="sw-cta-container-v1">
    <p class="sw-cta-sub-text-v1">
      Already a member?
      <span>
        <a class="sw-cta-text-v1" href="/en-us/login/?redir=/en-us/home/">Log In</a>
      </span>
    </p>
  </div>
</footer>

如果需要兼容旧浏览器，可以给这些标签加上对应的role：

• <header role="banner">
• <main role="main">
• <footer role="contentinfo">

这样所有可感知文本都被包裹在ARIA地标区域内，就能通过无障碍测试的提示要求了。

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