- #99
- #98
- #97
- #96
- #95
- #94
- #93
- #92
- #91
- #90
什麼是 ARIA - Accessible Rich Internet Applications?
ARIA 是一系列 HTML 屬性用於額外標註資訊於網頁元素當中,幫助用戶透過無障礙輔助(Assistive Technologies)來完善體驗。
大多前端都應該明白應透過語意化的方式(HTML5)去建構網頁,以便讓搜尋引擎等爬蟲理解資料進而增進搜尋體驗與名次,而語意化的網頁也同時會是無障礙網頁的第一步,可以幫助瀏覽器或無障礙輔助用戶更清楚網頁的內容。
一些動態網頁應用會需要額外標示 ARIA 才能提供完善的無障礙體驗,舉例:「頁面中動態顯示或改動的資訊」就會需要標示 ARIA 屬性告知無障礙輔助,以便在改動時可以聲音告知用戶。在 ARIA 之前應當確保網頁語意化充分,錯誤設置 ARIA 可能造成反效果,比沒設置時的體驗來得糟糕。
之後才知道原來大多現代瀏覽器普遍都具備觀測無障礙屬性相關的專屬功能,舉例 Chrome Accessibility Tree:
- F12 打開瀏覽器 DevTools
- Ctrl + Shift + P 或 ⌘ + Shift + P 輸入執行指令 Show Accessibility
- Accessibility Tree > 勾選 Enable full-page accessibility tree
這樣觀測瀏覽器怎麼解讀網頁就方便得多。
- #89
- #88
- #87
- #86
- #85
- #84
- #83
- #82
- #81
- #80
- #79
- #78
- #77
- #76
- #75
- #74
- #73
- #72
- #71
- #70
- #69
- #68
- #67
- #66
- #65
- #64
- #63
- #62
- #61
- #60
- #59
- #58
- #57
- #56
- #55
- #54
- #53
- #52
- #51
- #50
- #49
- #48
- #47
- #46
- #45
- #44
- #43
- #42
- #41
- #40
- #39
- #38
- #37
- #36
- #35
- #34
- #33
- #32
- #31
- #30
- #29
- #28
- #27
- #26
- #25
- #24
- #23
- #22
- #21
- #20
- #19
- #18
- #17
- #16
- #15
- #14
- #13
- #12
- #11
- #10
- #9
- #8
- #7
- #6
- #5
- #4
- #3
- #2
- #1