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

Quube優(yōu)選坊綜合2025-08-26260

http://yzkb.51969.com/

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

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

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

一概述

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

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

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

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

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

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

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

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

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

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

2.1.1 定義標(biāo)識(shí)

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

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

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

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

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

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

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

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

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

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

2.1.2 定義標(biāo)題

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

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

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

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

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

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

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

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

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

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

定義和優(yōu)化線性和鍵盤(pán)輔助用戶(hù)體驗(yàn)。

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

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

3.1 用例分組

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

3.2 定義初始焦點(diǎn)和組件級(jí)焦點(diǎn)

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

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

在Google主頁(yè)的例子中，盡管在頁(yè)面的搜索字段上方和周?chē)墟溄雍桶粹o，但應(yīng)將用戶(hù)最初的注意力放在支持最常見(jiàn)用戶(hù)目標(biāo)的元素上。

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

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

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

?1、定義初始焦點(diǎn)和組件級(jí)焦點(diǎn)

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

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

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

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

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

點(diǎn)擊激活鏈接或按鈕，或者在表單提交按鈕具有焦點(diǎn)時(shí)提交表單。

在獨(dú)特布局和用例的情況下，可以幫助將一組交互元素分組為單個(gè)選項(xiàng)卡。

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

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

四元素

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

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

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

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

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

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

非交互式UI文本，因?yàn)檫@將由屏幕閱讀器自動(dòng)讀取帶有足夠文字的按鈕，(例如：“下載圖像”)

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

4.1 標(biāo)簽元素

易訪問(wèn)性標(biāo)簽幫助那些不能依賴(lài)產(chǎn)品視覺(jué)界面的用戶(hù)。

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

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

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

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

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

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

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

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

不要在標(biāo)簽中包含元素類(lèi)型(按鈕、菜單等)。這將通過(guò)為元素分配適當(dāng)?shù)慕巧詣?dòng)添加。

?microphone:麥克風(fēng)