成都網(wǎng)站制作公司哪家好？之如何增加用戶體驗(yàn)度

2022-08-03 分類：用戶體驗(yàn)

成都網(wǎng)站制作公司哪家好？設(shè)計(jì)具有鍵盤可訪問性的應(yīng)用程序的5個(gè)步驟

鍵盤輔助功能

當(dāng)我們想到“普通”用戶時(shí)，我們傾向于想象他們?cè)谟?jì)算機(jī)上時(shí)使用鼠標(biāo)或觸控板。但是，如果他們的選或選擇是使用鍵盤呢？您是否考慮過考慮鍵盤可訪問性來設(shè)計(jì)應(yīng)用程序？

某人可能不愿意，或者能夠操作鼠標(biāo)或觸控板來使用計(jì)算機(jī)的原因有很多。它們可能具有永久性，慢性或暫時(shí)性狀況，從而限制了它們的敏捷性或肌肉控制力，從而導(dǎo)致手腕或手部敏感，或者難以在屏幕上跟隨鼠標(biāo)光標(biāo)。他們也可能是“高級(jí)用戶”，他們正在尋找更多捷徑來簡(jiǎn)化他們的工作流程。在任何這些情況下，鍵盤都可能是個(gè)人與技術(shù)互動(dòng)的選或必要手段。

在本文中，您將了解鍵盤可訪問性準(zhǔn)則，以及在設(shè)計(jì)應(yīng)用程序以確保它們可通過鍵盤訪問時(shí)要記住的5個(gè)步驟。

加入我們的Shopify合作伙伴市政廳-統(tǒng)一版

在本月的Partner Town Hall，我們將討論Reunite的發(fā)布會(huì)和新聞，這些會(huì)影響您的業(yè)務(wù)。另外，我們將僅為Shopify合作伙伴和開發(fā)人員分享一些特別的公告。你不想錯(cuò)過這個(gè)。請(qǐng)?jiān)?月28日（星期四）美國(guó)東部時(shí)間上午10:00注冊(cè)，加入我們。

鍵盤輔助功能如何工作？

如果可以通過鍵盤訪問應(yīng)用程序，則意味著人們可以選擇僅使用鍵盤來操作控件元素?？丶厥琼撁嫔系娜魏谓换ナ浇M件，例如按鈕，鏈接，表單輸入，視頻和其他交互式內(nèi)容。

鍵盤導(dǎo)航基礎(chǔ)

以下是一些用于鍵盤導(dǎo)航的基本鍵：

導(dǎo)航到下一個(gè)控件元素：選項(xiàng)卡（或相關(guān)單選按鈕的向右或向下箭頭鍵和選擇選項(xiàng)）

導(dǎo)航到上一個(gè)控件元素： Shift + Tab（或相關(guān)單選按鈕和選擇選項(xiàng)的向左或向上箭頭鍵）

單擊控件元素： Enter和/或空格鍵

在相關(guān)單選按鈕或選擇選項(xiàng)之間導(dǎo)航：箭頭鍵

您可以在本文中了解有關(guān)HTML元素的標(biāo)準(zhǔn)鍵盤行為的更多信息。

焦點(diǎn)順序

控制元素可以響應(yīng)鍵盤事件的順序稱為焦點(diǎn)順序。當(dāng)一個(gè)元素成為焦點(diǎn)時(shí)，您可以使用某些鍵盤控件與其進(jìn)行交互。當(dāng)元素失去焦點(diǎn)時(shí)，它將變得模糊。瀏覽器呈現(xiàn)默認(rèn)焦點(diǎn)狀態(tài)，以幫助用戶跟蹤當(dāng)前處于焦點(diǎn)的元素。

鍵盤輔助功能：Tab鍵順序移位

當(dāng)用戶按下鍵盤上的Tab鍵時(shí)，焦點(diǎn)從一個(gè)交互式元素順序轉(zhuǎn)移到另一個(gè)交互式元素。當(dāng)元素獲得焦點(diǎn)時(shí)，焦點(diǎn)狀態(tài)將應(yīng)用于該元素。在此示例中，焦點(diǎn)所在的元素由灰色輪廓，帶下劃線的文本和稍微放大的箭頭圖標(biāo)標(biāo)識(shí)。

您可能還會(huì)喜歡：通用設(shè)計(jì)：11個(gè)實(shí)用技巧，使您的網(wǎng)站和應(yīng)用程序更易于訪問。

鍵盤可訪問性和Web內(nèi)容可訪問性指南（WCAG）

《 Web內(nèi)容可訪問性指南》（WCAG）概述了三個(gè)級(jí)別的合規(guī)性-A級(jí)，AA級(jí)和AAA級(jí)-已被用作全球區(qū)域或國(guó)家級(jí)Web可訪問性法律的標(biāo)準(zhǔn)。

鍵盤可訪問性是達(dá)到A級(jí)標(biāo)準(zhǔn)的成功標(biāo)準(zhǔn)之一。級(jí)別標(biāo)準(zhǔn)描述了所有Web內(nèi)容的必備功能。它們也被認(rèn)為是最容易實(shí)現(xiàn)的。

也就是說，如果我們不小心，鍵盤的可訪問性也很容易出錯(cuò)。以下是網(wǎng)上常見的鍵盤可訪問性問題的示例：

潛意識(shí)狀態(tài)

焦點(diǎn)順序錯(cuò)誤

無法獲得關(guān)注的互動(dòng)元素

復(fù)雜的組件無法進(jìn)行鍵盤交互

“如果我們不小心，鍵盤的可訪問性也很容易出錯(cuò)。”

幸運(yùn)的是，我們可以使用很多技術(shù)來牢記鍵盤用戶并避免在我們自己的應(yīng)用程序中犯這些錯(cuò)誤。

訂閱我們的開發(fā)者摘要新聞通訊

通過我們的季度開發(fā)者摘要，了解Shopify API和其他開發(fā)者產(chǎn)品的最新更改。

構(gòu)建鍵盤可訪問應(yīng)用程序的5個(gè)步驟

1.設(shè)計(jì)直觀的交互

當(dāng)我們呈現(xiàn)簡(jiǎn)單的控件元素而沒有自定義行為時(shí)，通?？梢岳盟鼈兊膬?nèi)置鍵盤輔助功能。但是，如果我們不知道與按鈕，鏈接或輸入相關(guān)的標(biāo)準(zhǔn)鍵盤行為，則可能會(huì)無意間為鍵盤用戶帶來混亂的體驗(yàn)。

“如果我們不了解與按鈕，鏈接或輸入相關(guān)的標(biāo)準(zhǔn)鍵盤行為，我們可能會(huì)無意間為鍵盤用戶帶來混亂的體驗(yàn)。”

例如，開發(fā)人員有時(shí)會(huì)使用CSS隱藏本機(jī)HTML單選按鈕，以便使用更具風(fēng)格的外觀。輸入不是幕后的單選按鈕并不明顯，因此鍵盤用戶可能沒有意識(shí)到他們應(yīng)該使用箭頭鍵（而非Tab鍵）在相關(guān)選項(xiàng)之間切換焦點(diǎn)。

鍵盤可訪問性：CSS遮擋的無線電輸入

三個(gè)風(fēng)格化的輸入，其中單選輸入已被CSS遮蓋，使它們看起來更像按鈕。

為避免此問題，我們應(yīng)該顯示至少類似于本機(jī)HTML元素的內(nèi)容，以便為希望或需要使用鍵盤與其交互的任何人提供視覺提示。

鍵盤輔助功能：集成組件的輸入

三個(gè)風(fēng)格化的輸入，將類似于無線電輸入的組件集成到設(shè)計(jì)中。

2.成都網(wǎng)站制作公司哪家好？構(gòu)建您的應(yīng)用程序，以便鍵盤可以完成鼠標(biāo)可以執(zhí)行的所有操作

請(qǐng)注意內(nèi)置鍵盤可訪問性功能所沒有的元素。布局元素，列表，表，標(biāo)題，段落和非語義HTML標(biāo)簽?zāi)J(rèn)情況下不支持鍵盤快捷鍵。但是，它們經(jīng)常用于構(gòu)建更復(fù)雜的組件，例如選項(xiàng)卡，拖放列表或模式。

JavaScript使我們能夠添加事件偵聽器，以使非控制元素響應(yīng)鼠標(biāo)單擊或手勢(shì)。例如，在React中，我們可以使用onClickprop向列表項(xiàng)元素添加交互性。

{item.name}

每當(dāng)我們向非控制元素添加交互性時(shí)，都需要將其tabIndex屬性設(shè)置為0。當(dāng)按下Tab鍵時(shí)，這將允許元素以正確的焦點(diǎn)順序接收焦點(diǎn)。我們還需要實(shí)現(xiàn)keypress或keydown事件處理程序，以通過Enter鍵和/或空格鍵來注冊(cè)“點(diǎn)擊”（可以同時(shí)使用鏈接單擊鏈接，而按鈕僅支持Enter鍵）。

{item.name}

我們可以通過使用諸如錨標(biāo)記或按鈕元素之類的控件來避免一些額外的工作。我們始終可以使用CSS覆蓋默認(rèn)的鏈接和按鈕樣式，并使交互式元素跨越其非交互式父級(jí)的整個(gè)寬度，以大化目標(biāo)區(qū)域。

{item.name}

無論我們是否將控件元素用于非本機(jī)功能，我們?nèi)钥赡苄枰獮榧^鍵（在選項(xiàng)卡組件中的選項(xiàng)卡之間導(dǎo)航）或退出鍵（以關(guān)閉疊加層）添加事件偵聽器，以使組件100鍵盤可用百分比。

如果我們?yōu)楦鼜?fù)雜的組件實(shí)現(xiàn)非標(biāo)準(zhǔn)的鍵盤行為，則提供可見的說明來描述人們可以用來與組件交互的鍵盤控件會(huì)很有幫助。

3.覆蓋默認(rèn)焦點(diǎn)順序時(shí)，請(qǐng)執(zhí)行其他工作

焦點(diǎn)順序是另一個(gè)與鍵盤可訪問性緊密相關(guān)的WCAG要求。為了滿足A級(jí)標(biāo)準(zhǔn)，焦點(diǎn)順序應(yīng)與頁面上交互式元素的視覺順序保持一致。鍵盤用戶應(yīng)該能夠在屏幕上的控件中從上到下以及在與文本內(nèi)容相同的水平方向（從左到右，或從右到左）中導(dǎo)航。

鍵盤輔助功能：更新描述流程

在此頁面上，內(nèi)容是從左向右呈現(xiàn)的，鍵盤用戶應(yīng)能夠按以下順序在控制元素之間導(dǎo)航：“更新英雄圖像”，“更新標(biāo)簽”，“更新描述”，“刪除”， “發(fā)布”。

滿足此條件的最簡(jiǎn)單方法是保留默認(rèn)的焦點(diǎn)順序，該順序由標(biāo)記中元素的排列順序直接確定。當(dāng)我們引入控制元素的視覺順序與其在源代碼中的布局方式之間的差異時(shí)，我們就有可能無法滿足此標(biāo)準(zhǔn)。

您可能還會(huì)喜歡：使用Liquid和Shopify構(gòu)建可訪問的面包屑導(dǎo)航。

如果我們以上面的屏幕截圖為例，假設(shè)我們希望“更新標(biāo)簽”卡在堆疊較窄視口時(shí)將其與“更新描述”卡切換位置。如果卡片被渲染為彈性物品，我們可以考慮使用orderCSS屬性在特定的斷點(diǎn)處更改其順序。

。容器 {

顯示：flex;

}

@media（大寬度：600 px）{

?？ǎ旱趎個(gè)孩子（2）{

訂購(gòu)：3 ;

}

查看原始GitHub 托管?的example.css

雖然該order屬性影響彈性項(xiàng)目的視覺順序，但它不會(huì)在源代碼中更新其排列。結(jié)果，當(dāng)用戶按下Tab鍵在每個(gè)按鈕之間導(dǎo)航時(shí)，即使“更新標(biāo)簽”按鈕在屏幕上以相反的順序顯示，它們?nèi)詫⒃?ldquo;更新描述”之前獲得焦點(diǎn)。這會(huì)導(dǎo)致焦點(diǎn)意外地在頁面上上下移動(dòng)，從而給用戶帶來混亂的體驗(yàn)。

鍵盤輔助功能：更新描述流程已重新排序

如果使用CSS在視覺上對(duì)“更新標(biāo)簽”和“更新描述”按鈕進(jìn)行重新排序，則鍵盤用戶希望“更新描述”在“更新標(biāo)簽”之前獲得焦點(diǎn)。但是，CSS不會(huì)更改標(biāo)記中元素布局的順序。這會(huì)在控制元素獲得焦點(diǎn)的順序（由標(biāo)記確定）與它們?cè)谄聊簧巷@示的順序之間產(chǎn)生差異。

避免此問題的一種方法是在標(biāo)記中呈現(xiàn)兩種版本的卡：一種以對(duì)于較寬視口寬度預(yù)期的順序，另一種以對(duì)于較窄視口寬度所需的順序。我們可以使用該display屬性在某些斷點(diǎn)處在它們之間切換。

< div class = “容器” >

< div class = “卡片” >

< 按鈕>更新英雄圖像

< div class = “卡片” >

< 按鈕>更新標(biāo)簽

< div class = “卡片” >

< 按鈕>更新描述

< div class = “ 堆疊的容器” >

< div class = “卡片” >

< 按鈕>更新英雄圖像

< div class = “卡片” >

< 按鈕>更新描述

< div class = “卡片” >

< 按鈕>更新標(biāo)簽

查看原始cards.html 托管與?通過GitHub上

如果我們不想在標(biāo)記中保留兩個(gè)版本，則需要使用JavaScript來更新tabIndex卡片堆疊在頁面上的屬性。根據(jù)我們要渲染的控件元素的數(shù)量，與在標(biāo)記中維護(hù)卡的不同版本相比，這種方法可能更難于正確使用。

如何tabIndex影響焦點(diǎn)順序

設(shè)置tabIndex為0：將元素添加到默認(rèn)焦點(diǎn)順序中，該位置由其在HTML文檔中的位置確定

設(shè)置tabIndex為-1：從焦點(diǎn)順序中刪除元素；它不會(huì)得到關(guān)注

設(shè)置tabIndex為正數(shù)：將元素添加到默認(rèn)焦點(diǎn)順序中，在由數(shù)字值表示的位置

4.自定義焦點(diǎn)狀態(tài)時(shí)，請(qǐng)為最需要它們的用戶設(shè)計(jì)

瀏覽器使用outlineCSS屬性來呈現(xiàn)某種形式的視覺指示，表明元素處于焦點(diǎn)。焦點(diǎn)狀態(tài)旨在幫助用戶識(shí)別在使用鍵盤導(dǎo)航頁面時(shí)哪個(gè)元素將注冊(cè)鍵盤事件。

對(duì)于設(shè)計(jì)人員和開發(fā)人員來說，替換瀏覽器提供的默認(rèn)焦點(diǎn)狀態(tài)是很常見的。這可能涉及更新默認(rèn)outline，或者完全刪除它，并用另一個(gè)CSS屬性替換它，比如background，border，box-shadow，color，或transform。

您可能還會(huì)喜歡： 成都網(wǎng)站制作公司哪家好？ 使用Liquid創(chuàng)建可訪問的分頁。

但是，我們決定在我們的應(yīng)用程序中呈現(xiàn)自定義焦點(diǎn)狀態(tài)，我們應(yīng)確保它們滿足以下可訪問性要求：

足夠的色彩對(duì)比度：我們的對(duì)焦?fàn)顟B(tài)與其周圍的顏色之間應(yīng)該有足夠的對(duì)比度，以便視力障礙的用戶可以輕松地跟蹤當(dāng)前對(duì)焦的元素。

顏色變化與其他視覺指示器配對(duì)：色盲用戶可能無法注意到更改元素邊框，字體或背景的顏色。應(yīng)該將其與不需要用戶能夠區(qū)分顏色的其他視覺更改配對(duì)。這也適用于涉及顏色變化的懸停和錯(cuò)誤狀態(tài)。

在高對(duì)比度主題中可見：在Windows設(shè)備上啟用高對(duì)比度模式時(shí)，將忽略某些CSS屬性，包括background和box-shadow。顏色的變化也可能不會(huì)被記錄，這就是為什么依賴附加的指示符變得雙重重要的原因，這些附加的指示符對(duì)于需要在背景色和前景色之間需要更多對(duì)比度的人們來說是可以感知的。

盡管可以覆蓋默認(rèn)outline屬性，但切勿在沒有提供替代的情況下刪除默認(rèn)焦點(diǎn)狀態(tài)。

5.為鍵盤用戶提供快捷方式

如果有人使用鼠標(biāo)來導(dǎo)航網(wǎng)頁，則在頁面加載時(shí)，他們可以滾動(dòng)瀏覽多余的標(biāo)題內(nèi)容，以獲取所需的信息。對(duì)于鍵盤用戶而言，此過程并不那么精簡(jiǎn)，他們可能需要通過多個(gè)導(dǎo)航鏈接或頁面主要內(nèi)容之前的任何其他控制元素進(jìn)行制表。

作為開發(fā)人員，我們可以在應(yīng)用程序每個(gè)頁面的頂部提供“跳過鏈接”，以使鍵盤用戶可以繞過頁面主要內(nèi)容之前的控制元素。跳過鏈接通常從視圖中隱藏起來，直到獲得焦點(diǎn)為止。使用鼠標(biāo)與您的應(yīng)用進(jìn)行交互的用戶看不到它，但是它將成為使用鍵盤的人獲得關(guān)注的第一個(gè)元素。

單擊鏈接后，焦點(diǎn)將轉(zhuǎn)移到主要內(nèi)容容器，并且鍵盤用戶可以立即開始在頁面上的主要控制元素之間進(jìn)行制表。

鍵盤輔助功能：開始您的業(yè)務(wù)

< 身體>

< 一類 = “視覺隱藏的” HREF = “#mainContent” >跳至主要內(nèi)容

< 標(biāo)頭> ...

< 主 ID = “ mainContent” >

...

查看原始GitHub 托管于?的index.html

跳過鏈接不僅僅是便捷的快捷方式。它們是旁路模塊的一個(gè)示例，必須滿足A級(jí)WCAG標(biāo)準(zhǔn)。

經(jīng)常通過自己成為鍵盤用戶來測(cè)試您的應(yīng)用

對(duì)于不習(xí)慣使用輔助技術(shù)或設(shè)備的用戶，測(cè)試鍵盤的可訪問性具有相對(duì)較低的學(xué)習(xí)曲線。您所需要做的就是訪問鍵盤，熟悉標(biāo)準(zhǔn)鍵盤行為以及訪問Windows高對(duì)比度模式（通過購(gòu)買Windows設(shè)備或安裝虛擬機(jī)）。

在測(cè)試應(yīng)用程序的鍵盤可訪問性時(shí)，請(qǐng)牢記以下一些問題：

我可以使用鍵盤與響應(yīng)鼠標(biāo)單擊和手勢(shì)的任何事物進(jìn)行交互嗎？

有人會(huì)在焦點(diǎn)時(shí)知道如何與該元素進(jìn)行交互嗎？

焦點(diǎn)順序是否與頁面上交互式元素的視覺順序匹配？

即使我需要更高的顏色對(duì)比度，我也可以跟蹤當(dāng)前焦點(diǎn)在哪個(gè)元素上嗎？

我可以輕松進(jìn)入頁面的主要內(nèi)容嗎？

對(duì)所有這些問題回答“是”都無需花費(fèi)很多精力，并且在任何情況下都可以對(duì)用戶產(chǎn)生積極影響：他們是否有身體殘疾，正在尋找節(jié)省時(shí)間的方法或需要使用用一只手的電腦。

可訪問性測(cè)試是應(yīng)用程序開發(fā)的關(guān)鍵組成部分。具體地說，鍵盤的可訪問性與為使用屏幕閱讀器的用戶提供替代文本，或?yàn)闊o法聽到音頻內(nèi)容的人們提供字幕一樣重要。歸根結(jié)底，如果您希望完全訪問應(yīng)用程序，則不需要使用鼠標(biāo)即可使用該應(yīng)用程序。

文章標(biāo)題：成都網(wǎng)站制作公司哪家好？之如何增加用戶體驗(yàn)度
網(wǎng)頁URL：http://redsoil1982.com.cn/news20/184570.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站制作、用戶體驗(yàn)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成都網(wǎng)站制作公司哪家好？之如何增加用戶體驗(yàn)度

成都網(wǎng)站制作公司哪家好？之如何增加用戶體驗(yàn)度