用所見即所得draw.io拖拉出來的網頁讀取順序圖

• 今日記事：因為無障礙網頁的TTS機器語音朗讀是按照HTML DOM Tree順序報讀。
• 對我的意義：所以排版無障礙網頁的時候，要謹慎安排會影響報讀和畫面前後順序的HTML標籤順序 ← 笨辦法是寫2個功能一樣的版本，只是以@media、.visually-hidden和display:none的互相搭配來呈現出在網頁上各項功能什麼時候要顯示、隱藏和報讀。
• 新發現：109和110年政府網站評核以及無障礙抽測的經驗是有理解網頁是如何被瀏覽器讀取的話，也就會知道如何才能讓網頁執行速度更快、使用者體驗更好💪
• 我的行動：颱風假裡頭用所見即所得的draw.io，重製前輩在stackoverflow發問「瀏覽器何時開始解析HTML」時畫出的網頁讀取順序圖。