鍵盤可訪問性的 UX 改進

我們如何在不影響任何其他用戶的體驗的情況下為僅使用鍵盤的用戶和輔助技術用戶提供可訪問的用戶體驗？ 我們懇請 Deque Systems 的首席 UX 設計師 Aaron Pearlman 分享一些實用的工具和技術，以確保我們都為我們的用戶提供包容和可訪問的體驗。

作為我們 Smashing Membership 的一部分，我們每週都會舉辦一系列現場網絡研討會 Smashing TV。 不虛張聲勢——只是實用的、可操作的網絡研討會，由業內備受尊敬的從業者主持，並提供現場問答。 事實上，Smashing 的電視節目表看起來已經很密集了，而且它對 Smashing 會員以及錄音都是免費的——顯然。

我們希望您能像我們一樣享受這次網絡研討會！

Aaron Pearlman：你應該能看到我的屏幕。 好的，現在，讓我……好了，很好。 嗯，大家好。 就像我說的，我是 Deque 的首席用戶體驗設計師 Aaron Pearlman。 而且我認為——呃，讓我動一下——Zoom 往往會妨礙一些 UI，所以如果我看起來我在瘋狂地移動並且鼠標希望它沒有出現，我深表歉意。 因此，今天我們將討論可以為僅鍵盤和輔助技術用戶進行的優化類型。 正如我剛才提到的，這些類型的優化，這些類型的東西不會阻止其他人使用你的……它們也不會被其他人使用。 它們只是傾向於對主要使用僅具有鍵盤用戶輔助技術的系統的用戶更有利。

Aaron Pearlman：對於那些不熟悉這意味著什麼的人來說，什麼是純鍵盤用戶輔助技術——純鍵盤用戶是指通常只使用您的鍵盤來遍歷系統的人。 所以他們會經常使用 tab 和 Shift tab 以及箭頭鍵來遍歷你的系統，所以專注對他們來說非常重要。 您可能會發現這個人可能有運動技能問題，也可能有視力缺陷，僅使用鍵盤的用戶，然後輔助技術用戶也使用鍵盤來遍歷您的系統，他們也可能使用其他輔助技術，例如屏幕VoiceOver 或盲文閱讀器之類的儀表。

Aaron Pearlman：所以，這就是我們所關注的——我們的這種性質的用戶，因為很大一部分殘疾人傾向於落入這個陣營。 這並不意味著所有人。 當然，兩者之間有無數不同的殘疾和等級，但為此，這就是我們今天要關注的內容。

Aaron Pearlman：所以，對我們將要介紹的內容進行一些概述：我們將討論一些設計過程，其中可能會做一些我們可能會做的一些練習類型的事情在我們轉到跳過鏈接之前，可能會進入，也可能不會。 然後跳過鏈接將成為我們將要介紹的功能之一，優化您的模式的方法，以及如何處理焦點。 所以，這些將是我們將要介紹的三大類，然後我們將有時間提問。

Aaron Pearlman：首先，我認為我們可以做一些 UX 設計過程概述。 我參加過不同的研討會和其他工作，我發現那裡有無數不同的人，來自許多不同的學科，並不是每個人都是用戶體驗設計師，所以他們可能並不熟悉許多 UX 設計師所採用的流程。 因此，為此，我想我們只是簡單地回顧一下，我們不會在上面花費大量時間，但我發現它值得簡單回顧一下。 也因為它也將與可訪問性設計聯繫在一起。 所以，大多數用戶體驗設計傾向於經歷一個叫做發現的過程，它並不總是被稱為發現，有時它被稱為快速構思，快速迭代。 很多人給它起不同的名字，但關鍵是它是設計過程的一部分，其中發生了很多製造。

Aaron Pearlman：很多時候我們也會收集不同的想法和需求，這是一個進行大量研究並將其與您的組織目標綜合起來並使用所有這些信息進行過濾的時候，而從中得出的結果通常是使我們能夠構建我們將要製作的系統或我們正在製作的功能的工件。 這些往往是——它們並不總是——但它們往往是原型之類的東西，有時你也會看到從中產生的心智模型。 但是，某種保真度的原型反映了您的目標用戶將如何實現他們的目標。 TLDR 是重複設計，我們與用戶一起測試，然後再重複，與用戶一起測試，再重複，與用戶一起測試，最後，它最終將被構建。

Aaron Pearlman：您認為這很重要，對可訪問性的考慮是我們希望在整個設計過程中考慮和實現可訪問性。 不同程度的保真度可能值得考慮，考慮不同類型的事情，這真的取決於。 不會涉及太多，但總的來說，我們希望結合這些啟發式和方法，隨著設計師隨著時間的推移增加我們的可訪問性能力，就像我們提高成為優秀的能力一樣隨著時間的推移，用戶體驗設計師。 一開始並沒有期望你會去閱讀 WCAG 2.1，然後你會閱讀 ARIA 規範，然後你會完成並且不會再犯任何錯誤，或者，在您的設計和無障礙設計方面，您不會錯過任何東西。 無論如何，這不一定是合理的。

Aaron Pearlman：只要知道你會隨著時間的推移而學習。 當然，我在可訪問性以及我所做的所有事情上仍然存在錯誤，而這一切都是為了變得更好。 所以，[聽不清] 因為我一直在設計可訪問性。 因此，儘管它與我們今天將要進行的工作相關，但其中的一個小插件稱為 Trane。 這是我們在 Deque 完全可訪問的模式庫，我們用它來構建我們自己的產品。 它是一個 HTML、CSS 和 JavaScript 前端框架，它與 Bootstrap 非常相似，如果你曾經使用過類似的東西的話。 我們還有一個反應庫，它也是姊妹庫。 我們的團隊在反應中發展。 但是，我們今天將在這裡查看一些內容作為示例。 但這是開源的，它是可用的，在本套牌的末尾會有一個鏈接，我將提供給每個人。

Aaron Pearlman：您可以免費使用並繼續獲取分支，並隨心所欲地使用它或為它做出貢獻，我們也希望看到對它的貢獻。 所以只是一個小插頭，但我們會在經歷時提到它。 因此，我們首先要看的是跳過鏈接。 對於那些可能不熟悉什麼是跳過鏈接的人來說，跳過鏈接是一些小鏈接，它們往往會作為 Web 應用程序或網站中的第一個製表位出現。 他們允許您做的是允許您繞過網站的某些部分。 你為什麼想這麼做？

Aaron Pearlman：嗯，如果你有一個菜單非常豐富的網站，那可能是一個很大的廣告牌菜單，或者只是有很多東西，如果你是一個純鍵盤或輔助技術用戶，當你得到那個網站和您的 VoiceOver 開始讀取它，甚至沒有，甚至，也許您是一個有視力的用戶，您只使用您的鍵盤，您將不得不在所有這些不同的項目中循環切換以開始無論您在那裡進行的活動是什麼，您想要開始的內容或工作區。 因此，跳過鏈接允許您做的是繞過通常，通常是導航以進入該應用程序的工作區。

Aaron Pearlman：有時可能有多個鏈接，通常只能看到一個，但我們有一些例子。 我將向您展示一個示例，說明您也可以使用多個跳過鏈接。 所以我想我們可以看看幾個不同類型的跳過鏈接或幾個不同類型的跳過鏈接，然後我們會看看另一個沒有跳過鏈接的頁面，也許會談談在哪裡可能在那裡有用。 我們要看的第一個，希望你能看到我的屏幕。 我們要查看的第一個是我們在 deque.com 上使用的跳過鏈接，它是什麼，我稱之為置換元素，因為它置換了頁面。 所以當我進入這裡時，我可以看到跳過鏈接在那裡，它會告訴我跳到內容。

Aaron Pearlman：當我選擇它時，它會將我發送到下面的內容，我稱之為置換，因為它實際上插入並隱藏了自己，並將自己插入其中並置換了它。 這是我們選擇用於內容的跳過鏈接，但它非常常見。 您會看到它自己插入到網站或 Web 應用程序的頂部。 下一個我們要看的是一個站點，我相信你們中的許多人已經使用或經常使用它。 這是亞馬遜，我們將看看他們的跳過鏈接。 當我在那裡點擊時，如果你看那裡的左上角，你會看到它被覆蓋了，這是一種覆蓋樣式，這是非常非常常見的，它會覆蓋內容，所以它通常會跳過任何內容在它後面向您展示跳轉到那裡的主要內容。

Aaron Pearlman：置換與覆蓋之間的利弊可以忽略不計。 如果您發現您的內容是您永遠不想混淆的東西，那麼您可能想要插入一些東西並使用它，置換一個，反之亦然，沒關係，這也很好。 如果您正在設計從右到左閱讀的內容，例如阿拉伯語內容，您可以將跳過鏈接放在右上角，這可能值得。 這真的歸結為什麼是合適的。 但最終，這種自由裁量權將取決於他們團隊中的設計師。 因此，這是兩個跳過鏈接的示例，它們是單個跳過鏈接，我想我會向您展示一個在跳過鏈接中有多個選項的地方。

Aaron Pearlman：我要舉出那個例子，這是來自我們的模式庫。 現在對於這個特定的示例，我實際上不會設計具有多個跳過鏈接的東西，因為它並不真正值得這樣做，但我們只是為了演示它而這樣做。 因此，我將在左上角添加標籤，我們使用一個覆蓋顯示兩個跳過鏈接。 這些是這里里面的製表位，所以如果我再次點擊製表符，我們將進入下一個製表符，如果我離開，它就會消失。 如果我再次點擊，它會離開並進入頂部的標題。 我要將標籤向後移動，向後移動標籤，以便我們可以看到我們可以進出這裡。

Aaron Pearlman：然後我將繼續進入其中一個，以便您可以看到它。 當我選擇它時，此時會發生什麼，它會將我發送到工作區，它實際上聚焦於該工作區。 對於很多 Web 應用程序，您會看到它們實際上並沒有顯示焦點本身，我們想在我們的應用程序中表明，這不是元素的焦點，可以這麼說，但它可以採取重點。 然後從這裡開始，我們將集中註意力，然後我們可以轉到裡面的不同項目，它們是那裡所有元素的焦點，[聽不清 00:12:28] 元素。 因此，這些是您可以跳過鏈接的幾種不同方式的示例。

Aaron Pearlman：就像我說的，模式庫裡面有一個例子，歡迎你使用它，我們也有它的一個版本，我相信這裡有錯誤。 我們也有一個跳過鏈接示例，您也可以使用它。 所以我們在這裡有幾個不同的例子。 但這些是您可以使用跳過鏈接的常見方式的示例。 因此，它們主要有益於僅在使用系統技術時才使用鍵盤遍歷系統的個人。

Aaron Pearlman：但有時，在其他情況下，跳過鏈接可能是有益的。 我已經看到它可能是有益的。 你可以想像一個例子，你網站的大工作區可能是一堆搜索結果，它會做一個懶惰的分數，你會滾動到底部，然後它會加載更多結果，然後滾動到底部，它將加載更多結果，您滾動到底部，它將加載更多結果。

Aaron Pearlman：嗯，你是如何到達頁腳的？ 實際上我以前也遇到過這個問題，我去搜索引擎，但我從來沒有找到頁腳。 更好的是跳過鏈接，它實際上讓我跳到頁腳，因為我在頁腳中尋找信息。 所以有一些方法可以跳過鏈接對此有益。 這不是解決該問題的唯一方法。 當然，您也可以使用硬鍵或快捷菜單。 有許多不同的技術可以實現這些目標，但跳過鏈接往往非常擅長 [聽不清 00:14:13]。 設計跳過鏈接時要記住的一些事情是，通常它將成為您網站 Web 應用程序上的第一個製表位。

Aaron Pearlman：這通常是找到它的地方，所以如果我在尖叫或只使用鍵盤用戶，我可以立即找到它。 這是我進入後可以做的第一件事。因此，如果它是我經常使用的網絡應用程序，我可以直接做我想做的事情。 它還應該在信息中的位置（基本上在 AI 中）直觀地描繪出來，因此您也可以放置跳過鏈接和應用程序的其他部分，就像我可以在這裡放一個一樣，如果我願意的話，找一個很長的滾動堆棧站點，我想這樣做，並且我想在某些內容中包含一個跳過鏈接。 我相當確定您可以錨定到類似的不同事物中，但它應該在應用程序內部直觀地表示它應該在的位置。

Aaron Pearlman：總的來說，這非常罕見。 大多數跳過鏈接始終位於第一個製表位。 一般來說，不要那樣做。 我認為你在技術上可以，但我會說不要。 最後一點是它是一個交互式元素，它是過去的顏色對比，所以請確保它確實如此，如果你決定使用圖像或其中的東西，我會，但如果你這樣做了，它需要有正確的可訪問名稱以及它。 一般來說，大多數人使用文本和鏈接，所以它會被標記為鏈接。 只需確保它通過顏色對比，以便它 [聽不清 00:16:07]。 很好。 這就是我們對跳過鏈接的全部內容。

Aaron Pearlman：這是一種相當簡潔但非常常見的模式，隨處可見，而且您可以公平地添加它，添加到您的 Web 應用程序中相當簡單，但對於使用鍵盤或系統技術。 所以讓我繼續並關閉它，讓我們繼續進行模態優化。 選擇這樣做是因為模態在大多數網絡應用程序中非常、非常、非常、非常普遍，並且它們出現在許多不同的論壇中，模態的塑造和創建方式有很多不同的方式。

Aaron Pearlman：但是我看到的一些常見的事情出現在我們可以糾正的更多事情中，直到我們可以做一些優化以使其成為僅鍵盤和輔助技術用戶的更好體驗。 總的來說，我認為您的模態要好得多。 我想我會很快在這裡展示的一件事是，Modal 需要做的一件重要的事情是它需要能夠將焦點困在其中。 我想展示一個例子……它就在這裡。 順便說一句，我喜歡運球，所以這不是對他們的挖苦。 這可能只是這裡的一個小疏忽。 我一直把它們當作一個令人愉快的網站，上面有很多很棒的東西。

Aaron Pearlman：所以，如果我要登錄，哎呀，對不起，請登錄。 這是一個模態，有時會發生一些事情。 如果你仔細注意到，我正在點擊標籤，標籤，標籤，標籤，標籤。 正如您在屏幕後面看到的那樣，有點難以看到。 你可以看到焦點並沒有完全被困在模態中，這有時會發生。 因此，如果我是使用輔助技術或僅使用鍵盤的用戶，我將很難回到這一點。

Aaron Pearlman：這是非常、非常、非常、非常普遍的事情，當你在 Modal 中插入不同的有趣的東西時，它肯定會發生。 所以我們想要確定的事情，以及我提出這個問題的原因，實際上非常非常重要的原因是當一個模態被喚起時，它需要向喚起它的個人宣布自己，知道什麼他們基本上只是打開了，但他們實際上打開了正確的東西。

Aaron Pearlman：因此，它可以宣布自己的方式是，模態的主體需要被聚焦，或者模態的標題可能被聚焦，這樣我們就可以告訴正在喚起模態的個人，它正在發生的事情。 因此，如果他們有聲音，例如，他們正在使用 VoiceOver，它會告訴他們他們在看什麼。 所以我想我會舉幾個例子來說明身體可以聚焦的方式，然後是模型如何聚焦標題的例子，然後我們可以用它做什麼。

Aaron Pearlman：我將在這裡非常快速地打開這個。 很好。 所以他們為此提供的模式，我認為這是一個服裝網站。 發生的事情是它專注於身體，我可以​​通過以下方式最好地展示這一點……我將很快打開 VoiceOver。 我要把它拉起來。

旁白： Chrome 上的旁白。] Bonobos，[聽不清 00:20:10]-

Aaron Pearlman：而你將聽不到——

旁白：谷歌瀏覽器，[email protected]

Aaron Pearlman：但你會看到的。

VoiceOver：關閉卡片，你的卡片是空的，組有鍵盤焦點。 您當前在開卡組中，關閉卡組，您的卡組為空組。 您當前在 Web 內容內的組中，VoiceOver 已關閉。

Aaron Pearlman：所以當我集中註意力時，它讀出了你卡上發生的所有事情都關閉了，你的卡是空的，因為當時集中了購買。 這是完全有效的。 這是聚焦模態的一種非常有效的方法。 這根本不是問題。 然後從那裡您可以循環瀏覽其中的所有內容。 當模態被喚起時，另一種常見的方法是關注標題。

Aaron Pearlman：這就是我們在用於我們的應用程序的模式中所做的就是關注標題。 所以我要喚起模態，正如你在這裡看到的，焦點就在這裡，它說的是帶形式的模態，焦點就在標題上。 實際上，我們並沒有將其表示為索引，而是以編程方式關注它。 我們以編程方式關注的原因是，當我在此處循環切換時，它現在轉到關閉按鈕，也在標題中，然後到第一個交互元素，即字段到下一個字段，到下一個字段，到下一個字段，再次點擊保存，再次點擊取消。

Aaron Pearlman：從這裡開始，當我點擊製表符時，如果該標題是製表位，它會去那裡，但我們選擇不這樣做。 相反，我們走到了結尾，我們這樣做的原因是，如果有人在使用 Voice Over，因為你可能已經看到了一些正在寫的內容，並且同時進入了我的耳朵，這實際上有點分心，因為它說得很快，有點喋喋不休。 因此，我們想要為這裡的體驗做出的優化之一就是讓它少一點喋喋不休。 所以，是的，我們宣布了它，當他們第一次到達那裡時，我們以編程方式將模態與表單聚焦在一起，這樣他們就知道他們所喚起的模態實際上就是他們目前關注的。

Aaron Pearlman：但我們不需要一次又一次地宣布它，如果他們要循環通過這種模式循環通過這種轉變。 因此，對於您引用的大多數僅使用鼠標的用戶來說，這是一個小的優化可能完全不可見。 但是那個小的優化，你可以想像，如果我經常使用模態來填寫表格，並且我是一個使用僅鍵盤或輔助技術的用戶，那麼優化會隨著時間的推移而增加。 因此，我們可以做的微小的用戶體驗事情，可以對我們可以在設計中投入的整體關懷產生重大影響，因此它們是我們可以提供的最常見的體驗。

Aaron Pearlman：說到處理焦點，我們要討論的最後一個是焦點處理本身。 我們看到了一個例子，如果在某些類型的處理中失去焦點會發生什麼？ 但是，您處理注意力的方式不僅可以成為一個重大問題，還可以顯著改變個人的體驗。 關於處理焦點的真正規則，尤其是我們現在要查看的兩個實例，即在您的工作空間或您正在工作的任何東西中刪除和添加元素是......它絕對可以改變某人的方式與之交互。 因此，我們希望它遵循您對僅鼠標用戶或有視力的用戶（我應該說是僅鼠標用戶）的預期體驗。

Aaron Pearlman：在這種情況下，我們將看……因為在這裡我們將看……好吧，讓我把它拖過來。 堅持一秒鐘。 我將不得不暫時把它帶出這裡。 我們去吧。 所以你不應該看到我設計的模態的例子，它實際上是一個模態，我們有兩種它的圖像，只有一個只是顯示折疊下方的內容，而不是真正製作一個，真的錯了，或者我只是把它分開，這樣你就可以看到折疊下面的內容。 在右側，如果你看，有一個垃圾桶圖標，目前正在集中註意力。 所以當我們點擊那個垃圾桶圖標時，假設沒有對話說，“你確定要刪除它嗎？”

Aaron Pearlman：讓我們假設情況並非如此。 那麼真正的問題是，那裡的焦點會發生什麼？ 因為當那個垃圾桶圖標被點擊或被選中時，它會刪除這裡的指令，它也會刪除自己。 那麼焦點在哪裡呢？ 所以我們作為設計師，我們想要選擇焦點在哪裡，否則瀏覽器會選擇焦點，如果你在 web 應用程序內部創建一個 web 應用程序，我們不希望瀏覽器選擇焦點，因為它傾向於向身體扔東西。 因此，在這種情況下，我們真正想要聚焦的地方是我們希望聚焦到下一個可聚焦元素，不一定是……我稱之為類似的東西，它將聚焦下一個垃圾桶，垃圾桶用於相反，我們將指令集中在自身上。

Aaron Pearlman：我們想要這樣做的原因是，你可以想像如果有人不小心敲擊了，只用他們的鍵盤敲回車，然後他們再次敲擊回車。 它只會刪除兩組指令而不是一組指令。 我們希望，我們通過讓這些東西在物理上相距很遠來防止只有鼠標的用戶出現這種情況。 但我們也希望能夠防止這種情況發生，因為焦點是他們用來遍歷它的東西。 所以我想我會展示另一個例子，說明當我們在此處刪除整個部分的最後一項時我們會做什麼。

Aaron Pearlman：現在我們有了烹飪指導，指導一的最後指導，重點在哪裡？ 現在對於這個特定的，它將與前一個一樣，實際上它將進入下一個焦點但又被填充，這是成分之一，原因與我們不想拋出的相同再次將其放入垃圾桶，因為如果有人再次點擊選擇或再次點擊返回，我們將......他們會不小心刪除兩件他們無意中不想刪除的東西。

Aaron Pearlman：出於同樣的原因，我們不一定要將它扔到這裡的這些鏈接之一，因為我們會遇到相反的問題，他們也會意外添加東西。 而且我們不一定希望它進入身體，因為我們進入身體，你的旁白用戶，你的助理技術用戶，只是會再次開始談論模態，而不是讓你繼續互動和做你打算做的事。

Aaron Pearlman：最後，我在這裡舉的最後一個例子是，在這種情況下，當我們要刪除最後一項時，我們該怎麼做，在這裡的模態中，什麼都沒有了。 我會把它寄到哪裡？ 這絕對取決於設計師的自由裁量權。 不，如果您選擇將它發送到衣服上或發送到焦點（可能是取消），它不會無法訪問。 它不一定使它無法訪問，只是這樣，它真的歸結為您期望的嗎？ 你想傳達什麼信息？ 您想向該用戶傳達什麼敘述以及我們選擇將其發送到何處，因為我們選擇將其發送回標題以讓用戶知道他們仍在模態中，他們仍然在那裡，我們還沒有t 對他們關閉它，例如那裡。

Aaron Pearlman：所以這實際上是一個程序化的轉變，因為就像我說的，這不是糟糕的聲音。 它不像那樣可怕的可聚焦元素。 因此，我們以編程方式將重點轉移到這個特定示例中。 因此，這些是一些很好的例子，說明當您刪除項目時可能需要關注焦點。 所以我認為你可以......我會展示一個你在添加項目時所做的例子。 所以我在這裡有一個快速保持焦點的例子。

Aaron Pearlman：就在這裡，我們要添加另一個……你可以只關注這裡，添加另一種成分，然後在這種情況下轉移到實際成分，你添加的字段有兩個原因，一個，因為假設是通過添加我們想要與之交互的下一個字段，如果我是僅鼠標用戶，這將是預期的行為，我可能會添加它，以便我可以真正開始在其中輸入文本。

Aaron Pearlman：再說一次，我們不一定要繼續關注另一種成分，因為如果他們再次返回，我們不想添加兩種成分而不是一種。 它應該是前面例子的相反問題。 最後一個，我想展示的最後一個例子，因為我認為它可能值得展示......實際上我有那個例子，我可能會稍微提一下。 但是我可以很恰當地描述它，如果你有當你喚起模態時你會做什麼？ 例如，您保存了一些東西，模式消失了，現在焦點在哪里以及我們傾向於做什麼，但經驗法則是您希望將其發送回任何元素 [聽不清 00:31:03]得到。

Aaron Pearlman：因此，如果您想像如果您有一個小編輯鉛筆並選擇它，打開模態框，填寫該模態框，點擊保存，您希望將焦點發送回那個交互元素，這往往是……或者我們這樣做。 在某些情況下，您可能希望將其發送到其他地方。 如果它是一個巫師，然後它去了其他地方，再次由設計師決定，你試圖告訴我們去哪裡的敘述。 但是對於像我剛才描述的那個……例子，這是很常見的。 你喚起一個模態，或者你用它做一些事情，結果它被解雇了，上下文不一定會改變。

Aaron Pearlman：而且你不想將焦點送回原來的位置。 這樣做的原因是，僅使用鍵盤或輔助技術的用戶可以回到他們所在的位置。 因為記住他們在那個空間裡，而且那個空間對於他們如何穿越有點線性，特別是當你使用城鎮來穿越一切的時候。 所以，我認為我們大約有 40 分鐘，對於我所擁有的所有示例和內容，我們幾乎是時間。 所以我將把它傳回給斯科特。

斯科特：謝謝亞倫。 那太棒了，我們確實有很多來自與會者的問題，還有一些來自個人的問題，他們今天因為旅行而無法參加。 因此，經常參加我們網絡研討會的 Poan 問道：“當您刪除項目時，我們不應該確認該操作並將焦點移到那裡，然後轉移到下一個元素嗎？”

Aaron Pearlman：當移除一個項目時，你是否應該有一個……你是指像祝酒一樣的通知，還是你是說你是否應該有一個實時區域讓你知道正在發生的事情？ 如果您將焦點轉移到刪除一個項目，例如我剛剛在該特定實例中展示的那個刪除的調用，應該足以讓他們知道他們實際上已刪除。

Aaron Pearlman：它應該消失了。 此外，如果他們正在使用 Voice Over，它也會接收到它。 如果您正在與某物交互並且它在其他地方進行更改，例如，就像您做了某事然後它在某處更改了一些指標，您可能會想要使用一個有禮貌地做某事的活動區域讓他們知道那已經發生了。 這有點超出了你具體工作的範圍。 我希望這能回答你的問題。 它可能會潛入一些更具技術性的東西。 如果我們要深入研究技術實現方面的內容，我可能需要對其中的一些內容進行更多跟進。

斯科特：完美。

Aaron Pearlman：我的開發人員，所以他們不會引導你到達，但總的來說情況往往如此。 我展示的例子應該足夠了。 如果你想要它，因為它是一個刪除，你可以有一個臨時部分，你拋出一個警報並說，“你確定要他刪除這個嗎？” 在哪種情況下，您只是進一步加強了正在發生的事情。

斯科特：太好了。 所以，是的，試著讓問題集中在用戶體驗上。 那麼從用戶體驗的角度來看，您將如何管理通知消息的焦點？

Aaron Pearlman：關注通知？ 如果你想看，我可以給你看一個。

斯科特：當然。

Aaron Pearlman：我們可以隨機取回，因為我們碰巧有 toasts，也就是通知。 所以我要在這裡打開祝酒詞。 所以這實際上是現在的重點。 這個祝酒詞被喚起，它現在正在被關注，你實際上可以，正如你所看到的，你可以在此處進入該子句。 所以，這取決於。 So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. 跳到主要內容。

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. 它是完全免費的。 It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. That's really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That's one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman：所以我們要做的一件事是我對我的設計進行大量註釋。 從某些事物的大小到應有的外觀和感覺的十六進制代碼或 RGBA 值。 但是，您也可以添加一些可訪問性註釋。

Aaron Pearlman：然後只是進行交流，在構建過程中查看構建，確保您是否製作了任何自定義焦點，這些自定義焦點看起來很棒，檢查顏色對比度，確保它通過，字體你有一些選擇，當它們的重量更高並且它們更大時，它們會變得更大。 它們的顏色對比度不一定是 4.5。 它實際上可能會低一點，但你只想關注這些事情。 就像你也會關注體驗一樣。 你會想要關注那些你在設計中留心和註釋的東西。

斯科特：所以我們還有幾分鐘的時間。 所以我再問一個問題。 有些人認為可訪問性會扼殺整個設計過程的創造力。 你遇到過這樣的事嗎？ 你認為創意如何融入無障礙設計？

亞倫·珀爾曼：當然。 這是我對必須進行無障礙設計的最初反應之一，基本上有人給我戴上手銬，然後說，“你必須能夠在一個小得多的盒子里工作。” 確實，無障礙設計意味著可能會面臨更多挑戰，因為您必須遵守更多規則。 但最後，我發現體驗最終變得更好，但我沒有……一旦我刪除了這個誤稱並開始做越來越多的 WCAG 2.0 AA 可訪問的設計，我注意到我幾乎可以做任何事情我想做的事。

Aaron Pearlman：我有時只需要以與以前略有不同的方式表達或解決問題。 我想很多人在考慮無障礙設計時……我會給你一個非常具體的例子。 當他們考慮設計可訪問性時，他們會想，“哦，好吧，例如，我不能做所有這些花哨的可視化。 我將無法做所有這些事情，因為它們將無法訪問，因為如果一個人看不到它們，我將無法做到這一點。”

Aaron Pearlman：我正在設計一個基本的可視化，只是一種折線圖，在它們下面，有一個折線圖，在 x 軸上我認為是時間，在 y 軸上是使用情況或類似的東西那。 有一個漂亮的小漸變從它上面下來，在它後面有一些光線來描繪月份和時間。 當我與我的一位主題專家談論使其易於訪問時，結果證明我確信他會說，“不。” 但他說，實際上我只需要做一些事情來使這個非常漂亮的圖表易於訪問。 第一，頂部的那條線需要通過顏色對比，因為這實際上是在傳達隨時間變化的趨勢信息。

Aaron Pearlman：它下面的漸變的東西只是裝飾，只要它不干擾顏色對比和 y 和 x 軸線的傳遞並且最終沒問題。 它後面的那些線沒問題，但我最終在底部添加了刻度線以表明這一點。 然後當我懸停並集中註意力時，因為有時你可以懸停在它上面，它會在折線圖的一部分上添加一個點，只要確保點本身會傳遞顏色。 對比。 我做了那種甜甜圈的事情，你把一個白點和另一個點放在一起，或者我應該說它的外面也有一個大筆劃。

Aaron Pearlman：然後我在其中添加了一點處理，將那些淡化的線條帶回前方。 而且這一切都通過了顏色對比，結果很好。 通過了非常漂亮的可視化。 現在授予，我沒有進入所有可訪問的名稱內容並且能夠做到這一點。 許多圖書館都在上面。 撇開這些不談，至少我們稱之為對比，因為我認為很多設計師都在苦苦掙扎。 你能行的。

Aaron Pearlman：這只是要真正注意這些類型的事情，獲得更多的例子，嘗試和嘗試不同的事情，讓其他人可以向你提出這些想法，然後來回反複檢查，真的去做。 我不認為它真的會抑制任何東西。 它只是讓你必須更清楚地思考你將如何做到這一點，並確保你通過鏡頭看到一個人如果視力低下，或者如果他們不能做到這一點。如果您正在構建媒體應用程序，則根本看不到或聽不到。

斯科特：還有一個問題，但我認為我們應該談到它。 您在流程的哪個階段開始考慮可訪問性？ 我將假設整個過程。

Aaron Pearlman：是的，它貫穿於整個過程。 我會多一點，而不是……我知道我說的是誰，這聽起來有點輕率。 因此，在您進行低保真原型設計之類的事情的早期，您將考慮諸如一些標籤順序之類的事情。 你可能會考慮標題和結構之類的事情。 這些是您考慮的可訪問性類型。 稍後，隨著保真度的提高，您將更多地考慮諸如您選擇的顏色和托盤，可能是可訪問的名稱，可能值得考慮的任何內容的替代文本，您可能正在考慮，例如，如果您正在做任何自定義焦點，那可能就是您要開始考慮的地方。

Aaron Pearlman：這並不意味著當你做低保真度時你不能考慮它只是意味著一般來說，當我經歷我的過程時，這些事情往往屬於這些類別。 你一直在考慮可訪問性，但你並不總是考慮它的所有內容，因為你在低保真度的東西中，你在構思，你只是在考慮想法，你只是通過想法工作，讓那些有創意的東西通過，當你變得更加適應可訪問性時，它就會從本質上進入，並且會有更少的有意識的東西。

斯科特：是的。 很公平。 好吧，在這點上，我們已經沒時間了，亞倫。 非常感謝您抽出寶貴時間，並且——

Aaron Pearlman：那太好了。 我度過了一段美好的時光。

斯科特：我想你會參加接下來的幾次 Smashing 會議。

Aaron Pearlman：我會在紐約的那個。 我會在紐約的那個。

斯科特：好的。 你們在那裡開研討會嗎？

Aaron Pearlman：是的，我們是。

斯科特：好的。 驚人的。 好吧，再次感謝您抽出寶貴的時間，讓我們看看仍在觀看的成員，下週我們將舉辦兩場網絡研討會。 第一個是數字人的力量，與 Kristina Podnar 合作。 然後我們在與 Andrew Clarke 的系列中排名第三，Inspired Designs Decisions，排名第三的靈感來自 Ernest Journal。 非常感謝大家今天的出席。 同樣，一旦我們完成編輯，該錄音將在派遣會員面板中提供，我們希望下週與大家見面。 所以再次感謝艾琳。

這是一個包裝！

我們衷心感謝 Smashing 會員的持續和善意支持——我們迫不及待地想在未來舉辦更多網絡研討會。

我們非常高興地歡迎 Aaron 參加我們即將舉行的紐約 SmashingConf（10 月 15 日至 16 日）——我們也很高興在那裡見到你！

如果您覺得這一系列採訪有用，請告訴我們，您希望我們採訪誰，或者您希望我們涵蓋哪些主題，我們會盡快處理。