文件的來源順序對輔助技術非常重要，且可能與渲染頁面上元素出現的順序不同。 原始碼順序是指網頁元素在 HTML 原始碼中出現的順序。 使用 CSS，你可以以視覺化的方式重新排序頁面元素，這表示網頁的視覺順序和來源順序可能會不同。
輔助科技，如螢幕閱讀器，通常會依照來源順序排列，忽略網頁中元素的視覺順序。
為了確保文件有邏輯順序，無論是透過輔助技術存取還是如此，請使用 來源順序檢視器（Source Order Viewer ）在原始碼中標示不同頁面元素，並以數字標示順序。 來源排序檢視器位於無障礙標籤 (靠近樣式標籤) 。
分析頁面各區段鍵盤存取順序
無障礙測試的示範網頁有著反直覺的分頁順序，鍵盤使用者只有在透過所有 More 連結後，才能進入側邊欄導覽選單。 側邊欄的導覽選單本來就是用來快速進入頁面內容的捷徑。 但因為你必須先瀏覽整個頁面才能進入側邊欄的導覽選單，這個導覽選單對鍵盤使用者來說效果不佳。
示範頁面上的 Tab 鍵順序如下：
搜尋欄位，然後點擊搜尋欄位的開始按鈕。
在「貓」區塊點擊「更多」按鈕，可前往「貓」網頁。 然後是其他 More 按鈕，分別是狗、羊、馬，最後是羊駝。
側邊欄導覽選單的藍色連結： 貓、 狗、 綿羊、 馬，然後是 羊駝。
捐款表格中的捐款文字框。
上方導航欄的按鈕有： 首頁、 領養寵物、 捐款、 工作，然後是 關於我們。
瀏覽器的視窗頂端介面。
Tab 鍵順序令人困惑的原因，是因為使用鍵盤時所體驗的順序是由文件的原始順序決定的。 使用鍵盤時所體驗的順序可以透過屬性 on elements 進行修改 tabindex ，該屬性會將該元素從原始順序中移除。
在文件的原始碼中，側邊欄的導覽選單會出現在網頁主內容之後。 CSS 被用來將側邊欄導覽選單置於網頁大部分主要內容之上。
你可以在無障礙標籤中的來源排序檢視器中測試頁面元素的順序。
啟動並使用 Source Order Viewer
要啟用並使用來源訂單檢視器，使用示範頁面：
請在新視窗或分頁中開啟 無障礙測試示範網頁 。
要開啟 DevTools，請右鍵點擊網頁，然後選擇 檢查。 或者，在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。
在 DevTools 的 活動欄中，選擇 元素 標籤。如果那個分頁看不到，請點擊 「更多工具 」
) 按鈕。在 元素 工具中， 風格標籤右側 選擇 無障礙 標籤。
在 「來源順序檢視 器」區塊中，選擇 「顯示來源順序 」勾選框。
在渲染後的網頁中，會出現數字，表示 Tab 的順序由原始碼檔案中程式碼行數控制：
在元素工具的 DOM 樹中，選擇一個主要版面元素，例如元素。
sectionTab 順序編號現在會顯示在元素的
section子節點上，表示不同子節點的來源順序：
往下滑頁面可以看到所有數字，並檢查不同元素的來源順序與視覺順序的差異。