<!-- 錯誤：用 div 模擬按鈕 -->
<div onclick="submit()">提交</div>

<!-- 正確：語義化按鈕 -->
<button onclick="submit()">提交</button>

<a href="#">前端充電寶</a>
<button>點擊我</button>
<input type="text" placeholder="輸入內(nèi)容">
<select>
    <option value="1">選項1</option>
    <option value="2">選項2</option>
</select>

button:focus, input:focus, a:focus {
  outline: 2px solid #007BFF; /* 藍色邊框 */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 添加陰影效果 */
}

<a href="#main-content" class="skip-nav">跳過導(dǎo)航</a>
<header>
    <nav>
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">產(chǎn)品</a></li>
            <li><a href="#">關(guān)于我們</a></li>
        </ul>
    </nav>
</header>
<main id="main-content">
    <h1>主要內(nèi)容標(biāo)題</h1>
    <p>主要內(nèi)容文本...</p>
</main>

.skip-nav {
  position: absolute;
  top: -40px;
  left: 0;
  background: #fff;
  padding: 8px;
  border: 1px solid #ccc;
  transition: top 0.3s ease;
}

.skip-nav:focus {
  top: 0;
}

<div role="button" tabindex="0">前端充電寶</div>

<ul role="menu">
    <li role="menuitem"><a href="#">選項1</a></li>
    <li role="menuitem"><a href="#">選項2</a></li>
</ul>

<div id="dialog" role="dialog" aria-modal="true">
  <h2>標(biāo)題</h2>
  <p>內(nèi)容</p>
  <button id="closeDialog">關(guān)閉</button>
</div>

<input type="checkbox" id="check-box" aria-checked="false">
<label for="check-box">選擇</label>

<button aria - controls="content" aria - expanded="false">展開內(nèi)容</button>
<div id="content" hidden>具體內(nèi)容</div>

<input type="search" aria-label="搜索框">
<button aria-label="關(guān)閉菜單">X</button>

<h1 id="page-title">網(wǎng)站</h1>
<nav aria-labelledby="page-title">
  <ul>
    <li><a href="#home">首頁</a></li>
    <li><a href="#about">關(guān)于我們</a></li>
  </ul>
</nav>

<label for="email">郵箱地址：</label>
<input type="email" id="email" name="email" aria-invalid="true" aria-describedby="email-error">
<span id="email-error" class="error">請輸入有效的郵箱地址</span>

<img src="logo.png" alt="公司Logo">

<figure>
    <img src="complex_graph.png" alt="一張復(fù)雜的銷售數(shù)據(jù)折線圖">
    <figcaption>該折線圖展示了過去一年中不同季度的產(chǎn)品銷售數(shù)據(jù)變化趨勢。</figcaption>
</figure>

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="zh" label="中文字幕">
</video>

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="descriptions" src="descriptions.vtt" srclang="zh" label="視頻描述">
</video>

<video id="myVideo" controls>
  <source src="example.mp4" type="video/mp4">
</video>

<script>
  const video = document.getElementById('myVideo');

  // 添加鍵盤事件監(jiān)聽器
  document.addEventListener('keydown', (e) => {
    if (e.key = ' ') { // 空格鍵播放/暫停
      e.preventDefault();
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }
    } else if (e.key = 'ArrowLeft') { // 左箭頭后退5秒
      video.currentTime -= 5;
    } else if (e.key === 'ArrowRight') { // 右箭頭前進5秒
      video.currentTime += 5;
    }
  });
</script>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>
<p>點擊 <a href="audio_transcription.txt">這里</a> 查看音頻轉(zhuǎn)錄文本。</p>

<audio id="myAudio" controls>
  <source src="example.mp3" type="audio/mpeg">
</audio>

<script>
  const audio = document.getElementById('myAudio');

  // 添加鍵盤事件監(jiān)聽器
  document.addEventListener('keydown', (e) => {
    if (e.key = ' ') { // 空格鍵播放/暫停
      e.preventDefault();
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    } else if (e.key = 'ArrowLeft') { // 左箭頭后退5秒
      audio.currentTime -= 5;
    } else if (e.key === 'ArrowRight') { // 右箭頭前進5秒
      audio.currentTime += 5;
    }
  });
</script>

<video controls preload="none">
  <source src="example.mp4" type="video/mp4">
</video>

<form id="registrationForm">
  <fieldset>
    <legend>注冊信息</legend>
    <label for="username">用戶名：</label>
    <input type="text" id="username" name="username" required>

    <label for="email">郵箱地址：</label>
    <input type="email" id="email" name="email" required>

    <label for="password">密碼：</label>
    <input type="password" id="password" name="password" required>
  </fieldset>

  <fieldset>
    <legend>聯(lián)系方式</legend>
    <label for="phone">電話號碼：</label>
    <input type="tel" id="phone" name="phone">

    <label for="address">地址：</label>
    <textarea id="address" name="address"></textarea>
  </fieldset>

  <button type="submit">提交</button>
</form>

<label for="firstName">名字：</label>
<input type="text" id="firstName" name="firstName" required>

<label for="lastName">姓氏：</label>
<input type="text" id="lastName" name="lastName" required>

<label for="email">郵箱地址：</label>
<input type="email" id="email" name="email" required>

<label for="email">郵箱地址：</label>
<input type="email" id="email" name="email" required>

<label for="search" class="sr-only">搜索：</label>
<input type="search" id="search" name="search" placeholder="搜索...">

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

<input type="email" id="email" name="email" required>
<input type="tel" id="phone" name="phone">
<input type="date" id="birthday" name="birthday">

<input type="email" id="email" name="email" placeholder="example@example.com" required>

<form id="registrationForm">
  <label for="email">郵箱地址：</label>
  <input type="email" id="email" name="email" required aria-invalid="false" aria-describedby="email-error">
  <span id="email-error" class="error"></span>

  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById('registrationForm');
  const emailInput = document.getElementById('email');
  const emailError = document.getElementById('email-error');

  form.addEventListener('submit', (e) => {
    if (!emailInput.validity.valid) {
      e.preventDefault();
      emailInput.setAttribute('aria-invalid', 'true');
      emailError.textContent = '請輸入有效的郵箱地址';
      emailInput.focus();
    }
  });
</script>

<form id="registrationForm">
  <label for="email">郵箱地址：</label>
  <input type="email" id="email" name="email" required aria-invalid="false" aria-describedby="email-error">
  <span id="email-error" class="error"></span>

  <button type="submit">提交</button>
</form>

<script>
  const emailInput = document.getElementById('email');
  const emailError = document.getElementById('email-error');

  emailInput.addEventListener('input', () => {
    if (!emailInput.validity.valid) {
      emailInput.setAttribute('aria-invalid', 'true');
      emailError.textContent = '請輸入有效的郵箱地址';
    } else {
      emailInput.setAttribute('aria-invalid', 'false');
      emailError.textContent = '';
    }
  });
</script>

<label for="email">郵箱地址：</label>
<input type="email" id="email" name="email" required aria-required="true" aria-describedby="email-error">
<span id="email-error" class="error"></span>

<form id="registrationForm">
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username" required>

  <label for="email">郵箱地址：</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">提交</button>
</form>

<script>
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      const focusedElement = document.activeElement;
      if (focusedElement.tagName.toLowerCase() === 'button') {
        focusedElement.click();
      }
    }
  });
</script>

<div id="myModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" style="display: none;">
  <h2 id="modalTitle">模態(tài)標(biāo)題</h2>
  <p id="modalDescription">這是模態(tài)內(nèi)容。</p>
  <button id="closeModal">關(guān)閉</button>
</div>

function openModal() {
  const modal = document.getElementById('myModal');
  modal.style.display = 'block';

  // 將焦點移到關(guān)閉按鈕上
  document.getElementById('closeModal').focus();
}

function trapFocus(event) {
  const modal = document.getElementById('myModal');
  const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
  const firstFocusableElement = focusableElements[0];
  const lastFocusableElement = focusableElements[focusableElements.length - 1];

  if (event.shiftKey && document.activeElement = firstFocusableElement) {
    // Shift + Tab 從第一個元素移出
    lastFocusableElement.focus();
    event.preventDefault();
  } else if (!event.shiftKey && document.activeElement = lastFocusableElement) {
    // Tab 從最后一個元素移出
    firstFocusableElement.focus();
    event.preventDefault();
  }
}

document.addEventListener('keydown', trapFocus);

const closeModalButton = document.getElementById('close-modal');
closeModalButton.addEventListener('click', () => {
    modal.hidden = true;
    openModalButton.focus();
});

button:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

<div id="overlay" style="display: none;"></div>
<div id="myModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" style="display: none;">
  <!-- 模態(tài)框內(nèi)容 -->
</div>

<style>
  #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
  }

  #myModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    z-index: 9999;
  }
</style>

<script>
  function openModal() {
    const overlay = document.getElementById('overlay');
    const modal = document.getElementById('myModal');

    overlay.style.display = 'block';
    modal.style.display = 'block';

    // 將焦點移到關(guān)閉按鈕上
    document.getElementById('closeModal').focus();
  }

  function closeModal() {
    const overlay = document.getElementById('overlay');
    const modal = document.getElementById('myModal');

    overlay.style.display = 'none';
    modal.style.display = 'none';

    // 恢復(fù)之前的焦點
    if (previousActiveElement) {
      previousActiveElement.focus();
    }
  }
</script>