在書店看到一本書的時候，我們首先會看到書封面上的標題，接著我們決定翻開這本書，閱讀裡面的有哪些目錄，最後再判斷要不要從頭閱讀裡面的每一個字，或是只從感興趣的章節跳著翻閱。
其實我們也會在網路/手機應用程式上出現類似的翻閱行為。當我們打開網站或網頁文章的時候，我們常常會先快速地看過網頁標題，再掃過網頁裡的出現的小標題，去了解這個頁面有哪些內容，吸不吸引我們，最後才判斷內文值不值得閱讀，要不要全讀這些內文，或是跳著讀一些感興趣的部分就好。
視覺上，我們可以用大小、位置和顏色等元素清楚標示出哪些是標題，哪些是內文，並引導大家閱讀的順序。以 A11y新手村的《點字二三事❶：認識點字》 這篇文章為例，我們可以看到標題、次標、內文分別用了不同的字體大小和字體粗度。
- 標題：點字二三世，在最上方並且字體是最大最醒目的，一眼就告訴你要講點字的前世今生
- 次標：點字的由來、點字的組成，利用粗體的方式，告訴你這篇文章會由哪些內容所組成，你可以只挑自己喜歡的部份來閱讀
- 內文：點字是由法國⋯，這些內文則在次標下方並且字體比較小，更詳細的介紹 A11y 新手村想告訴你關於所有點字相關的細節
不是所有的用戶都可以精確辨認字體和粗度的不同，視障者們也需要導覽資訊和在標題間快速切換，這時候就必須要仰賴工程團隊在網頁以及前端語言上定義清楚 Heading （標題） 了。
當網頁上 Heading 被定義好的時候，Screen reader 的使用者就能用鍵盤迅速切換到不同的標題與次標，既可以垂直切換（標題 > 次標 > 內文），也可以水平切換（次標 1 > 次標 2 > 次標 3），去快速瀏覽整個網頁，只看自己感興趣的部分。這樣導覽切換是否設計的好也是 Accessibility 重要的一個指標。
以推特為例，他們的帳戶網頁被分成了三個層級，Heading 1, Heading 2, 和內文段落，當用戶點進 Twitter Accessibility 的頁面時候，Screen reader 會這樣解讀這個網頁：
當用戶今天進入這個網站時，他會先知道他在推特這個網頁 (H1)，當他想知道有哪些內容時，他垂直切換進入下一層，發現了有三個區塊可以看：這個帳戶的推文、推薦的追蹤帳戶、推薦的主題標籤 (H2)。因此，如果他今天只想迅速瀏覽一下有沒有同類型的帳戶可以追蹤，他就可以直接按 Tab 建跳到推薦的追蹤帳戶這個區塊，不用等 Screen reader 將頁面上其他沒那麼感興趣的每一個文字都唸完。
接著讓我們試著打破層級，看看推特要是完全沒有考慮 Accessibility 而沒有 Heading，Screen reader 會怎麼解讀這個畫面：
若是沒有在前端語言上定義 Heading，資訊就會像這樣擠在一起。沒有層級，使用者就不能快速切換去看特定的部分，除了更費時以外，龐雜的資訊也會難以吸收。
定義好的 Heading 除了可以提昇網站的包容性以外，也可以促進使用者經驗，還有讓用戶更容易找到你的網站。網路行銷中的 Search Engine Optimization (SEO) ，也探討了類似的概念：搜尋引擎會讀取前端 HTML 中工程師寫好的 "h1"、"h2" 等標籤，抓取標籤裡的關鍵字。當用戶在搜尋引擎輸入想查詢的內容時，搜尋引擎會開始比對，其中架構清楚且使用適當標題的網站，就會更容易出現在搜尋結果的前幾位。
並且隨著公司規模與產品的增長，Heading 與資訊架構這種系統性的問題，只會變得越來越複雜以及難以處理，因為要開始考慮各個頁面之間的關係，以及不同頁面的一致性，這就像是一種技術債（Technical debt），前期的決策或技術的妥協，導致未來管理開發時難度的提升。雖然一開始團隊可能為了講求效率以及快速測試，並沒有將 Heading 納入考慮，我們也鼓勵設計師應該從今天開始，盡可能地在設計時，開始代入 Accessibility 的思維，在自己的設計稿中標註標題與內文，才能避免在未來產品想要觸及更多使用者，設計更通用性的網站時，因為累積過多的設計債務而必須重新設計全部網頁。
程式裡的標題 H
在程式語言的世界裡，可以定義的 Heading 標題從 1 到 6 ，總共有六種（H1, H2, H3, H4, H5, H6），H1 到 H6 也具有層級的概念，H1 經常被作為網頁/品牌的標題，讓使用者快速定位，知道自己現在在哪個網站。剩下的則依序作為不同種的次標。
各式標題就像是大小不一的告示牌，通常是短短的一句話，精簡地告訴接下來會遇到的內容，而內文段落通常會比較長，比較細節。這邊我們試著用程式語言定義從 H1 到 H3 的標題，並且加上兩段內文。假設筆者設計了一個我的一生的網站，可能會這樣區分這個網站的架構：
大部分的網頁其實都是用類似的邏輯去寫的，讓 Screenreader 去解讀各個 h 的標籤，並將標籤裡的文字唸出來，告訴用戶們這個網頁有哪些段落。
如果你想要分析任何網站的 H1 和 H2 等標題，你可以使用：
- 開發者工具：在 chrome 瀏覽器中，按下功能鍵 F12 或是右鍵選擇檢查，直接查看網站的程式源始碼。
- 一些瀏覽器插件，例如：
這兩種利用工具的方式，都可以讓你快速了解這個網站背後的層級，接下來我們將用 Chrome 的開發者工具，分析推特網站的網頁架構：
- 按下 F12 或是滑鼠右鍵點擊”檢查 Inspect”
- 打開開發者工具後，點擊分析模式選取元素的 icon，這樣就可以用滑鼠分析左邊網站頁面上的元素
- 在分析模式下，當滑鼠移到左邊網頁上的 Twitter Accessibility 的時候，可以發現右側的開發者工具告訴你這是一個 H2 標籤包住的元素
- 或著你也可以善用 ctrl +f 搜尋功能，直接搜尋你想要的標題元素，在這邊我們試著搜尋 "H2"，發現 You might like 也是一個被定義為 H2 的次標
- 試著自己探索看看，分析這個網頁的網站架構
根據上述的方法，我們可以發現這個網頁上的 H1，告訴的使用者這是個推特的網站。在這個推特網站裡，你可以看到三個 H2，包括了 Twitter Accessibility 或是 You might like 你可能喜歡，Treads for you 最新熱度，Screen reader 的讀者可以快速在這些 H2 層級中跳轉，選擇自己想要深入瞭解的內容。根據這個架構，就算視覺上沒辦法辨認出字體、排版位置的不同，也可以了解這個網頁的層級以及決定要不要看，要怎麼看這個網頁。
這裡有一個維基百科的無障礙環境網站，請試著利用上述工具，去分析看看這篇文章的 H1, H2, H3 是怎麼設置的吧！（答案在文章底部）
就像出版社出書前，都會來回跟作者討論書名怎麼訂一樣，出版社跟作者會研究想要強調哪些內容，並且怎麼吸引讀者。在網站上設計合理以及好導覽的 H 標題也是需要團隊的共識和好的設計，設計師與工程師需要整理好網站的整個層級架構，了解團隊想要用什麼樣的框架，去讓使用者導覽或跳轉你的網頁。
在下篇，我們會討論更多現在 UX/UI 設計是如何決定 H1, H2等標題層級，以及要怎麼設計師可以怎麼交付給工程團隊。
- https://www.a11yproject.com/posts/how-to-accessible-heading-structure/
- https://www.w3.org/WAI/tutorials/page-structure/headings/
