想像一下，如果你所使用者的產品中沒有「通知功能」該會如何是好？在有經營社群關係的 Facebook 上，沒有通知的你必須主動地去注意所有人的重要消息，包括什麼時候生日、點開每個社團查看是否有新消息更新 ; 你使用的數位工具即將更新，沒有通知你很有可能會遺失重要檔案。
我們可以想像通知功能帶來多大的便利，系統主動告訴我們重要的消息，幫助我們可以不錯過重要的資訊，省掉探索每個頁面的時間成本，同時也讓我們避免錯誤發生。
這項功能對於身心障礙者來說，也是十分方便的功能，然而我們可以更進一步思考，可以如何讓通知中心的元件互動方式，讓每個人都更便利。
在談談通知中心（Notification Center) 以前，我們必須先認識通知（Notification)，通知可以讓使用者知道重要的消息，以內容的性質來說，又可以分為兩種類型：
- 具有時效性的通知
你一定都看過類似的系統通知「系統即將更新，提醒您盡快將資料備份。」，如果使用者不盡快備份，未來可能會有資料遺失的問題，這就是一種時效性通知，通常會希望使用者能夠在時間內執行動作，不斷提醒使用者，避免使用者因為沒有掌握資訊而使得錯誤發生。
- 不具有時效性的通知
此類型的通知，使用者通常沒有時間壓力完成任何動作，使用者可透過此類型通知在第一時間掌握消息，何時展開動作、是否動作，則由使用者自行控制，例如：交友邀請通過的許可通知，使用者可以決定是否與這位新朋友展開其他互動動作（揮手 👋）。
由此可見，不具有時效性的通知容易累積，再加上通知的類型可能非常多，人們需要一個地方彙整這些通知以方便查找，而通知中心（Notification Center） 的用途正是協助使用者彙整通知的地方。
除了彙整通知，通知中心也具有「捷徑」的用途，可以讓使用者在通知中心就採取某些行動，最常見的行動就是連結（Link），使用者可以透過點擊通知區塊，直接跳轉至相關的頁面。
因此，通知中心每一個通知區塊的可讀性和可行動性就非常重要，可讀性是指必須能夠讓使用者清楚判斷資訊重點，可行動性是指讓使用者知道可以採取什麼樣的動作。當累積的通知量一多，更需要可辨識性，幫助使用者在瀏覽大量的通知時，能夠快速辨識不同通知類型。
在大部分的通知中心的設計說明中，大部分的設計專家都只說明如何運用視覺效果提升可讀性、可行動性和可辨識性，然而卻不適用於以聽覺來吸收資訊的情況。
原因在於不同感官接收的資訊的維度不同，眼睛從時間、空間 XZY 軸 4 個維度吸收資訊，能夠組合不同位置資訊來感知到新的意義，但耳朵接收的資訊卻只能由時間維度決定，是線性的且單向的，難以重新組合不同時間點聽到的訊息來認知資訊的意義。
因此若明眼人和視障者進入同一個頁面，以「視覺」吸收資訊的明眼人，在短時間內也能夠快速用雙眼掃過頁面所有資訊，並從空間維度組合不同位置的資訊和視覺效果，來認知到資訊的不同意義。然而，對於以「聽覺」吸收資訊的視障者來說是沒有辦法的，因此在設計頁面時，設計師必須去思考如何安排視障者接受資訊的時間順序，讓視障者了解資訊的層級，同時也要考量思考如何設計語意清楚的指示，讓視障者了解可以如何與資訊互動。
為了更仔細地說明視障者在使用通知中心時可能遇到的問題，我們搜集了 2 個數位工具中常見的通知中心案例進行分析。
首先要介紹的第一個案例是社群媒體 Facebook 的通知中心，除了彙整通知的功能，使用者也可以透過點擊通知區塊，連結至消息的所在地。除此之外， Facebook 在每則通知中增加了圖片和 Icon ，希望幫助使用者能夠快速辨識每一則通知的屬性。
視障使用者🤔：「這個連結好冗長而且沒有告訴我要去哪！打開連結，還要重新聽新頁面也太麻煩了….」
由於 Facebook 在程式中，使用 包覆通知內容，但是通知內容只描述通知的必要資訊「您追蹤的…..，5 小時前 」，卻沒有提供足夠的連結用途說明，不知道點擊連結的後果為何。
或許你會想說「點點看就好啦！」，但我們回顧不同感官的操作差異，如果真的點擊了該則粉絲專頁的通知，明眼人可以花短短的時間就從空間維度得到非常大量的訊息，判斷該頁面是粉絲專頁 ; 但視障者卻只能慢慢聆聽資訊，直到碰到關鍵的資訊，視障者才能得知「啊，原來是粉專」，但已經消耗了大量的時間，對於視障者來說是個操作效率低的體驗。
視障使用者🤔：「好多通知！有沒有快速辨識通知的方式？」
Facebook 使用 Icon 呈現通知的性質分類，包含來自於社群、生日、粉絲專頁、按讚，然而 螢幕閱讀器 卻沒有報讀 Icon 呈現的意義。這樣的設計，對於需要找特定類型通知的視障者來說，在大量的通知中難以區辨自己想要的通知，必須聽完每則通知的內容，也是相當消耗時間的使用體驗。
Medium
寫作平台 Medium 的通知中心除了彙整通知的功能，每則通知也有「捷徑」的功能，且是由兩個「捷徑」組成，左側區塊是使用者頭像圖片連結，右側區塊則是通知文字相關的連結。視覺上來說，左側的頭像圖片是提高可辨識性的輔助功能，讓使用者能夠更快辨別這則通知來自於某個對象，若使用者對這個對象感興趣，可以再透過連結到對象的專欄頁面。
NOTE
視障使用者🤔：：「這個圖片的替代文字似乎是一個人？跟通知的關係是什麼？」
由於 Sreen Reader 的報讀順序是由左到右， 視障者會先聽到圖片的替代文字和得知是個連結，若使用者有切換，才會進入右側並聆聽到通知內容。然而，在尚未聆聽通知內容的情況下，先聽到圖片的連結容易讓視障者感到疑惑，因為資訊的順序與層級不一致，畢竟是在通知中心裡，通知內容、類型才是主題，在使用者還沒理解內容重點為何，就先接觸到較不相干的特定使用者的圖像，容易讓使用者感到疑惑並直接忽略這個連結。
NOTE
視障使用者🤔：：「這個圖片又是往哪的連結？」
Medium 的設計中，左側區塊是使用者頭像圖片連結，其替代文字為該使用者的用戶名稱，與右側通知內容的文字開頭是重複的，對於使用 Sreen Reader 的視障者來說是沒有意義的。除此之外，圖片的替代文字也沒有妥善說明連結的用途，若是能在圖片的替代文字中增加連結的說明，讓使用者清楚知道連結可協助跳轉到對象的頁面，可以達到與視覺相同的輔助功能。
要實踐無障礙的通知中心，身為設計師的你有幾個小知識可以先掌握，可以幫助你運用在設計中或是跟工程師溝通。
將資訊層級安排成直線順序，讓螢幕閱讀器能夠正確報讀！
回顧不同感官的操作體驗，聽覺接收資訊是線性且單向的，因此要讓視障使用者掌握到資訊層級，建議報讀順序由層級高得到層級低的，由內容重點到內容細節。
舉上面案例的 Medium 為例，先報讀通知相關的使用者的用戶名稱和連結，就不是那麼友善聽覺為主的使用者快速掌握資訊，如果能夠優化，建議 Medium 應該先讓使用者知道這是什麼類型的通知，讓使用者先抓住重點，可以依照自己的需求決定是否要繼續閱讀細節、跳下一則訊息或是點擊連結，節省使用者的時間成本。
身為設計師的你，若已經將資訊層級做好排序，接下來就是交付給工程師了。你必須知道螢幕閱讀器是按照 DOM 結構樹的順序報讀的，最建議無障礙做法是請工程師將需要優先報讀的順序放置越前面，而如果聽覺跟視覺呈現上的順序出現不一致，也可以嘗試使用 Css 調整視覺的呈現。真的沒辦法的話，還有其他辦法，歡迎有興趣的設計師參考這篇文章。
在互動元件上增加可訪問的描述，讓使用者完整知道互動後果！
在 Facebook 和 Medium 的案例中看到通知中心通常有捷徑的功能，大多只報讀「連結」2 字來告知聽覺使用者互動方式，但是連結到到哪裡卻無法知道，這時設計師可以增加元件的可訪問名稱和描述來改善這個問題。
舉 Facebook 通知中心的粉絲專頁類型的通知為例，因為只有連結才是可互動的，建議將連結與通知內容分開，並用「前往粉絲專頁」描述連結的互動方式和後果，而這樣的方式就是改善連結的可訪問名稱。
相信大家常常使用視覺效果來暗示元件的的用途，包含按鈕、連結、icon ，建議設計師們可以練習如何用文字說明元件的互動方式和後果，再將這些文字說明交付給工程師協助實現，想知道更多實現方式，歡迎參考這篇文章。
運用 Aria-hidden 屬性 ，視覺聽覺都兼顧！
在設計時，設計師常常會運用圖片或 Icon 做視覺呈現的裝飾，通常這些裝飾對於使用者任務操作並沒有意義，這樣的情況下，其實可以在程式碼中加入 Aria-hidden 屬性，讓 螢幕閱讀器 忽略這則訊息，避免讓視障使用者對這樣的裝飾性圖片的出現有疑惑。
💡小提醒：當圖示是有意義時，建議加入替代文字，讓視障使用者也可以得到這個資訊喔！
以上就是我們對通知中心的介紹，讀完文章後，相信大家已經更認識通知中心的用途，也理解以聽覺為主的視障者在吸收資訊時是線性且單向的，並帶走幾個小技巧讓大家能設計出聽覺也好懂的通知中心！
下一篇，我們將介紹通知元件，相信大家一定遇過各種設計樣式、位置的通知方式，我們將介紹視障者是如何感知的，請大家盡請期待～～～
