為可訪問性和包容性而設計

“可訪問性在設計階段就解決了。” 這是 Daniel Na 和他的團隊在參加會議時一遍又一遍地聽到的一句話。 為可訪問性而設計意味著包容用戶的需求。 這包括您的目標用戶、目標人群之外的用戶、殘障用戶，甚至來自不同文化和國家的用戶。 了解這些需求是為他們打造更好、更容易獲得的體驗的關鍵。

設計可訪問性時最常見的問題之一是知道您應該設計什麼需求。 並不是我們故意設計排斥用戶，只是“我們不知道我們不知道什麼”。 因此，在可訪問性方面，有很多要了解的。

我們如何去了解無數的用戶和他們的需求？ 我們如何確保他們的需求在我們的設計中得到滿足？ 為了回答這些問題，我發現應用批判性分析技術從不同的角度觀察設計是有幫助的。

“當您從許多不同的角度或鏡頭查看您的 [設計] 時，就會出現好的 [可訪問] 設計。”

— 遊戲設計的藝術：鏡頭之書

鏡頭是“一個縮小的過濾器，通過它可以考慮或檢查一個主題。” 通常用於檢查藝術作品、文學作品或電影，鏡頭要求我們拋開我們的世界觀，而是通過不同的背景來看待世界。

例如，從歷史的角度來看藝術要求我們了解“當時的社會、政治、經濟、文化和/或知識氛圍”。 這使我們能夠更好地了解哪些世界影響了藝術家，以及這些影響如何塑造了藝術品及其信息。

可訪問性鏡頭是一種過濾器，我們可以使用它來了解設計的不同方面如何影響用戶的需求。 每個鏡頭都會在整個設計過程中提出一組問題來問自己。 通過使用這些鏡頭，您將更加包容用戶的需求，從而為所有人設計更易於訪問的用戶體驗。

可訪問性的鏡頭是：

• 動畫和特效鏡頭
• 音視頻鏡頭
• 彩色鏡片
• 控製鏡頭
• 字體的鏡頭
• 圖像和圖標的鏡頭
• 鍵盤鏡頭
• 佈局的鏡頭
• 物質誠實的鏡頭
• 可讀性的鏡頭
• 結構的鏡頭
• 時間的鏡頭

您應該知道，並非每個鏡頭都適用於每種設計。 雖然有些可以適用於每種設計，但有些則更具情境性。 在一種設計中最有效的東西可能不適用於另一種設計。

每個鏡頭提供的問題只是幫助您了解可能出現的問題的工具。 與往常一樣，您應該與用戶一起測試您的設計，以確保他們可以使用和訪問。

動畫和特效鏡頭

有效的動畫可以幫助使頁面和品牌栩栩如生，引導用戶關注並幫助定位用戶。 但動畫是一把雙刃劍。 濫用動畫不僅會導致混亂或分散注意力，而且對某些用戶來說也可能是致命的。

快速閃爍效果（定義為每秒閃爍超過 3 次）或高強度效果和模式可導致癲癇發作，稱為“光敏性癲癇”。 光敏性也會引起頭痛、噁心和頭暈。 患有光敏性癲癇的用戶在使用網絡時必須非常小心，因為他們永遠不知道什麼時候可能會導致癲癇發作。

其他效果，例如視差或運動效果，可能會導致一些用戶因前庭敏感而感到頭暈或眩暈。 前庭系統控制人的平衡和運動感。 當這個系統不能正常工作時，它會導致頭暈和噁心。

“想像一個你的內部陀螺儀無法正常工作的世界。 就像喝醉了一樣，事情似乎會自行移動，你的腳在你腳下似乎從來都不是很穩定，你的感覺比你的身體移動得更快或更慢。”

— 前庭疾病入門

持續的動畫或動作也會分散用戶的注意力，尤其是難以集中註意力的用戶。 GIF 尤其有問題，因為我們的眼睛被運動所吸引，很容易被任何不斷更新或移動的東西分散注意力。

這並不是說動畫不好，你不應該使用它。 相反，您應該了解為什麼要使用動畫以及如何設計更安全的動畫。 一般來說，你應該盡量設計覆蓋距離小的動畫，匹配其他移動物體（包括滾動）的方向和速度，並且對屏幕尺寸相對較小。

您還應該提供控件或選項來滿足用戶的體驗。 例如，Slack 允許您將動畫圖像或表情符號隱藏為全局設置和每個圖像。

要使用動畫和效果鏡頭，請問自己以下問題：

• 是否有任何可能導致癲癇發作的影響？
• 是否有任何動畫或效果可能通過使用運動導致頭暈或眩暈？
• 是否有任何動畫可能會因不斷移動、閃爍或自動更新而分散注意力？
• 是否可以提供控件或選項來停止、暫停、隱藏或更改任何動畫或效果的頻率？

音視頻鏡頭

自動播放視頻和音頻可能很煩人。 它們不僅打破了用戶的注意力，而且還迫使用戶尋找違規媒體並將其靜音或停止。 作為一般規則，不要自動播放媒體。

“謹慎使用自動播放。 自動播放可以是一種強大的參與工具，但如果播放了不想要的聲音，或者他們認為由於不需要的視頻播放而導致不必要的資源使用（例如數據、電池），它也會讓用戶感到厭煩。”

— 谷歌自動播放指南

您現在可能會問，“但是如果我在後台自動播放視頻但保持靜音怎麼辦？” 雖然在當今的網頁設計中使用視頻作為背景可能是一種增長趨勢，但背景視頻與 GIF 和不斷移動的動畫存在相同的問題：它們可能會分散注意力。 因此，您應該提供暫停或禁用視頻的控件或選項。

除控件外，視頻還應具有腳本和/或字幕，以便用戶可以以最適合他們的方式消費內容。 視障用戶或寧願閱讀而不是觀看視頻的用戶需要腳本，而無法或不想听視頻的用戶則需要字幕。

要使用音頻和視頻鏡頭，請問自己以下問題：

• 是否有任何音頻或視頻可能會因自動播放而煩人？
• 是否可以提供控件來停止、暫停或隱藏任何自動播放的音頻或視頻？
• 視頻是否有文字記錄和/或字幕？

彩色鏡片

顏色在設計中起著重要的作用。 顏色喚起情感、感覺和想法。 顏色還可以幫助加強品牌的信息和認知。 然而，當用戶看不到顏色或以不同方式感知顏色時，顏色的力量就會消失。

色盲影響大約每 12 名男性中的 1 名和每 200 名女性中的 1 名。 Deuteranopia（紅綠色盲）是最常見的色盲形式，影響約 6% 的男性。 紅綠色盲的用戶通常將紅色、綠色和橙色視為淡黃色。

對於國際用戶來說，顏色含義也存在問題。 顏色在不同的國家和文化中意味著不同的東西。 在西方文化中，紅色通常用於代表消極趨勢和綠色積極趨勢，但在東方和亞洲文化中則相反。

因為顏色及其含義可能會因文化差異或色盲而丟失，所以您應該始終添加非顏色標識符。 諸如圖標或文本描述之類的標識符可以幫助彌合文化差異，而圖案則可以很好地區分顏色。

過度飽和的顏色、高對比度的顏色，甚至只是黃色，對於一些用戶來說可能會讓人感到不舒服和不安，尤其是那些自閉症患者。 最好避免這些顏色的高濃度，以幫助用戶保持舒適。

前景和背景顏色之間的對比度差，使視力不佳的用戶、使用低端顯示器或只是在陽光直射下的用戶更難看清。 供使用鍵盤的用戶使用的所有文本、圖標和任何焦點指示符與背景顏色的最小對比度應為 4.5:1。

您還應該確保您的設計和顏色在 Windows 高對比度模式的不同設置下都能正常工作。 一個常見的缺陷是文本在某些高對比度模式的背景上變得不可見。

要使用彩色鏡頭，請問自己以下問題：

• 如果從設計中去掉顏色，會失去什麼意義？
• 不使用顏色如何提供意義？
• 是否有任何顏色過飽和或具有高對比度，可能導致用戶過度刺激或不舒服？
• 所有文本、圖標和焦點指示器的前景色和背景色是否符合 4.5:1 的對比度準則？

控製鏡頭

控件，也稱為“交互式內容”，是用戶可以與之交互的任何 UI 元素，可以是按鈕、鏈接、輸入或任何帶有事件偵聽器的 HTML 元素。 控件太小或太靠近會給用戶帶來很多問題。

對於無法準確使用指針的用戶，例如顫抖的用戶，或因年齡而導致靈活性下降的用戶，很難點擊小控件。 例如，複選框和單選按鈕的默認大小可能會給老用戶帶來問題。 即使提供了可以點擊的標籤，也不是所有用戶都知道他們可以這樣做。

太靠近的控件可能會給觸摸屏用戶帶來問題。 手指很大，很難精確。 不小心觸摸了錯誤的控件可能會導致挫敗感，尤其是當該控件將您帶走或讓您失去上下文時。

嵌套在另一個控件中的控件也可能導致觸摸錯誤。 它不僅在 HTML 規範中是不允許的，而且還很容易意外選擇父控件而不是您想要的那個。

為了給用戶足夠的空間來準確選擇控件，建議控件的最小尺寸為 34 x 34 設備獨立像素，但 Google 建議至少為 48 x 48 像素，而 WCAG 規范建議至少為 44 x 44 像素。 此大小還包括控件具有的任何填充。 因此，一個控件在視覺上可能是 24 x 24 像素，但在所有邊上增加 10 像素的填充會使它達到 44 x 44 像素。

還建議將控件放置得足夠遠，以減少觸摸錯誤。 Microsoft 建議至少 8 像素間距，而 Google 建議控件間距至少 32 像素。

控件還應該有一個可見的文本標籤。 不僅屏幕閱讀器需要文本標籤來了解控件的作用，而且已經表明文本標籤可以幫助所有用戶更好地理解控件的用途。 這對於表單輸入和圖標尤其重要。

要使用控製鏡頭，請問自己以下問題：

• 是否有任何控件不夠大，讓人無法觸摸？
• 是否有任何控件靠得太近而容易觸錯？
• 另一個控件或可點擊區域內是否有任何控件？
• 所有控件都有可見的文本標籤嗎？

字體的鏡頭

在網絡的早期，我們設計的網頁字體大小在 9 到 14 像素之間。 這在當時效果很好，因為顯示器的屏幕尺寸相對已知。 我們設計時認為瀏覽器窗口是一個常數，無法更改。

今天的技術與 20 年前大不相同。 今天，瀏覽器可以在任何尺寸的任何設備上使用，從小手錶到巨大的 4K 屏幕。 我們不能再使用固定的字體大小來設計我們的網站。 字體大小必須與設計本身一樣靈敏。

不僅字體大小應該具有響應性，而且設計應該足夠靈活，以允許用戶自定義字體大小、行高或字母間距以達到舒適的閱讀水平。 許多用戶使用自定義 CSS 來幫助他們獲得更好的閱讀體驗。

字體本身應該易於閱讀。 您可能想知道一種字體是否比另一種字體更具可讀性。 事情的真相是字體並沒有真正影響可讀性。 相反，字體樣式在字體可讀性中起著重要作用。

對於許多用戶來說，裝飾性或草書字體樣式更難閱讀，但對於有閱讀障礙的用戶來說尤其成問題。 小字體、斜體文本和全大寫文本對用戶來說也很困難。 總體而言，更大的文本、更短的行長、更高的行高和增加的字母間距可以幫助所有用戶獲得更好的閱讀體驗。

要使用Lens of Font ，請問自己以下問題：

• 設計是否足夠靈活，用戶可以將字體修改為舒適的閱讀水平？
• 字體樣式是否易於閱讀？

圖像和圖標的鏡頭

他們說，一張圖片勝過千言萬語。” 不過，你看不到的圖片是無語的，對吧？

圖像可用於設計以傳達特定的含義或感覺。 其他時候，它們可以用來簡化複雜的想法。 無論圖像是哪種情況，都需要告知使用屏幕閱讀器的用戶圖像的含義。

作為設計師，您最了解圖像所傳達的含義或信息。 因此，您應該使用此信息對設計進行註釋，以便以後不會遺漏或誤解。 這將用於為圖像創建替代文本。

您如何描述圖像完全取決於上下文，或者描述信息的文本信息已有多少。 它還取決於圖像是否僅用於裝飾、傳達意義或包含文本。

“你幾乎從不描述圖片的樣子，而是解釋圖片包含的信息。”

— 合規替代文本的五個黃金法則

由於知道如何描述圖像可能很困難，因此有一個方便的決策樹可以在決定時提供幫助。 一般來說，如果圖像是裝飾性的，或者周圍的文字已經描述了圖像的信息，則不需要進一步的信息。 否則，您應該描述圖像的信息。 如果圖像包含文本，請重複描述中的文本。

描述應該簡潔。 建議不要超過兩個句子，但盡可能使用一個簡潔的句子。 這使用戶無需聽冗長的描述即可快速理解圖像。

例如，如果您要為屏幕閱讀器描述此圖像，您會怎麼說？

由於我們描述的是圖像的信息而不是圖像本身，因此描述可能是文森特梵高的《星夜》 ，因為沒有其他描述它的周圍環境。 你不應該放的是對繪畫風格或圖片外觀的描述。

如果圖像的信息需要冗長的描述，例如復雜的圖表，則不應將該描述放在替代文本中。 相反，您仍應為替代文本使用簡短描述，然後將長描述作為標題或指向不同頁面的鏈接提供。

這樣，用戶仍然可以快速獲得最重要的信息，但如果他們願意，還可以進一步挖掘。 如果圖像是圖表，您應該像對圖像中的文本一樣重複圖表的數據。

如果您設計的平台允許用戶上傳圖片，您應該為用戶提供一種方法來輸入圖片和替代文本。 例如，Twitter 允許其用戶在將圖像上傳到推文時編寫替代文本。

要使用圖像和圖標鏡頭，請問自己以下問題：

• 是否有任何圖像包含不可見時會丟失的信息？
• 我如何以非視覺方式提供信息？
• 如果圖像由用戶控制，是否可以為他們提供一種輸入替代文本描述的方法？

鍵盤鏡頭

鍵盤可訪問性是可訪問設計中最重要的方面之一，但它也是最容易被忽視的方面之一。

用戶使用鍵盤而不是鼠標的原因有很多。 使用屏幕閱讀器的用戶使用鍵盤閱讀頁面。 顫抖的用戶可能會使用鍵盤，因為它比鼠標提供更好的準確性。 即使是高級用戶也會使用鍵盤，因為它更快、更高效。

使用鍵盤的用戶通常使用 tab 鍵按順序導航到每個控件。 Tab 鍵的邏輯順序極大地幫助用戶了解下一次按鍵將把他們帶到哪裡。 在西方文化中，這通常意味著從左到右，從上到下。 意外的標籤順序會導致用戶迷失方向，不得不瘋狂地掃描焦點所在的位置。

連續的 Tab 鍵順序還意味著他們必須在他們想要的控件之前的所有控件中進行 Tab 鍵。 如果該控件在數十或數百次擊鍵之外，它可能是用戶真正的痛點。

通過使最重要的用戶流更接近標籤順序的頂部，我們可以幫助我們的用戶提高效率和效率。 然而，這並不總是可行的，也不實際。 在這些情況下，提供一種快速跳轉到特定流程或內容的方法仍然可以讓它們變得高效。 這就是為什麼“跳轉到內容”鏈接很有幫助的原因。

一個很好的例子是 Facebook，它提供了一個鍵盤導航菜單，允許用戶跳轉到網站的特定部分。 這極大地提高了用戶與頁面和他們想要的內容進行交互的能力。

在瀏覽設計時，焦點樣式應始終可見，否則用戶很容易迷失方向。 就像意外的標籤順序一樣，沒有好的焦點指示器會導致用戶不知道當前的焦點是什麼而不得不掃描頁面。

更改默認焦點指示器的外觀有時可以改善用戶體驗。 一個好的焦點指示器不僅僅依靠顏色來指示焦點（顏色透鏡），而且應該足夠清晰，以便用戶輕鬆找到它。 例如，類似顏色的藍色按鈕周圍的藍色對焦環可能在視覺上並不明顯，無法辨別它是否已對焦。

儘管此鏡頭側重於鍵盤可訪問性，但需要注意的是，它適用於用戶無需鼠標即可與網站交互的任何方式。 嘴棒、開關訪問按鈕、sip 和 puff 按鈕以及眼動追踪軟件等設備都要求頁面可以通過鍵盤訪問。

通過改進鍵盤可訪問性，您可以讓廣大用戶更好地訪問您的網站。

要使用鍵盤鏡頭，請問自己以下問題：

• 什麼樣的鍵盤導航順序對設計最有意義？
• 鍵盤用戶如何以最快的方式獲得他們想要的東西？
• 焦點指示器是否始終可見且視覺上不同？

佈局的鏡頭

佈局對網站的可用性有很大貢獻。 擁有易於遵循的佈局和易於查找的內容會對您的用戶產生重大影響。 佈局應該具有對用戶有意義且符合邏輯的順序。

隨著 CSS Grid 的出現，能夠根據可用空間將佈局更改為更有意義比以往任何時候都更容易。 但是，更改視覺佈局會給依賴頁面結構佈局的用戶帶來問題。

結構佈局是屏幕閱讀器和使用鍵盤的用戶使用的佈局。 當視覺佈局改變但底層結構佈局沒有改變時，這些用戶可能會因為他們的標籤順序不再合乎邏輯而感到困惑。 如果您必須更改視覺佈局，您應該通過更改結構佈局來實現，以便使用鍵盤的用戶保持順序和邏輯的 Tab 鍵順序。

佈局應可調整大小且靈活至至少 320 像素，沒有水平滾動條，以便在手機上舒適地查看。 對於需要增加字體大小以獲得更好閱讀體驗的用戶，佈局還應該足夠靈活，可以放大到 400%（也沒有水平滾動條）。

當相關內容彼此靠近時，使用屏幕放大鏡的用戶會受益。 屏幕放大鏡僅向用戶提供整個佈局的一個小視圖，因此相關但距離較遠的內容，或遠離交互發生位置的內容很難找到並且可能被忽視。

要使用佈局鏡頭，請問自己以下問題：

• 佈局是否具有有意義且合乎邏輯的順序？
• 當在小屏幕上查看或放大到 400% 時，佈局會發生什麼變化？
• 由於用戶交互而相關或更改的內容是否彼此靠近？

物質誠實的鏡頭

材料誠實是一種建築設計價值，它表明材料應該對自己誠實，而不是用作另一種材料的替代品。 這意味著混凝土應該看起來像混凝土，而不是被塗漆或雕刻成看起來像磚塊。

材料誠實重視並慶祝每種材料的獨特屬性和特性。 遵循材料誠實的建築師知道何時應該使用每種材料以及如何使用它而不會使自己失去光澤。

不過，物質上的誠實並不是硬性規定。 它位於一個連續統一體上。 像所有價值觀一樣，當你理解它們時，你可以打破它們。 俗話說，它們“更像是你所說的‘指導方針’，而不是實際的規則。”

當應用於網頁設計時，材料誠實意味著一個元素或組件不應看起來、行為或功能就像另一個元素或組件一樣。 這樣做會欺騙用戶並可能導致混亂。 一個常見的例子是看起來像鏈接的按鈕或看起來像按鈕的鏈接。

鏈接和按鈕具有不同的行為和可供性。 使用回車鍵激活鏈接，通常會將您帶到不同的頁面，並在右鍵單擊時具有特殊的上下文菜單。 按鈕使用空格鍵激活，主要用於觸發當前頁面上的交互，並且沒有這樣的上下文菜單。

當鏈接的樣式看起來像按鈕或反之亦然時，用戶可能會感到困惑，因為它的行為和功能不像它看起來那樣。 如果“按鈕”意外地引導用戶離開，他們可能會因為在此過程中丟失數據而感到沮喪。

“乍一看，一切看起來都很好，但經不起推敲。 一旦這樣一個網站通過一系列瀏覽器的實際使用情況進行壓力測試，它的外觀就會崩潰。”

— 彈性網頁設計

這成為最成問題的地方是當鏈接和按鈕的樣式相同並且彼此相鄰放置時。 由於兩者之間沒有任何區別，用戶可能會在他們認為不會導航時意外導航。

當組件的行為與預期不同時，很容易給使用鍵盤或屏幕閱讀器的用戶帶來問題。 一個不只是自動完成菜單的自動完成菜單就是一個這樣的例子。

自動完成用於建議或預測用戶正在輸入的單詞的其餘部分。 當不能顯示所有選項時，自動完成菜單允許用戶從大量選項列表中進行選擇。

自動完成菜單通常附加到輸入字段，並使用向上和向下箭頭鍵導航，將焦點保持在輸入字段內。 當用戶從列表中選擇一個選項時，該選項將覆蓋輸入字段中的文本。 自動完成菜單意味著只是文本列表。

當自動完成菜單開始獲得更多行為時，就會出現問題。 您不僅可以從列表中選擇一個選項，還可以對其進行編輯、刪除，甚至展開或折疊部分。 自動完成菜單不再只是一個簡單的可選文本列表。

添加的行為不再意味著您可以只使用向上和向下箭頭來選擇一個選項。 現在，每個選項都有多個操作，因此用戶需要能夠遍歷兩個維度而不僅僅是一個維度。 這意味著使用鍵盤的用戶可能會對如何操作組件感到困惑。

屏幕閱讀器受這種行為變化的影響最大，因為沒有簡單的方法可以幫助他們理解它。 需要做大量工作來確保屏幕閱讀器可以使用非標準方式訪問菜單。 因此，這可能會導致他們的體驗低於標准或無法訪問。

為了避免這些問題，最好對用戶和設計誠實。 不要將兩種不同的行為（自動完成菜單以及編輯和刪除功能）結合起來，而是將它們保留為兩種不同的行為。 使用自動完成菜單僅自動完成用戶名，並使用不同的組件或頁面來編輯和刪除用戶。

要使用物質誠實的鏡頭，請問自己以下問題：

• 設計是否對用戶誠實？
• 是否有任何元素的行為、外觀或功能與另一個元素一樣？
• 是否有任何組件將不同的行為組合成一個組件？ 這樣做是否會使該組件在實質上不誠實？

可讀性的鏡頭

你是否曾經拿起一本書，只讀了幾段或幾頁，卻因為文字太難讀而想放棄？ 難以閱讀的內容是精神上的負擔和累人。

句子長度、段落長度和語言的複雜性都會影響文本的可讀性。 複雜的語言會給用戶帶來問題，尤其是那些有認知障礙或語言不流利的用戶。

除了使用簡單明了的語言外，您還應該確保每個段落都集中在一個想法上。 具有單一想法的段落更容易記住和消化。 單詞較少的句子也是如此。

另一個影響內容可讀性的因素是行的長度。 理想的行長通常被引用為 45 到 75 個字符。 過長的線條會導致用戶注意力不集中，難以正確移動到下一行，而過短的線條會導致用戶跳躍過於頻繁，導致眼睛疲勞。

“跳到下一行時，潛意識會充滿活力。 在每行新行的開頭，讀者都會集中註意力，但隨著行的持續時間，這種注意力會逐漸消失”

— 排版：設計手冊

您還應該用標題、列表或圖像來分解內容，讓讀者在精神上休息並支持不同的學習方式。 使用標題對信息進行邏輯分組和總結。 標題、鏈接、控件和標籤應清晰且具有描述性，以增強用戶的理解能力。

要使用可讀性鏡頭，請問自己以下問題：

• 語言是否簡單明了？
• 每個段落都集中在一個想法上嗎？
• 是否有任何長段落或長段不間斷的文本？
• 所有標題、鏈接、控件和標籤是否清晰且具有描述性？

結構的鏡頭

正如佈局鏡頭中提到的，結構佈局是屏幕閱讀器和使用鍵盤的用戶使用的佈局。 Lens of Layout 專注於視覺佈局，Lens of Structure 專注於結構佈局，或設計的底層 HTML 和語義。

作為設計師，您可能不會編寫設計的結構佈局。 這不應該阻止您思考您的設計最終將如何構建。 否則，您的設計可能會導致屏幕閱讀器無法訪問。

以單場淘汰錦標賽支架的設計為例。

您如何知道使用屏幕閱讀器的用戶是否可以訪問此設計？ 如果不了解結構和語義，您可能不會。 就目前而言，該設計可能會給使用屏幕閱讀器的用戶帶來無法訪問的體驗。

要理解為什麼會這樣，我們首先必須了解屏幕閱讀器按順序閱讀頁面及其內容。 這意味著將讀取錦標賽第一列中的每個名字，然後是第二列中的所有名字，然後是第三列，然後是最後一個。

“喬治，弗雷德，萊納斯，露西，傑克，吉爾，弗雷德，姜，喬治，露西，傑克，姜，喬治，姜，姜。”

如果你只有一個看似隨機的名字列表，你會如何解釋比賽的結果？ 你能說誰贏得了比賽嗎？ 或者誰贏了第六場比賽？

沒有更多的東西可以使用，使用屏幕閱讀器的用戶可能會對結果感到有點困惑。 為了能夠理解視覺設計，我們必須在結構設計中為用戶提供更多的信息。

這意味著作為設計師，您需要了解屏幕閱讀器如何與頁面上的 HTML 元素交互，以便了解如何增強他們的體驗。

• 地標元素（頁眉、導航、主要和頁腳）
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” 你可能會問。

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

把它放在一起

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”