1. 程式人生 > 其它 >優漫動遊教育10種讓你的UI設計更易於訪問的方法

優漫動遊教育10種讓你的UI設計更易於訪問的方法

UI(使用者介面)設計者的主要目標是為不管使用者的功能如何,建立良好的使用者體驗。這一點更為重要,因為我們考慮到約2.85億人有視力障礙,1.1億至1.9億成人存在嚴重行動困難,全球3.6億人患有致殘性聽力喪失。所以,以下10種方法可以幫助你的使用者介面設計更容易獲得和包容,並且確保你能為每一個人設計。

1、使用不同的顏色和對比度。

顏色是設計的一個重要方面。確定背景和前景之間有適當的對比,用適當的陰影來區分,強調重要資訊是最容易讓你的網站更容易獲得的方法。

總之,為色盲或戴眼鏡的人設計和為沒有這些障礙的人設計同樣重要。

您可以使用WebAIM工具的色彩對比度檢查來達到色彩對比的平衡。這個工具可以讓你輸入一個特定的十六進位制程式碼,或者從色輪中選擇,然後通過增量調整來達到元素之間的AA(最低對比度)或AAA(增強對比度)對比度標準。

2、使用清晰、一致的導航選項。

導航設計也是決定網站可訪問性的重要要素之一。

保證跨頁面導航在網站中具有一致的命名、風格和位置。

向用戶提供網站搜尋或站點地圖。

向您提供指示提示(如麵包屑和清晰的標題),幫助使用者瞭解他們在網站或頁面上的位置。

3、不只是用顏色來表示狀態的改變。

儘管色彩在傳遞資訊時很有用,但它並不能成為傳遞資訊的唯一途徑。當用顏色來區分元素時,一定要提供額外的標識,而不依賴於顏色感知,以使您的設計易於訪問。

通過以下方法,您可以這樣做:

除顏色外,還用星號表示所需的表單域。

用標籤來區分圖中的區域。

增加描述文字。

4、為鍵盤使用者提供視覺焦點指示。

有些使用者使用Tab鍵在可聚焦元素(即連結、表單欄位和其他任何新增到具有HTMLtabindex屬性的Tab鍵次序之間)之間。

然而,鍵盤使用者通常很難知道自己在頁面上的位置。所以,設計者必須始終提供清晰的指示,指明使用者當前所在的頁面中的哪個元素。

儘管Web瀏覽器有一個預設的焦點指示符,但是它們並不那麼好。所以,修改CSS懸停是個不錯的主意:對於可聚焦的元素,比如連結、按鈕、表單域、選單項、widget、日程表選擇器等等。(可聚焦元素幾乎總是互動的。)

高效焦點指標:

對比度非常好。

形狀和尺寸和元素互補。

採用互補但引人注目的配色方案。

用於幫助使用者跟蹤焦點的移動。

良好降級(在舊瀏覽器上可見)

在瀏覽器之間是一樣的。

5.提供圖片/介質選擇。

你網頁上的所有媒體,不管是音訊、視訊還是圖片,都必須有其他文字來描述其代表的資訊或功能(除非圖片純粹是裝飾)。

開發者最佳實踐。

所有圖片都必須有描述性的alt屬性:如果圖片沒有alt文字,請提供一個空alt屬性,而不是完全沒有alt屬性。說明影象對其沒有任何作用。

影象組和表現力更強的標題。

將純裝飾影象隱藏在輔助技術中:不包含功能或資訊內容的影象是裝飾影象。螢幕閱讀器可以以多種方式隱藏這些內容:

alt屬性為空。

將ARIArole="presentation"使用

用CSS背景圖片。

6、設計便於使用的形式。

誰也不喜歡填寫混亂的輸入,不清楚的預期格式,神祕的錯誤資訊,或者缺少鍵盤可訪問性的表單。如果把它和障礙或者殘障結合起來,你會遇到很多挫折。

為確保您頁面的使用者不需要體驗這些內容,以下是在設計可訪問表單時必須考慮的事項。

每個輸入欄都應該有清晰的相關標籤。總是使用標籤HTML元素來代替簡單的span或div元素。

用佔位符文字告訴使用者輸入的格式和性質。然而,不要把它作為標籤的替代品,因為使用者一旦輸入了一些資訊,佔位符文字就會消失。

一定要清楚地識別必需的和可選擇的欄位。

當驗證表單時,應該儘快顯示錯誤資訊,最好在客戶端顯示,而不要等到整個表單提交。錯誤資訊應該儘可能的明確和明確。

一個鍵盤使用者應該能夠通過Tab鍵訪問表單的所有元素。Tab鍵順序應該是連續的,並且對於使用者應該有意義。

7、確保互動元素容易識別。

提供不同的風格(比如連結和按鈕),以便於識別。比如,在觸控式螢幕啟用時更改滑鼠懸停、鍵盤焦點和連結的外觀。保證互動元素的樣式和命名在整個網站中得到一致使用。

8、以視覺層次組織內容。

建立視覺層次涉及到密切關注UI元素如何在你的網頁設計中定位,並且在這些相關元素間建立一致性來推動意義。

別擠在螢幕上,否則最終會嚇到使用者。

視障人士可能需要在大螢幕上放置物品,所以請讓您的內容可擴充套件。

呼召用語的按鈕應該清晰而獨特。

在視線水平附近放置重要資訊。

用適當的標題將相關內容分組。

利用空白和接近度使內容之間的關係更為明顯。

9、執行使用者測試。

甚至當你竭盡全力讓你的網站更容易訪問時,使用輔助技術的人們可能會發現某些領域並沒有你期望的那麼友好。

找出並糾正這類問題的最好和最有效的方法是通過使用者測試。非正式的評估對整個產品開發專案比在專案結束時進行正式的可用性測試更為有效。

使用者測試有許多優點。關鍵是,您將能夠理解設計的功能限制,然後根據這些限制提供解決方案。

考試為你提供了一個機會去探索,調查,並瞭解人們如何處理你的設計。

認識到無障礙並不妨礙創新。

建立可訪問性設計的最重要部分之一就是要認識到它並不妨礙創新。有限的設計並不會使你的產品變得乏味,而是讓你有新的想法去探索如何為所有使用者創造更好的產品。

接受可訪問性指導,如同處理任何設計限制。他們的任務之一就是要為不同的使用者開發出精彩的產品。