柚子快報激活碼778899分享：UI 學習 三 可訪問性 UX

http://yzkb.51969.com/

設計、交流和實現(xiàn)不同領域內(nèi)容的易訪問性決策，涉及到一系列考慮因素，以達到更容易訪問的產(chǎn)品體驗。

Material使用的框架借鑒了WCAG標準和行業(yè)最佳實踐，以幫助任何人預測、計劃、記錄和實現(xiàn)可訪問體驗。

下面描述的三個階段有助于將可視化UI轉(zhuǎn)換為基于文本的線性用戶體驗，并將其映射到代碼。

一 概述

易訪問性標記是為設計規(guī)范創(chuàng)建文檔的一個組成部分。

產(chǎn)品的可訪問性有三個關鍵方面需要指定:結構、流程和屏幕上的元素。

二 結構:標識和標題

定義內(nèi)容和UI布局以改進導航和便于功能理解。

輔助技術(AT)依靠清晰、輪廓分明的結構來處理頁面信息，主要通過使用標題和標識進行導航。許多輔助技術，如屏幕閱讀器，將設計轉(zhuǎn)換為線性體驗，這意味著許多用戶以分層的、預先確定的順序與內(nèi)容交互。因此，提前考慮結構決策可以提高產(chǎn)品的可訪問性。

僅適用于網(wǎng)頁:地標和標題可以幫助輔助技術用戶定位到網(wǎng)頁，并允許輕松導航和遍歷文檔或頁面的大部分內(nèi)容。

通過對頁面的各個部分進行分類和標記，通過布局設計可視化地傳達的結構信息，也可以用代碼實現(xiàn)，并通過頁面顯示。

一個頁面關系圖的例子，它映射了一個UI的區(qū)域，以便考慮相對的標志和標題?

banner 網(wǎng)站logo，或網(wǎng)站名字search 搜索navigation 導航main 主要信息展示區(qū)域region padding之內(nèi)的信息展示區(qū)域complementary? 補充內(nèi)容，有些后臺現(xiàn)在沒有這部分

2.1 識別標識和標題

2.1.1 定義標識

標識是建立布局高層結構的大塊內(nèi)容。它們是一組ARIA角色，為web頁面的公共內(nèi)容區(qū)域提供了方便的訪問和重要的意義。

有八個角色:導航、搜索、主要區(qū)域、橫幅、補充、內(nèi)容信息、區(qū)域和表單。

W3C ARIA指南中的八個里程碑式角色包括:

導航:包含導航鏈接列表(可以有多個，在這種情況下，您應該在標簽中進行區(qū)分)搜索:搜索字段主要區(qū)域:由UX定義的主要內(nèi)容區(qū)域。應該只有一個。橫幅:通常是頁眉;頁面之間重復的內(nèi)容通常包含導航和工具欄。應該只有一個。補充性:可以獨立于主要內(nèi)容的側(cè)邊欄或側(cè)邊欄內(nèi)容信息:通常是頁腳;包含描述網(wǎng)站及其內(nèi)容的信息(例如，版權)。應該只有一個。區(qū)域:內(nèi)容區(qū)域是重要的內(nèi)容塊。它們可以嵌套在“主”地標內(nèi)。區(qū)域應該用名稱標記，使該區(qū)域的目的清晰。表單:獲取并存儲用戶信息

添加無障礙標簽

向多次出現(xiàn)的任何里角色(通常是區(qū)域或?qū)Ш?添加清晰且特定的標簽。這將有助于用戶區(qū)分信息。

所有地區(qū)以及任何標識都應添加標簽，標簽將增強其意義。例如，解釋側(cè)邊欄的內(nèi)容或目的。

不要在標簽中重復標識角色。

這個布局有兩個區(qū)域分配了導航角色。

每個標識都應該有一個唯一的標簽，以幫助用戶區(qū)分元素之間的區(qū)別。?

2.1.2 定義標題

?

使用輔助技術的用戶經(jīng)常在標題的幫助下瀏覽網(wǎng)頁。它們創(chuàng)建了一個清晰的層次結構來幫助用戶導航和操作。

根據(jù)內(nèi)容層次結構而不是視覺樣式來定義標題標題不應該跳過一個級別，例如，不要從H2直接到H4，而不使用H3根據(jù)內(nèi)容的層次結構，將頁面上的內(nèi)容按順序映射到標題(H1-H6)建議使用一個H1作為頁面整體標題

標題展示例子，圖中h1到h4標簽為html代碼。

除了風格之外，還要考慮層次結構。

確保標題與整體的標題一致。如果他們不這樣做，考慮改變UI中的標題樣式，確保用戶體驗良好，或者添加標簽。

人話：主標題(頁面整體標題)內(nèi)容下子標題要和主標題信息相關，否則應改變UI中的樣式。其實不相關的信息，不應該在一個頁面中都設置為標題。

標題級別由布局的信息體系結構展示——應用于一組項目的結構層次結構。頁面的視覺樣式不需要在視覺突出和視覺層次方面匹配標題級別。（這個不太懂）

人話：標題僅用于信息展示，其組內(nèi)內(nèi)容，沒必要在視覺突出和視覺層次方面和標題匹配。比如H1組內(nèi)的信息，非標題內(nèi)容，沒必要字號比小組中字號大。

當然，僅個人理解……

三 流程:焦點順序和鍵盤導航

定義和優(yōu)化線性和鍵盤輔助用戶體驗。

屏幕閱讀器、鍵盤和其他輔助技術用戶，可以在不使用傳統(tǒng)鼠標或觸摸屏的情況下，處罰導航并與應用程序交互。能夠通過使用標簽、箭頭和其他常見的導航按鈕，完成他們在應用程序中的使用目標。通過有策略地排序元素位置簡化流程，并降低整個頁面的復雜性。

通過使用預定義的選項卡排序，避免增加更多的操作，除非用戶操作需要特殊定制。默認閱讀順序遵循DOM(內(nèi)容在源代碼中編寫的順序)，通常從左到右;從上到下。鍵盤導航可以在公共組件中預先定義。使用默認模式（詳見：UI 學習 二 可訪問性 模式-CSDN博客），除非有打破默認模式的用戶體驗模式或自定義組件。

3.1 用例分組

用例分為主要和次要用戶操作重要性。用例的優(yōu)先級應該影響關于用戶操作優(yōu)先級的決策。

3.2 定義初始焦點和組件級焦點

焦點是指哪個控件是當前用戶交互的活動目標，例如鼠標點擊或鍵盤點擊。通常，tab鍵在交互元素之間移動焦點。

定義用戶加載屏幕時的初始焦點，以及具有多個交互元素(如復雜的卡片或?qū)υ捒?的組件的初始焦點。

在Google主頁的例子中，盡管在頁面的搜索字段上方和周圍有鏈接和按鈕，但應將用戶最初的注意力放在支持最常見用戶目標的元素上。

當元素由用戶激活或用戶更改上下文時，焦點尤為重要。

例如，當一個對話框被觸發(fā)時，檢查以下內(nèi)容:

焦點被設置為對話框組件，可能是對話框中的特定交互元素，例如文本輸入字段或編輯按鈕當用戶關閉或取消對話框時，焦點將返回到啟動該操作的交互元素

?1、定義初始焦點和組件級焦點

3.3 定義非典型鍵盤導航

用戶應該能夠使用選項卡、方向鍵和其他鍵盤快捷鍵完成主要和次要用戶操作。

?通過標簽導航卡片上的交互元素，體現(xiàn)操作順序和操作重要性。

Tab通常在交互元素之間移動焦點，通常用作主要導航。Tab + Shift反轉(zhuǎn)方向。

箭頭鍵通常用于在組件中導航(例如，在表單中的單元格之間移動或遍歷菜單中的選項)。

點擊激活鏈接或按鈕，或者在表單提交按鈕具有焦點時提交表單。

在獨特布局和用例的情況下，可以幫助將一組交互元素分組為單個選項卡。

并使用箭頭鍵遍歷子元素。

使用Tab導航進行焦點組使用箭頭鍵遍歷子元素

四 元素

添加輔助功能標簽、定義角色并指示裝飾元素

需要標簽的視覺元素

沒有可見文本或文本中沒有足夠上下文的交互式圖標或按鈕(例如，帶有鉛筆圖標的編輯按鈕)交互式圖像視覺提示(包括進度條和錯誤處理)有意義的圖標，(例如：e.g., 狀態(tài)圖標)有意義的圖像(例如：圖表、圖片和插圖)

文本元素需要標簽來添加額外的上下文

一般鏈接，如(例如：“了解更多”)帶有通用文本的按鈕(例如：“保存” 當頁面上有多個這樣的按鈕時)

不需要標簽的元素

非交互式UI文本，因為這將由屏幕閱讀器自動讀取帶有足夠文字的按鈕，(例如：“下載圖像”)

注意:本文使用通用術語的可訪問性標簽來指代幾種不同的類型，包括ARIA標簽和alt標簽。當可訪問性標簽在代碼中實現(xiàn)時，它們將被轉(zhuǎn)換為平臺的適當類型。此外，角色這個術語用于涵蓋web應用程序的一般組件控制類型和ARIA角色。

4.1 標簽元素

易訪問性標簽幫助那些不能依賴產(chǎn)品視覺界面的用戶。

周到的標簽有助于使基于文本的體驗與視覺體驗一樣可用。

標簽應該簡明地描述元素的內(nèi)容、目的和行為。

示例:這些圖標的可訪問性標簽描述了它們的用途，而不是圖標的外觀(例如，“放大鏡”)。

4.2 為有意義的圖像和交互元素添加標簽

在視覺上添加標簽，以傳達意義或增強內(nèi)容。

標簽應該簡潔，具有描述性，并傳達圖像的內(nèi)容和背景。

這適用于在支持文檔中找到的信息圖圖形和其他有指導意義的圖像。

?標簽“語音搜索”描述了與輸入法(語音)配對的用戶任務(搜索)。

不要在標簽中包含元素類型(按鈕、菜單等)。這將通過為元素分配適當?shù)慕巧詣犹砑印?/p>

?microphone:麥克風

隱藏圖像

裝飾性的圖標和圖像不能增強視障用戶的體驗，應該標注為裝飾性，以便將它們隱藏在代碼中。

不太理解……裝飾性元素是點擊無效果嗎？

?將裝飾性視覺元素標記為“隱藏”。

4.3 為交互元素分配角色

ARIA角色適用于web應用程序，并指定如何在HTML之上增加網(wǎng)頁的可訪問性。

對于web，為所有交互元素分配ARIA角色對于非web，根據(jù)您的設計系統(tǒng)組件(按鈕，滑塊，菜單等)分配角色。

分配ARIA角色(web)或組件類型(移動端)來將期望的交互模式傳遞到操作中。請注意，有些視覺元素可能看起來相同，但行為不同。

通過為交互元素分配角色來定義它的類別，可以幫助使用輔助技術的用戶建立對如何與該元素交互的期望，并預測交互時可能發(fā)生的事情。

?不要在標簽中包含控件類型。屏幕閱讀器會自動添加控件，所以您可以讓它重復(例如：“Got it button button”，差不多就是“點我！點我！”)

柚子快報激活碼778899分享：UI 學習 三 可訪問性 UX

http://yzkb.51969.com/

相關閱讀