在網頁中使用 JavaScript

JavaScript 是一種程式語言，主要用於客戶端使網頁互動。你*可以*建立沒有 JavaScript 的驚人網頁，但 JavaScript 打開了全新的可能性。

在瀏覽器中，JavaScript 本身不會執行任何操作。你從你的 HTML 網頁中執行 JavaScript。要從 HTML 內部呼叫 JavaScript 程式碼，你需要使用 <script> 元素。有兩種使用script 的方法，取決於你是連結到外部指令碼還是直接在你的網頁中嵌入指令碼。

通常，你將在自己的 .js 檔案中編寫指令碼。如果你想從你的網頁中執行 .js 指令碼，只需使用 <script>，並使用 src 屬性指向指令碼檔案，使用其 URL

<script src="path/to/my/script.js"></script>

你也可以在 <script> 標籤之間新增 JavaScript 程式碼，而不是提供 src 屬性。

<script>
  window.addEventListener("load", () => {
    console.log("This function is executed once the page is fully loaded");
  });
</script>

當你只需要一小段 JavaScript 程式碼時，這很方便，但如果你將 JavaScript 儲存在單獨的檔案中，你會發現它更容易

• 專注於你的工作
• 編寫自包含的 HTML
• 編寫結構化的 JavaScript 應用程式

可訪問性是任何軟體開發中的一個重大問題。如果你明智地使用 JavaScript，它可以使你的網站更具可訪問性，或者如果你不加註意地使用指令碼，它可能會成為一場災難。為了讓 JavaScript 為你服務，瞭解一些新增 JavaScript 的最佳實踐是值得的

• 使所有內容都以（結構化）文字形式提供。儘可能依賴 HTML 來建立你的內容。例如，如果你實現了一個漂亮的 JavaScript 進度條，請確保在 HTML 中使用匹配的文字百分比來補充它。同樣，你的下拉選單應該被結構化為 無序列表 的 連結.
• 使所有功能都能從鍵盤訪問。
  • 讓使用者以邏輯順序透過 Tab 鍵瀏覽所有控制元件（例如，連結和表單輸入）。
  • 如果你使用指標事件（如滑鼠事件或觸控事件），請使用鍵盤事件複製該功能。
  • 只使用鍵盤測試你的網站。
• 不要設定或猜測時間限制。使用鍵盤導航或聽取內容朗讀需要額外的時間。你幾乎不可能預測使用者或瀏覽器完成一個過程（特別是非同步操作，如載入資源）需要多長時間。
• 讓動畫微妙且簡短，不要閃爍。閃爍很煩人，可能會引起癲癇發作。此外，如果動畫持續超過幾秒鐘，請給使用者一個取消動畫的方法。
• 讓使用者發起互動。這意味著，不要自動更新內容、重定向或重新整理。不要在沒有警告的情況下使用輪播或顯示彈出視窗。
• 為沒有 JavaScript 的使用者制定一個備用方案。人們可能會關閉 JavaScript 以提高速度和安全性，使用者經常會遇到阻止載入指令碼的網路問題。此外，第三方指令碼（廣告、跟蹤指令碼、瀏覽器擴充套件）可能會破壞你的指令碼。
  • 至少，使用 <noscript> 留下一條簡短的訊息，例如：<noscript>要使用本網站，請啟用 JavaScript。</noscript>
  • 理想情況下，儘可能使用 HTML 和伺服器端指令碼複製 JavaScript 功能。
  • 如果你只是在尋找簡單的視覺效果，CSS 通常可以更直觀地完成這項工作。
  • 由於幾乎每個人都確實啟用了 JavaScript，因此<noscript> 並不是編寫不可訪問指令碼的藉口。

• <script>
• <noscript>
• James Edwards 關於使用可訪問 JavaScript 的介紹
• W3C 的可訪問性指南