「前端的基礎修養」這一系列時隔已久，原本打算持續更新的，中間竟斷了兩年，現在又撿起來，亦不知能否堅持下來。所以喚作「修養」，大抵因為心虛，覺得沒有什麼技術含量，不便言之技術。
這一篇還是談 Accessibility，未來亦有相當一部分這一主題的文章。由簡入繁，一點一點提高網站的可訪問性。也是因爲稍微複雜的話題我還需要學習。這一篇單講 Live Regions。
現代的 Web 越來越依賴 JavaScript，頁面裏的內容亦會隨着使用者的操作發生變化，我們需要標註出哪些變化必須通知給讀屏軟件，這些需要標註的動態區域便是 Live Regions。
在實際應用裏，Live Regions 一般用作消息提醒。例如 Twitter，你可以 Inspect 一下頁面代碼，當有新的 Tweet 時會出現，在 <body> 的最下面會出現：
<div id="sr-event-log" class="visuallyhidden" aria-live="polite">
<p>New Tweets available. Press period to review them.</p>
</div>如果你開啓了 Voice Over1 或者別的讀屏軟件，這些軟件便會誦讀：
New Tweets available. Press period to review them.
但是你在網頁裏並不會看到這段內容的呈現，因爲它 class="visuallyhidden"，與我在 aria-label 一文裏提到過 .sr-only 一樣。
如上代碼所示，我們使用 aria-live 來標示 Live Region，它有三個可選參數：off/polite/assertive。
我們看到 Twitter 的那段通知代碼正是用的 polite。但是我們偶爾也會有重要的信息，需要即時反饋，這時便可以用 aria-live="assertive" 了。例如「保存錯誤」等消息。這裏有一個消息提醒的例子，我們可以看到 Voice Over 的效果：
aria-live 用來標記 Live Regions，以及定義它們是否打擾式提醒；aria-atomic 用來定義是否將 Live Region 當作一個整體。舉例如下：
<textarea v-model="content"></textarea>
<div aria-live="polite" aria-atomic="true">
You have entered
<span v-text="content.length"></span>
characters.
</div>假使我們不使用 aria-atomic="true"，那麼當 content 的長度發生變化時，讀屏軟件將只讀出變化的內容，亦即 <span v-text="content.length"></span>，你聽到的便是 1、2、3 等。當標記了 aria-atomic="true" 後，你聽到的則是完整的一句話：
You have entered 3 characters.
註：使用不同的讀屏軟件或者不同的瀏覽器，得到的效果會有差異。
我們使用 aria-relevant 控制讀屏軟件在何種情況下發出通知消息。它的可選參數爲：
默認值爲：aria-relevant="additions text"，也就是說，如果 live region 內有節點被移除的話，讀屏軟件不會通告。這在一般情況下是合理的，但是有時我們也想知道是否有節點被移除了，比如當我們要做一個 Todo 時：
<ul aria-live="polite" aria-relevant="additions removals">
<li v-for="(s, i) in todo" :key="i">{{s}}</li>
</ul>當我們在其它地方的操作導致 Todo 裏的項目減少時，我們亦希望得到通知，這時需要給 aria-relevant 添加 removals 參數。
Voice Over 是 Apple (Mac & iOS) 的讀屏軟件↩
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。