扭轉網頁設計的原則,Stark 讓色盲、聽障等 10 億障礙者順暢逛網站

根據世界衛生組織的資料所示,全球有超過 10 億名身心障礙者,約佔據了世界人口的 15%。然而有 98% 的網站,因為字體太小、缺乏語音導覽等原因,並無法保障這些障礙者獲得與一般民眾相同的閱覽體驗。

當世界強調多元、共融的時候,卻鮮少顧慮到障礙者的感受,然而這背後最根本的問題來自於:網頁設計師不知道網頁的哪些設計不符合多元性。

看準這 10 億障礙人口背後達 8 兆美元的商機,美國新創 Stark 推出一款瀏覽器擴充檢查工具,幫助網站設計師即時檢視、修正網站的問題,創造出讓障礙者更容易使用的網站。

Stark functions
看準障礙人口達 8 萬億美元的商機,美國新創 Stark 推出瀏覽器擴充工具,幫助網站設計者創造讓障礙者更容易使用的網站。 (Photo Credit: Stark)

對所有人共融的網頁出自於共融的團隊

為了滿足多元使用者不同的瀏覽需求,讓網站於桌機、手機、平板等各種瀏覽裝置皆能無障礙閱覽,全球資訊網協會 (World Wide Web Consortium, W3C) 發布了《網頁內容可及性指引》(Web Content Accessibility Guidelines),大原則就是提供足以傳達相等意義的「替代內容」,比如說播放影音時,如果關閉聲音,是否能靠影像獲得影音內容所要傳遞的完整資訊;反之,僅靠聲音,不看視訊畫面,是否能清楚理解影音內容。此外包含文字大小、顏色是否適合閱讀、網頁排版是否易於閱讀也都包含在其規範內。

不過其實無障礙網頁的受惠者不只有障礙者,而是「所有人」,非障礙者有時也會有縮放網頁內容的需求,因此很多企業開始重視網站的無障礙性。因為實踐無障礙網站的過程,意味著「讓所有人瀏覽網站時都能享有獲得相同資訊的權利」,這將使得障礙者與非障礙者都能有很好的閱覽體驗,提升在網頁停留的時間,帶來包含提高 SEO 搜尋引擎排名、展示社會責任、避免日後產品迭代時需要從零導入無障礙等優點。

看準背後的商機,以及切身體驗障礙者在閱覽網站時的不易,Stark 的共同創辦人 Cat Noone 及 Michael Fouquet 以「簡化無障礙設計」為目的創立了 Stark。Cat Noone 表示 Stark 團隊中包含她自己,大多數員工都是障礙者,也讓 Stark 團隊更能以感同身受的視角去設計產品。

Google search
無障礙網頁的受惠者是「所有人」,而實踐無障礙網站的過程,就可能帶來包含提高 SEO 搜尋引擎排名的優點。 (Photo Credit: Google)

自動糾出網頁不合格之處,幫助網頁設計師直接進行更改

隨著障礙者的權益越來越被重視,但是企業遇到的問題是:根本不知道標準為何。如果要確保網頁具備可及性,除了等待使用者問題回報,就只能大費周章的搞懂《網頁內容可及性指引》的內容,再逐一檢視、修改網頁。

Stark 則提供了自動分析與檢查的工具,以擴充工具的形式插入 Figma、Sketch 和 Adobe XD 等前台設計工具,以及 Google Chrome、Microsoft Edge、Opera 和 Brave 等瀏覽器頁面,以此讓網頁設計師在設計完之後,輕鬆檢查網頁的字體大小、顏色選擇、對比度等要素,並即時修正,網站閱覽者就可獲得最舒適的閱覽體驗。

Stark 的服務可分為 3 種:

1. 自動產生替代文字

為了方便視覺障礙者了解網頁的圖片內容,網頁設計者大多會在網站上的圖片打上 alt-text (替代文字),然而描述的內容為何、如何添加關鍵字等都是門學問,Stark 趁勢推出 Alt-Text Annotations 的功能,自動掃描網站中所有圖像,以便網頁設計師一目了然地輸入 alt-text,Stark 也能自動推薦適合的文字內容,以此消除設計師對於哪些圖像需要文本,以及要寫什麼內容的疑慮。

Stark alt-text photo description
Stark 可自動掃描網站中所有圖像,並建議適合填入的文字內容。 (Photo Credit: Stark)

alt-text:用戶自定義替代文字,也就是對圖片的「描述」,若與圖片相關,則可大大增加 SEO。

2. 顯示和糾正排版問題

排版是提供可及性的基礎,所以為了使網站內容盡可能易於閱覽,它需要對各種視力的人來說都是清晰易讀的。Stark 會掃描網頁,並標記過小的字體,網頁設計師能直接在瀏覽器中使用即時預覽的功能,確保文字大小的易讀性。

Stark scanning webpage
Stark 會掃描網頁,並標記小於建議的 12 像素字體大小的字體,使用者能直接在瀏覽器中調整後網頁文字大小。 (Photo Credit: Stark)

3. 網頁配色建議

考量到色盲佔全球人口的 8%,而色盲又分為紅色盲、綠色盲、藍黃色盲等多種類,因此 Stark 也會自動產生網頁的建議調色比例,以確保所有類別的色盲患者,在瀏覽網頁時不會因為文字的顏色而干擾閱讀。

Stark adjusting webpage design
Stark 提供跨閱覽裝置的相容性檢查服務,自動檢查及調整網頁的設計,使其滿足手機、電腦、iOS 和 Android 系統的適宜閱讀尺寸要求。 (Photo Credit: Stark)

累積達 40,000 名用戶,目標創立更多可及性的網頁

Stark 目前是以訂閱制的方式計費,自 2017 年推出以來,Stark 已被包括 Canva、微軟、輝瑞等 8,500 個團隊中約 40,000 名用戶使用,並有超過 25,000 名設計師、開發人員和可及性專家在其社群上交流。

近期 Stark 獲得由 Uncork Capital 領投,前 Github 技術長 Jason Warner、Canva 產品主管 Steve King、Shippo 創辦人 Laura Behrens Wu、Intercom 共同創辦人 Des Traynor 和 Front App 共同創辦人 Mathilde Collin 跟投的 600 萬美元種子輪投資。

Cat Noone 表示,網站的可及性不僅是一個公平問題,而且是一個越來越涉及合法性的問題,隨著越來越多的可訪問性法規,Stark 肩負著一項艱鉅的使命,也就是透過非常簡單的工作流程,讓世界上的網頁都能被所有人使用。

延伸閱讀:沒有風箏衝浪就沒有 Canva!19 歲少女如何創立價值 400 億美元的獨角獸設計工具?

※ 此專欄文章為作者觀點,不代表本網立場。 ※

文章來源:Meet創業小聚

作者:溫于萱

訂閱電子報

最新文章

打造「音樂版 Slack」,Highnote 讓創作者直接在音檔上寫筆記、錄語音、開投票

當我們在一份報告或文件中要溝通意見時,通常會直接註記評論,但如果是對於一段音檔呢?確定要註記的秒數、再寫下意見、然後將訊息傳給對方⋯⋯這是音樂產業、Podcost 主持人等聲音創作者的困境,也是 Highnote 想解決的問題。

新創公司推廣「新產品」的 4 個錦囊妙計

根據人類行為學家的研究,多數人在面對新事物時,容易感到不安以及排斥。尤其在不確定「新的」會比「舊的」好多少的情況下,人類更會傾向維持原狀。這種現象又稱為恐新症 (Neophobia),也許正是你過去不容易推廣新產品的原因。

廚餘可以變首飾?香港社企 Ways Out 與年輕媽媽同行,透過「轉廢為寶」推廣環保

廚餘除了可以用來再造清潔用品、肥料,還可以製成首飾?由 Peggy 、Coco、Alison 三位女生創立的香港社企 Ways Out Hong Kong 將廚餘升級再造 (Upcycling),利用蔬菜及水果皮製作手鏈、頸鏈和耳環,藉此引起大眾對廚餘問題的關注,更邀請了一群年輕單親媽媽加入團隊,支持她們發揮自身才能。

1 年進帳 1 億歐元!德國新創 Air Up 推出「喝得到蘋果味的水壺」,獲百事可樂投資

德國新創 Air Up 創辦人 Lena Jüngst 在大學寫了一篇關於「神經科學與設計」的論文,從中利用這個原理打造 Air Up 水壺及套在水壺上的「味覺套件」,讓人們喝水時品嚐到蘋果、桃子等口味,藉此預防糖尿病,在一年之間進帳 1 億歐元,連百事可樂都投資。

該一人創業,還是尋找「共同創辦人」?幾個創辦人剛剛好?

創業的從 0 到 1,從來就不簡單。核心創辦人得先盤點自己當前所擁有的技能、人脈、財務等資源是否足夠,看看少了多少,再決定要一人創業、還是尋找共同創辦人加入。