手动测试无障碍 ​

<!-- 测试用例：地标角色完整性 -->
<header role="banner">
  <nav role="navigation" aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>
</header>

<main role="main">
  <h1>页面标题</h1>
  <article role="article">
    <!-- 内容 -->
  </article>
</main>

<aside role="complementary" aria-label="相关链接">
  <!-- 侧边内容 -->
</aside>

<footer role="contentinfo">
  <!-- 页脚内容 -->
</footer>

<form id="signup-form">
  <fieldset>
    <legend>注册信息</legend>

    <div>
      <label for="username">用户名:</label>
      <input
        type="text"
        id="username"
        name="username"
        aria-describedby="username-help"
        required
      />
      <span id="username-help" class="help-text">
        用户名应为3-20个字符，可包含字母、数字和下划线
      </span>
    </div>

    <div>
      <label for="email">电子邮箱:</label>
      <input
        type="email"
        id="email"
        name="email"
        aria-invalid="false"
        aria-describedby="email-error"
        required
      />
      <span
        id="email-error"
        class="error-text"
        role="alert"
        aria-live="assertive"
      ></span>
    </div>

    <button type="submit">注册</button>
  </fieldset>
</form>

<script>
  // 测试错误处理
  document
    .getElementById('signup-form')
    .addEventListener('submit', function (e) {
      e.preventDefault()
      const emailInput = document.getElementById('email')
      const errorElement = document.getElementById('email-error')

      if (!emailInput.value.includes('@')) {
        emailInput.setAttribute('aria-invalid', 'true')
        errorElement.textContent = '请输入有效的电子邮箱地址'
        emailInput.focus()
      } else {
        emailInput.setAttribute('aria-invalid', 'false')
        errorElement.textContent = ''
        // 成功提交
      }
    })
</script>

<!-- 测试焦点顺序逻辑 -->
<a href="#main" class="skip-link">跳到主内容</a>

<header>
  <nav>
    <a href="/">首页</a>
    <a href="/products">产品</a>
    <a href="/contact">联系</a>
  </nav>
</header>

<main id="main">
  <h1>主要内容</h1>

  <div class="custom-widget" tabindex="0">自定义焦点元素</div>

  <form>
    <input type="text" placeholder="搜索..." />
    <button type="submit">搜索</button>
  </form>
</main>

<div class="dropdown">
  <button
    id="menu-button"
    aria-haspopup="true"
    aria-expanded="false"
    aria-controls="menu-items"
  >
    选项菜单
  </button>

  <ul id="menu-items" role="menu" aria-labelledby="menu-button" hidden>
    <li role="menuitem" tabindex="-1">选项一</li>
    <li role="menuitem" tabindex="-1">选项二</li>
    <li role="menuitem" tabindex="-1">选项三</li>
  </ul>
</div>

<script>
  // 手动测试键盘交互
  const menuButton = document.getElementById('menu-button')
  const menuItems = document.getElementById('menu-items')
  const menuOptions = menuItems.querySelectorAll('[role="menuitem"]')

  menuButton.addEventListener('click', () => {
    const isExpanded = menuButton.getAttribute('aria-expanded') === 'true'
    menuButton.setAttribute('aria-expanded', !isExpanded)
    menuItems.hidden = isExpanded

    if (!isExpanded) {
      menuOptions[0].focus()
    }
  })

  // 键盘事件处理
  menuButton.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      menuButton.click()
    }
  })

  menuItems.addEventListener('keydown', (e) => {
    const currentIndex = Array.from(menuOptions).indexOf(
      document.activeElement,
    )

    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault()
        menuOptions[(currentIndex + 1) % menuOptions.length].focus()
        break
      case 'ArrowUp':
        e.preventDefault()
        menuOptions[
          (currentIndex - 1 + menuOptions.length) % menuOptions.length
        ].focus()
        break
      case 'Escape':
        e.preventDefault()
        menuItems.hidden = true
        menuButton.setAttribute('aria-expanded', 'false')
        menuButton.focus()
        break
      case 'Home':
        e.preventDefault()
        menuOptions[0].focus()
        break
      case 'End':
        e.preventDefault()
        menuOptions[menuOptions.length - 1].focus()
        break
    }
  })
</script>

<!-- 测试各种颜色组合 -->
<div class="test-cases">
  <div class="case-pass" style="color: #000000; background: #ffffff;">
    通过: 黑色文字 on 白色背景 (21:1)
  </div>

  <div class="case-warning" style="color: #767676; background: #ffffff;">
    警告: 中灰文字 on 白色背景 (4.5:1 - 刚好通过)
  </div>

  <div class="case-fail" style="color: #cccccc; background: #ffffff;">
    失败: 浅灰文字 on 白色背景 (1.6:1)
  </div>

  <button class="btn-primary" style="background: #0056b3; color: #ffffff;">
    按钮: 深蓝背景 on 白色文字 (7.4:1 ✓)
  </button>

  <button
    class="btn-disabled"
    style="background: #cccccc; color: #666666;"
  >
    禁用按钮: 浅灰背景 on 中灰文字 (4.0:1 ✓)
  </button>
</div>

<!-- 良好实践示例 -->
<section aria-labelledby="clear-instructions">
  <h2 id="clear-instructions">设置您的账户</h2>

  <p>请按照以下步骤完成账户设置：</p>

  <ol>
    <li>输入您的电子邮件地址</li>
    <li>
      创建安全密码
      <ul>
        <li>至少8个字符</li>
        <li>包含字母和数字</li>
      </ul>
    </li>
    <li>点击"创建账户"按钮</li>
  </ol>

  <p><strong>提示：</strong>保存您的登录信息以备后用。</p>
</section>

<!-- 不良实践示例 -->
<section>
  <h2>账户初始化流程</h2>
  <p>
    用户须于相应字段输入有效电邮地址并构想符合安全规范的密码组合，随后触发账户创建程序。
  </p>
</section>

<!-- 测试主导航一致性 -->
<nav aria-label="主要导航">
  <ul class="main-nav">
    <li><a href="/" aria-current="page">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/about">关于我们</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

<!-- 测试面包屑导航 -->
<nav aria-label="面包屑导航">
  <ol class="breadcrumbs">
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/products/software" aria-current="location">软件</a></li>
  </ol>
</nav>

<!-- 测试页脚导航一致性 -->
<footer>
  <nav aria-label="辅助导航">
    <ul>
      <li><a href="/privacy">隐私政策</a></li>
      <li><a href="/accessibility">无障碍声明</a></li>
      <li><a href="/sitemap">网站地图</a></li>
    </ul>
  </nav>
</footer>

<!-- 符合标准的触摸目标 -->
<div class="touch-targets">
  <button
    class="btn-large"
    style="min-width: 44px; min-height: 44px; padding: 12px;"
  >
    大按钮 ✓
  </button>

  <button
    class="btn-small"
    style="min-width: 32px; min-height: 32px; padding: 6px;"
  >
    小按钮 ✗ (太小)
  </button>

  <div
    class="icon-button"
    style="width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;"
  >
    <span aria-hidden="true">🔍</span>
    <span class="visually-hidden">搜索</span>
  </div>
</div>

<style>
  /* 触摸目标增强 */
  .btn-small {
    /* 通过增加点击区域修复小按钮 */
    position: relative;
  }

  .btn-small::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
  }
</style>

<!-- 移动端自定义控件 -->
<div
  role="button"
  aria-label="打开菜单"
  onclick="openMenu()"
  onkeydown="handleMobileKey(event)"
  class="mobile-menu-button"
>
  <span aria-hidden="true">☰</span>
</div>

<script>
  function handleMobileKey(event) {
    // 移动端键盘和屏幕阅读器支持
    if (
      event.key === 'Enter' ||
      event.key === ' ' ||
      event.key === 'Spacebar'
    ) {
      // 一些移动浏览器的空格键
      event.preventDefault()
      openMenu()
    }
  }
</script>

<label for="product-search" class="visually-hidden">搜索产品</label>
<input type="text" id="product-search" placeholder="输入产品名称..." />
<button aria-label="执行搜索">搜索</button>