柚子快報激活碼778899分享：UI 學(xué)習(xí) 三 可訪問性 UX

http://yzkb.51969.com/

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

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

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

一 概述

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

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

二 結(jié)構(gòu):標(biāo)識和標(biāo)題

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

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

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

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

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

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

2.1 識別標(biāo)識和標(biāo)題

2.1.1 定義標(biāo)識

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

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

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

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

添加無障礙標(biāo)簽

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

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

不要在標(biāo)簽中重復(fù)標(biāo)識角色。

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

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

2.1.2 定義標(biāo)題

?

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

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

標(biāo)題展示例子，圖中h1到h4標(biāo)簽為html代碼。

除了風(fēng)格之外，還要考慮層次結(jié)構(gòu)。

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

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

標(biāo)題級別由布局的信息體系結(jié)構(gòu)展示——應(yīng)用于一組項目的結(jié)構(gòu)層次結(jié)構(gòu)。頁面的視覺樣式不需要在視覺突出和視覺層次方面匹配標(biāo)題級別。（這個不太懂）

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

當(dāng)然，僅個人理解……

三 流程:焦點順序和鍵盤導(dǎo)航

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

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

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

3.1 用例分組

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

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

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

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

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

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

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

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

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

3.3 定義非典型鍵盤導(dǎo)航

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

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

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

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

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

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

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

使用Tab導(dǎo)航進行焦點組使用箭頭鍵遍歷子元素

四 元素

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

需要標(biāo)簽的視覺元素

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

文本元素需要標(biāo)簽來添加額外的上下文

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

不需要標(biāo)簽的元素

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

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

4.1 標(biāo)簽元素

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

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

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

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

4.2 為有意義的圖像和交互元素添加標(biāo)簽

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

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

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

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

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

?microphone:麥克風(fēng)

隱藏圖像

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

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

?將裝飾性視覺元素標(biāo)記為“隱藏”。

4.3 為交互元素分配角色

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

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

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

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

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

柚子快報激活碼778899分享：UI 學(xué)習(xí) 三 可訪問性 UX

http://yzkb.51969.com/

相關(guān)閱讀