我們正在開發一款名為「Accessibility Visualizer」的工具，用於檢查網頁的可存取性。該工具以瀏覽器擴充功能的形式提供，可在網頁上疊加顯示與可存取性相關的資訊。它適用於Chrome和Firefox瀏覽器。 [^1]
由於 Accessibility Visualizer 功能豐富，我們在 GitHub 上發布了一份詳盡的使用者指南。然而，即使有這份文件，我們仍然覺得初學者可能缺乏嘗試無障礙檢查的動力。
因此，除了使用者指南之外，我還想寫一篇文章，清楚地解釋 Accessibility Visualizer 的作者如何使用它。
使用“基本”預設獲得完整外觀
在 Accessibility Visualizer 中，螢幕上每個元素所顯示的資訊稱為「提示」。您可以從「基本」、「內容」、「結構」等預設選項中選擇要顯示提示的元素，也可以自由選擇「自訂」選項。
「基礎知識」部分包含您在查看任何網頁時應該牢記的內容。
頁面/語言
「標題」和「語言」作為整個 HTML 的資訊顯示在瀏覽器視窗的頂部和框架（例如<iframe>元素）的頂部。
標題在<title>元素中指定。標題應描述每個頁面的主題或目的，並有助於區分各個頁面。一般來說，每個頁面都應該有不同的標題。
語言顯示為<html>元素的lang屬性值。對於日文頁面，大多數情況下會指定ja [^2]。建議在<html>元素中指定lang屬性；如果未指定或指定不正確，可能會出現問題，例如螢幕閱讀器嘗試讀取其他語言，或瀏覽器顯示翻譯頁面的 UI。
此外，如果頁面中有部分內容是用其他語言編寫的，則這些部分中的元素應該具有lang屬性。例如，如果頁面中有部分內容是用德語編寫的，則應為該部分中的元素加入lang="de"屬性。
如果缺少<title>元素或lang屬性，則會顯示紅色錯誤訊息。
當出現問題並有明確的修復方法時，輔助功能視覺化工具將顯示紅色錯誤訊息，因此最好先修復顯示這些錯誤訊息的部分。
常見錯誤
-
所有頁面都具有相同標題的動態 Web 服務
-
框架等產生的程式碼還處於初始階段，雖然頁面是日文的，
lang="en"。
標題
使用<h1>至<h6>等元素建立的標題顯示「標題層級」和「標題內容」。
標題層級為頁面結構提供了線索。如果標題層級與頁面實際含義不符，或者看似標題的內容實際上並非標題，那麼依靠標題瀏覽頁面的使用者可能會感到困惑。
在標題層級旁邊，標題內容以綠色顯示，並帶有一個人形圖標，代表「無障礙名稱」。這個綠色人形圖示也常出現在標題外部。螢幕閱讀器等輔助科技會向使用者呈現這個「無障礙名稱」。
常見錯誤
-
<h1>至<h6>元素起裝飾作用，標題層級不代表頁面的結構。 -
<h1>至<h6>元素內僅放置有alt=""的<img>元素，標題內容為空。
影像
圖像也有一個“可存取名稱”。對於<img>元素，此處顯示由alt屬性指定的「替代文字」。由於 axe-core（axe DevTools、Lighthouse 等）等自動檢查工具無法審核替代文字的內容，因此使用 Accessibility Visualizer 進行人工檢查至關重要（毫不誇張地說，該工具就是為此目的而建立的）。
對於沒有任何意義的裝飾性圖片，建議將 alt 屬性設為alt="" （保留alt屬性為空）。 alt 屬性為alt=""的圖片將在輔助使用視覺化工具中顯示黃色警告訊息。
有alt=""圖片會被螢幕閱讀器等輔助科技忽略。這意味著用戶甚至不會意識到圖片的存在。您應該謹慎判斷圖片是否真的應該帶有alt="" 。這就是我們發出警告訊息的原因。
如果缺少alt屬性，則會顯示錯誤訊息。
有關alt屬性值的訊息，請另參閱alt 決策樹。
常見錯誤
-
alt屬性包含檔名，並不描述圖像內容。 -
所有圖像均有
alt="" -
圖像中有很多文字，但替代文字不足以完全解釋它，因此不看圖像就無法獲得太多資訊。
-
圖片和替代文字不一致
-
替代文字包含無法從圖像中讀取的資訊。
表單控制項
組成表單的元素，例如文字輸入欄位、選擇方塊、複選框和單選按鈕，統稱為「表單控制項」。
「可存取名稱」對於表單控制項也起著重要作用。當您將<label>元素與輸入欄位或其他控制項關聯以指示其用途時，該元素將成為可存取名稱。如果關聯了標籤，「可存取名稱」將顯示在輸入欄位中。
如果這樣做，螢幕閱讀器等輔助技術應該能夠感知輸入欄位的用途。
如果輸入欄位沒有標籤或尚未連結，則會顯示錯誤訊息「無名稱（標籤）」。
此外，對於未與輸入欄位關聯的<label>元素，會顯示「未與輸入欄位關聯」的警告。使用未與輸入欄位關聯的<label>元素通常不會造成太大問題，但如果存在這樣的<label>元素，則很可能是標記中存在某種錯誤或誤解。
其他功能包括：如果沒有name屬性或只有一個單選按鈕具有相同的name屬性，則顯示錯誤，這可能會在使用鍵盤時導致嚴重問題；如果<label>元素的for屬性所引用的id不存在，則發出警告。
常見錯誤
-
未使用
<label>元素 -
單選按鈕的
name屬性指定不正確，因此無法使用鍵盤上的箭頭鍵變更選擇。 -
<label>元素的for屬性中指定的id的輸入欄位不存在 -
視覺增強的複選框或單選按鈕隱藏了
<input>元素。
連結按鈕
連結和按鈕通常有一個“可存取名稱”，即寫在其中的文本，如果沒有這個名稱，輔助技術的用戶將無法預測單擊連結或按鈕會發生什麼。
一個常見的例子是，當圖像（例如圖標）被用作連結或按鈕時，如果未設定該圖像的替代文本，則會導致連結名稱丟失。由於圖示是<svg>元素，因此它也可能逃過alt屬性的檢查。
常見錯誤
-
縮圖和標題排成一行，每個都是一個連結，但縮圖側的連結僅包含一個帶有
alt=""的<img>元素，因此連結變為匿名。 -
僅顯示圖示的按鈕變成無名
-
該按鈕是使用
<div>元素建立的，無法透過鍵盤操作，並且輔助技術也無法將其辨識為按鈕。 -
<a>元素沒有href屬性，使用 JavaScript 點選時會切換頁面。這意味著它無法通過鍵盤操作，並且無法被輔助技術辨識為連結。
空氣
WAI-ARIA 屬性（ role屬性、 aria-*屬性） 應僅在絕對必要時使用。輔助使用視覺化工具會顯示所有使用的 WAI-ARIA 屬性的內容，以便您可以觀察它們是否正在使用，以及使用是否得當。
例如，Qiita 右上角的按鈕就具有許多 WAI-ARIA 屬性。
-
姓名： 發布 開啟選單
-
警告：引用的 ID 不存在：PostDropDown (aria-controls)
-
狀態：已倒塌
-
aria-controls：PostDropDown
-
aria-expanded：false
-
aria-haspopup：對話框
-
aria-label：開啟貼文選單
雖然會顯示有關id引用的警告，但它很可能是隱藏選單的id ，因此在這種情況下沒有問題（您可以考慮不在 Accessibility Visualizer 中顯示該警告）。可以使用 aria 屬性變更的狀態（例如「collapsed」）也會顯示在 Accessibility Visualizer 中（以及複選框的選取狀態等）。
關於這裡的菜單：
-
由於
aria-expanded和aria-haspopup表示“將打開某些內容”，因此加入aria-label“打開發布選單”並不多餘。 -
從視覺上看，它是一個「提交」按鈕，所以它不應該被
aria-label覆蓋嗎？ -
由於打開了“選單”，
aria-haspopup的值應該是"menu" -
除了使用 WAI-ARIA 之外，是否可以使用
<details>元素來實現？
應該有空間來考慮這樣的事情。
此外，當向元素新增role屬性時，元素名稱也會顯示出來。下面是一個使用<div>元素建立按鈕的範例（不要在家嘗試！）。
作為 Accessibility Visualizer 的建立者，我希望您在使用 WAI-ARIA 時，將其視為輔助工具。俗話說，“沒有 ARIA 比糟糕的 ARIA 更好”，不當使用 WAI-ARIA 會顯著降低可存取性。如果您使用 WAI-ARIA 屬性，請務必使用實際的輔助技術（最好是多種技術）來測試其運作。
常見錯誤
-
對角色使用不適當的
aria-*屬性 -
在具有隱式角色的元素中新增冗餘
role屬性 -
使用 WAI-ARIA 實現無需 WAI-ARIA 即可實現的功能
-
具有指定
role屬性的元素的行為方式不符合角色的要求。 -
操作尚未透過輔助技術進行測試
結構
「結構」部分主要包含您在建立網站範本時會看到的內容。
「結構」中除「章節」之外的所有內容也包含在「基礎」中。
部分
「Section」 指的是諸如 HTML <section> <main> <header>之類的分段元素，以及諸如banner main navigation之類的地標角色。地標元素和角色（例如標題）是頁面結構的線索，因此應正確設定它們。
地標位置以黃綠色旗幟圖示標記。例如，如果您查看 Qiita 文章頁面，您會看到頂部有banner search navigation角色，而文章正文則作為article角色放置在其下方的main角色內。
簡單地放置一個<section>元素並不能使其成為地標，因此現在我們顯示元素名稱以清楚地表明它是一個<section>元素。
常見錯誤
-
不使用地標角色
-
地標元素的錯誤使用
內容
它包含的內容不太可能像“基礎知識”部分那樣經常使用。它們可能偶爾會用到。
清單
它將顯示清單的類型和專案數量。雖然此功能本身通常無法發現問題，但它對於查找奇怪的標記很有用，例如將<div>直接放在<ul>而不是<li>下。
桌子
它可以顯示表格大小、座標以及相應的標題儲存格。建立這個功能是「輔助功能視覺化工具」中最困難的部分，但考慮到所需的努力，它從來都沒什麼用。首先，我發現在表格上顯示各種內容會使其變得雜亂，難以使用。
即時區域
透過勾選“宣布活動區域”，您可以透過aria-live屬性和<output>元素直觀地看到活動區域的更新。我認為在沒有螢幕閱讀器的情況下檢查活動區域的唯一方法是使用 Accessibility Visualizer。我想知道是否有這樣的工具。
不過，在日本，Live Region 似乎還不普及。使用 GitHub 等平台時，可以享受操作的回饋。
科技
啟用/停用
彈出視窗的右上角有一個複選框，可以完全關閉輔助功能視覺化工具。
如果禁用它，眼睛就會閉上。真可愛！
互動模式
預設情況下，輔助功能視覺化工具啟用了“互動模式”，這會將所有提示簡化為圖標，並使它們變得不透明且不太顯眼，除了將滑鼠懸停在其上的元素之外。
在大多數情況下，這沒什麼問題，但互動模式會放置許多元素來捕捉滑鼠懸停事件。因此，它可能與網頁功能（例如“滑鼠懸停時打開的選單”）不相容。在這種情況下，您只能關閉互動模式或停用輔助功能視覺化工具…
順便說一下，關閉互動模式在截圖時也很有用。上面「部分」的截圖就是在關閉互動模式並將不透明度設為 100% 的情況下截取的。
環境
輔助使用視覺化工具的設定會保存在每個網站主機上。這旨在用於網站開發，以便即使在切換螢幕時也能使用相同的設置，並且這些設置始終只針對正在開發的網站啟用。
當您移動到新主機時，將使用擴展選項畫面中的設置，因此您可以在此處進行保守設置，並在其他網站上顯示較少的訊息，但在開發網站上顯示更多訊息。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式