在公司中建立真正的數位可訪問性文化是一項堅韌和毅力的使命。關於可達性的討論不難陷入常見的陳腔濫調。可訪問性對於人們來說非常重要。數位產品和服務的可及性促進了包容性。或者甚至,團隊中的所有專業人員都應該參與無障礙工作。當然。任何心智正常的人都不會質疑這些說法(我希望如此)。 然而,很少有公司能夠觸及的第二部分是「如何做?」我們如何在數位轉型團隊的日常工作中實現這一目標?眾所周知,數位轉型團隊沉浸在要求很高的腳本中,而且可用人員的數量通常非常有限?大多數時候,最終的選擇是在「我們這樣做」和「我們這樣做」之間。它不應該,因為,在這些情況下,我從未見過可訪問性在這個等式中獲勝。 不應該是這樣的。你不需要這樣。首先,因為在可訪問性和其他任何東西之間進行選擇並不是正確的選擇。輔助功能不再只是添加到其他功能中的另一個功能。這是企業的附加價值,目前也是一項可能為公司帶來嚴重後果的法律義務。另一方面,有一些智慧、優化且有影響力的方法可以將可訪問性原則融入團隊的自然動態中。可以在不顛覆團隊運作的情況下致力於可訪問性。從本質上講,這就是 AccessibilityOps 所做的。賦予人們權力並為團隊提供簡單的流程,以便他們可以將無障礙工作融入他們的日常生活中,而無需付出過多的努力。 可及性和設計 在設計中致力於數位無障礙可能涉及多項行動。顯然,我們需要特別注意顏色以及如何使用它來傳達含義。當然,元素的互動尺寸必須舒適。但最重要的是,我們必須從多元化的角度來思考設計。介面不是海報。我們可以控制設計的許多方面,但使用者與介面的互動方式受到無數變數的影響。設備類型、環境、用途、網路品質等。所有這些都極大地影響每個人的體驗和互動。除此之外,當數位可訪問性問題被納入設計過程時,它會增加更多的變數。

人們經常使用所謂的輔助技術和策略。基本上,這些都是技術工具,或至少是人們為了找到更舒適的使用模式而採用的「技巧」。例如,著名的螢幕閱讀器通常與盲人的使用相關(但不僅對盲人有用),也是一種輔助技術。改變不同元素之間的顏色或顏色對比也是一種輔助技術。增加字體大小(我們在本文中討論過)是另一個例子。有無數的輔助技術和策略。幾乎與每個人的不同使用環境一樣多。 我們無法控制一切 換句話說(這對我們設計師來說是「壞消息」),從使用者的角度來看,「我們的設計」會受到我們無法控制的轉換的影響。它將由用戶“改造”,確保他們能夠以最舒適的方式與應用程式及其提供的一切進行互動。這是一件好事。如果發生這種情況並且一切順利,我們肯定會很好地完成我們的無障礙工作,我們都值得祝賀。如果用戶應用任何這些支援技術和策略,但仍然無法使用數位應用程序,則表示某些功能未如預期運作。 哦,說到這一點。甚至不要考慮阻止這些技術或支援策略的使用。他們可能會「破壞」你美麗的設計,但他們正在讓越來越多的人真正使用該應用程式。最後,這不正是我們承諾要做的事嗎?為(所有人)人設計。無一例外嗎? 增加字體大小 我們有多少次聽到有人——朋友、家人,甚至同事——抱怨這個或那個文字太小?文本在數位體驗中發揮著非常重要的作用。很多訊息都是透過文字傳達的:使用說明、按鈕標題或互動元素。所有這一切都使用文本作為溝通工具。如果閱讀所有這些元素都很困難,自然,體驗就會受到嚴重影響。 舒適的文本閱讀,無論其功能為何,都是一條不容商榷的原則。透過在設計中使用舒適的尺寸可以促進這種閱讀。然而,支援技術和策略,透過增加字體大小的功能,也可以幫助提高可讀性。根據APPT數據,26%的Android和iOS行動裝置用戶增加了預設字體大小(2026年2月數據)。四分之一的用戶增加了智慧型手機上的字體大小。這是一個非常重要的人員樣本,使得此功能在設計過程中不可避免。

遵守指南 增加介面中的字體大小可能會帶來巨大的設計挑戰。重要的是要理解,由於使用者操作,某些文字元素的大小可能會突然從初始大小增加一倍。 「除了標題和文字圖像之外,無需輔助技術即可將文字大小調整高達 200%,且不會丟失內容或功能。」——成功標準 1.4.4,《網絡內容可訪問性指南》(WCAG) 2.2 版的“調整文本大小”

此成功標準處於 AA 合規級別,這意味著根據任何法律框架,這都是絕對強制性的功能。 這個成功標準中的200%很容易理解。如果我們假設我們以 100% 的比例設計介面,這意味著元素大小是初始大小,那麼將文字增加最多 200% 將相當於初始大小加倍。也可以使用其他放大比例,例如120%、140%等。換句話說,我們必須確保使用者可以透過支援技術或策略將文字增大到初始大小的一倍(這不是一個小細節)。 為了遵守這個標準,我們不需要在介面中提供文字大小增加工具。實際上,這些功能只不過是冗餘。設備已經允許以標準化方式完成此操作。真正需要此設定的用戶知道這一點(因為沒有它,他們的生活會更加困難)。好吧,他們已經在他們的設備上應用了這個設定。這意味著我們可以消除這些額外的介面元素,從而簡化體驗。

標準化訪問 關於輔助技術,尤其是在增加字體大小的情況下,需要記住的一個重要概念是,大多數設備已經預設安裝了許多此類工具。換句話說,在許多情況下,使用者不需要購買自己的軟體或購買特定類型的設備來獲得此功能。 無論是在行動裝置上還是在網頁瀏覽器上,在絕大多數情況下,都很容易找到已安裝的功能,這些功能可讓您增加我們在整個介面中使用的預設字體大小。這種增加字體大小的原則可以應用於數位產品,例如應用程序,甚至可以應用於當今使用的標準網頁瀏覽器上運行的任何類型的網站。 iPhone 在 iPhone 裝置上,預設整合了字體增大功能。要使用此功能,只需訪問“設定”面板,選擇“輔助功能”,然後在“視覺”選項組中,訪問“文字大小和顯示”功能並配置該畫面上所需的字體大小增加。

谷歌瀏覽器 預設情況下,Web 瀏覽器還提供增大字體大小的功能。例如,在 Google Chrome 中,此功能可在「選項」面板中使用,特別是在「外觀」區域。在此群組中出現的選項清單中,只需選擇「字體大小」選項即可。通常情況下,會選擇“中-推薦”選項。您可以將此設定變更為任何其他可用的字體大小。例如,嘗試“非常大”選項。

在 Figma 中測試 為了確保數位無障礙工作在團隊的日常生活中發揮作用,找到簡單的工作流程至關重要。可以整合到團隊日常工作中的行動或舉措,以全面的方式解決可訪問性問題,並且不需要對當前現實進行巨大的轉變。他相信,如果有必要的話,大多數情況下都不會發生。因此,設計簡單的工作流程是真正實現可訪問性的一半,在這種情況下案例,也在設計團隊內。 關於測試設計中字體大小的增加,我們今天可以使用非凡的工具。那些還記得在 Adob​​e Photoshop 中設計複雜介面的日子的人會認識到我們今天擁有的工具的差異(值得慶幸的是)。現在,透過 Figma 等工具,可以在設計中創造如此的活力,以至於測試字體大小的增加以提高可訪問性對團隊來說幾乎是不可避免的。

注意:要參加此測試,您需要充分掌握 Figma 的文字樣式、自動佈局和變數。這三個是無需太多額外努力即可獲得成功的基本工具。如果您尚未掌握這些功能,強烈建議您從這裡開始。不要跳過步驟。學習是一個漸進的過程,必須以結構化、循序漸進的方式進行。 我們想去哪裡? 我們想要執行的 Figma 中的字體大小增加測試很簡單。我們希望有一組變數可用於介面中使用的所有文字樣式,從而允許我們選擇是否要以 100%、120%、140%、160%、180% 還是 200% 的比例查看文字比例的介面。當我們應用這組變數時(很像應用淺色和深色模式的變數),我們觀察介面中文字的轉換,並了解具有不同印刷比例的每個版本的介面需要多大程度的適應。

我們如何實現這項目標? 為了讓這個測試順利進行,你需要做一些基礎工作。設計系統可以大大幫助優化大部分初始工作。但我不會騙你。為了使測試順利進行,您的設計需要具有非常嚴格的組織和系統化程度。 這並不是真正的指南,因為每個團隊都有自己的工作模型,而這些建議可以以不同的方式應用(這沒關係)。然而,為了使該測試發揮作用,確保設計中的某些假設非常重要。為了幫助您分階段實施此測試模型,請遵循以下一些步驟。逐步說明將指導您組織文件並確保您能夠以最簡單、最實用的方式完全執行此測試。 1. 設計介面 這一切都始於設計。在進行任何測試之前,重點應該放在我們稍後要測試的每個介面的設計上。現階段,我們稍後將執行的字體大小增加測試仍然沒有具體的關注點。當然,所有介面設計從一開始就應該遵循應用於設計的最基本的可訪問性建議。

2.將自動佈局套用至所有元素 在您創建的每個螢幕設計中,您需要確保完美應用自動佈局。這是非常重要的一步。正是這種自動佈局在整個結構和設計元素中的一致應用,將在我們開始測試字體大小增加時保證介面的可擴展性。你真的不能小看這一步。如果你沒有給予它應有的關注,當我們測試介面中的排版縮放時,你會發現一切都崩潰了,就像瓷器店裡的大像一樣。

3. 建構和套用文字樣式 為了執行我們的字體大小增加測試,我們還需要您將文字樣式套用到每個介面設計。您甚至可能在繪畫時就開始創建它們。偉大的。如果您還沒有這樣做,現在就這樣做很重要。為了讓測試完美地進行,我們確實需要這個。不要在設計中留下任何未套用文字樣式的文字元素。

4. 定義變數集 100% 此測試強制進行相當高程度的最佳化。實際上,這意味著我們必須使用 Figma 變數來表示介面中文字樣式的所有特徵。在此階段,您必須至少為套用於繪圖的文字樣式的字體大小和行高定義Figma「數字」變數。透過此步驟,您將為 100% 視覺化模型(即繪圖的初始版本和參考版本)定義字體大小增加比例值。為繪圖中的每種文字樣式建構這些變數非常重要,因為隨後我們必須考慮每個文字元素的放大比例。

5. 將變數套用到文字樣式 定義 100% 比例文字樣式的變數後,您現在必須套用它們已建立的文字樣式的元素。不要忘記至少將變數應用於字體大小和行高特徵。如果您有更多的印刷變量,那很好。但您至少應該將變數應用於字體大小和行高。這確實非常重要。

6. 定義用於增加文字大小的變數 現在您已將變數套用至 100% 比例文字樣式,下一步是為其他字體大小增加比例建立變數。在實務中,您必須建立變數來告訴系統當增量比例為 120%、140%、160% 等時每種文字樣式將成長到什麼字體大小。 要定義字體大小和行高值,只需將初始值乘以比例百分比即可。例如,如果文字樣式的字體大小為 16px,則 120% 比例的大小將為 16 乘以 1.2,得到的結果為 19.2。對您選擇的字體大小增加比例百分比的所有字體大小和行高值重複此計算。 您也可以選擇是否對最終值套用舍入。這是一個近似測試,因此四捨五​​入可能產生的任何差異不會影響對測試結果的最終感知。

7. 將變數應用於不同的比例版本 關鍵時刻已經到來。下一步是了解我們是否一切正常,以便測試完美運行。因此,您應該複製原始介面,並為每個對您有意義的字體大小增加率應用變數集。對您定義的所有字體大小增加百分比重複此過程。 建議您可以使用 120%、140%、160%、180% 和 200% 的成長百分比作為參考。如果您想簡化,可以減少正在使用的縮放百分比的數量。無論您使用多少百分比,您都應該始終使用最小的 100% 和 200% 比例。

8. 確定需要改進的領域 透過在同一螢幕上套用不同的字體大小放大比例,可以輕鬆了解可能需要改進的地方。這是在介面設計中增加字體大小的真正測試和最有趣的輔助功能工作開始的地方。 在分析各種螢幕時,請記住一些重要的方面:

文本看起來巨大這一事實並不是問題,也不會“破壞”設計。請記住,這可能意味著某人能否使用特定產品或服務之間的差異。 當增加字體大小導致使用者無法閱讀某些文字或啟動某些控制項時,就會存在輔助功能問題。 對於已經很大的文字元素,增加字體大小可能沒有意義。這樣做可能會使這些元素不成比例,這不會提高可讀性(因為它們已經是一個很好的尺寸)並且會佔用完全不必要的空間。 如果有元素似乎從螢幕中彈出,則第一步是確認如何套用自動佈局。透過正確使用自動佈局,可以輕鬆解決許多設計問題。 無論字體大小增加多少,保持排版的視覺層次結構都是至關重要的,因為這種可讀性對於感知螢幕上呈現的不同層級的資訊非常重要。 此測試可以幫助識別可能需要直接在程式碼中進行調整的元素,以便在給定的成長規模下正常運作。並非所有事情都可以僅透過設計來解決,但這很好。可訪問性本質上是團隊的努力。

9. 對設計進行修正與調整 最後,根據應用了不同文字放大比例的各種螢幕,您可以做出有意義的設計變更。其中一些調整可能只需要在程式碼中進行。在這些情況下,您記錄所有這些建議並將其傳遞給開發團隊。同樣重要的是(再次)強調,透過簡單而正確地應用自動佈局屬性,您在設計中可能遇到的一些問題可以在設計過程中快速解決。

10.回到開頭並重複這個過程 這是一種循環方法。這意味著您應該在整個專案中根據需要重複這些步驟或其變體多次。很自然,隨著時間的推移和流程優化,一些這些步驟將不再有意義。這絕對不是問題。但這裡要認識到的最重要的事情是,可訪問性和測試字體大小增加的過程不應該只進行一次,僅此而已。這是一個在每個專案和團隊的日常工作中需要多次完成的測試。

設計系統的作用 乍一看,這個步驟清單似乎是一個複雜的練習。但事實並非如此。這是因為這些步驟中的絕大多數(如果不是全部)都很容易在設計系統存在的任何環境中執行。事實上,設計系統已成為產品設計產業不可避免的標準。我們可以討論每個團隊所謂的設計系統,但事實是,今天很難找到一個至少沒有一個最小結構的元件和樣式庫的產品設計團隊。

有了這個基礎,無論有多少記錄,都可以輕鬆地使用 Figma 變數來應用這種類型的字體大小增加測試。此外,如果您的設計系統已經具有例如用於明暗模式的結構化變量,則表示您已經應用了我們用於執行此測試的完全相同的原則。所以,沒什麼新意。 使用設計系統涉及一定程度的結構化和組織,這對於創建此類測試也非常有用。有一個神話認為設計系統限制了創造力。這不是真的。設計系統有助於解決設計中的「官僚」部分,因此我們實際上可以有更多的時間來做重要的事情:在這種情況下,測試可訪問性並建立越來越多的真正可供大多數人使用的產品和服務。 範例文件 查看範例總是比閱讀流程描述更容易。如果這在許多知識學科、設計領域都是如此,那麼這個前提就更有意義了。因此,在這個免費發布並向社群公開可用的 Figma 檔案中,您將找到此處描述的整個測試過程的實際範例。請記住,這只是一個範例。在 Figma 檔案的上下文中執行此類測試的方法可能有無數種。

請務必以批判的眼光看待這種方法。這是一個按照特定流程測試字體大小增加的建議。儘管如此,該方法應該適應團隊的具體現實、流程和成熟度。簡單地複製其他團隊的公式而不了解它們在我們自己的環境中是否有意義,肯定會導致可訪問性工作不成比例。每種情況都是獨特的。這種方法試圖在這個特定的上下文中盡可能地簡化可訪問性工作。請記住:如果發生了什麼事,無論多麼小,這都是向前邁出的一步,而不是倒退一步。團隊中的每個人都應該慶祝這一點。

You May Also Like

Enjoyed This Article?

Get weekly tips on growing your audience and monetizing your content — straight to your inbox.

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free