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

2022-08-03 分類：用戶體驗

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

鍵盤輔助功能

當我們想到“普通”用戶時，我們傾向于想象他們在計算機上時使用鼠標或觸控板。但是，如果他們的選或選擇是使用鍵盤呢？您是否考慮過考慮鍵盤可訪問性來設計應用程序？

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

在本文中，您將了解鍵盤可訪問性準則，以及在設計應用程序以確保它們可通過鍵盤訪問時要記住的5個步驟。

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

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

鍵盤輔助功能如何工作？

如果可以通過鍵盤訪問應用程序，則意味著人們可以選擇僅使用鍵盤來操作控件元素。控件元素是頁面上的任何交互式組件，例如按鈕，鏈接，表單輸入，視頻和其他交互式內容。

鍵盤導航基礎

以下是一些用于鍵盤導航的基本鍵：

導航到下一個控件元素：選項卡（或相關單選按鈕的向右或向下箭頭鍵和選擇選項）

導航到上一個控件元素： Shift + Tab（或相關單選按鈕和選擇選項的向左或向上箭頭鍵）

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

在相關單選按鈕或選擇選項之間導航：箭頭鍵

您可以在本文中了解有關HTML元素的標準鍵盤行為的更多信息。

焦點順序

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

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

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

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

鍵盤可訪問性和Web內容可訪問性指南（WCAG）

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

鍵盤可訪問性是達到A級標準的成功標準之一。級別標準描述了所有Web內容的必備功能。它們也被認為是最容易實現(xiàn)的。

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

潛意識狀態(tài)

焦點順序錯誤

無法獲得關注的互動元素

復雜的組件無法進行鍵盤交互

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

幸運的是，我們可以使用很多技術來牢記鍵盤用戶并避免在我們自己的應用程序中犯這些錯誤。

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

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

構建鍵盤可訪問應用程序的5個步驟

1.設計直觀的交互

當我們呈現(xiàn)簡單的控件元素而沒有自定義行為時，通?？梢岳盟鼈兊膬戎面I盤輔助功能。但是，如果我們不知道與按鈕，鏈接或輸入相關的標準鍵盤行為，則可能會無意間為鍵盤用戶帶來混亂的體驗。

“如果我們不了解與按鈕，鏈接或輸入相關的標準鍵盤行為，我們可能會無意間為鍵盤用戶帶來混亂的體驗。”

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

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

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

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

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

三個風格化的輸入，將類似于無線電輸入的組件集成到設計中。

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

請注意內置鍵盤可訪問性功能所沒有的元素。布局元素，列表，表，標題，段落和非語義HTML標簽默認情況下不支持鍵盤快捷鍵。但是，它們經(jīng)常用于構建更復雜的組件，例如選項卡，拖放列表或模式。

JavaScript使我們能夠添加事件偵聽器，以使非控制元素響應鼠標單擊或手勢。例如，在React中，我們可以使用onClickprop向列表項元素添加交互性。

{item.name}

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

{item.name}

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

{item.name}

無論我們是否將控件元素用于非本機功能，我們仍可能需要為箭頭鍵（在選項卡組件中的選項卡之間導航）或退出鍵（以關閉疊加層）添加事件偵聽器，以使組件100鍵盤可用百分比。

如果我們?yōu)楦鼜碗s的組件實現(xiàn)非標準的鍵盤行為，則提供可見的說明來描述人們可以用來與組件交互的鍵盤控件會很有幫助。

3.覆蓋默認焦點順序時，請執(zhí)行其他工作

焦點順序是另一個與鍵盤可訪問性緊密相關的WCAG要求。為了滿足A級標準，焦點順序應與頁面上交互式元素的視覺順序保持一致。鍵盤用戶應該能夠在屏幕上的控件中從上到下以及在與文本內容相同的水平方向（從左到右，或從右到左）中導航。

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

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

滿足此條件的最簡單方法是保留默認的焦點順序，該順序由標記中元素的排列順序直接確定。當我們引入控制元素的視覺順序與其在源代碼中的布局方式之間的差異時，我們就有可能無法滿足此標準。

您可能還會喜歡：使用Liquid和Shopify構建可訪問的面包屑導航。

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

。容器 {

顯示：flex;

}

@media（大寬度：600 px）{

?？ǎ旱趎個孩子（2）{

訂購：3 ;

}

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

雖然該order屬性影響彈性項目的視覺順序，但它不會在源代碼中更新其排列。結果，當用戶按下Tab鍵在每個按鈕之間導航時，即使“更新標簽”按鈕在屏幕上以相反的順序顯示，它們仍將在“更新描述”之前獲得焦點。這會導致焦點意外地在頁面上上下移動，從而給用戶帶來混亂的體驗。

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

如果使用CSS在視覺上對“更新標簽”和“更新描述”按鈕進行重新排序，則鍵盤用戶希望“更新描述”在“更新標簽”之前獲得焦點。但是，CSS不會更改標記中元素布局的順序。這會在控制元素獲得焦點的順序（由標記確定）與它們在屏幕上顯示的順序之間產生差異。

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

< div class = “容器” >

< div class = “卡片” >

< 按鈕>更新英雄圖像

< div class = “卡片” >

< 按鈕>更新標簽

< div class = “卡片” >

< 按鈕>更新描述

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

< div class = “卡片” >

< 按鈕>更新英雄圖像

< div class = “卡片” >

< 按鈕>更新描述

< div class = “卡片” >

< 按鈕>更新標簽

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

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

如何tabIndex影響焦點順序

設置tabIndex為0：將元素添加到默認焦點順序中，該位置由其在HTML文檔中的位置確定

設置tabIndex為-1：從焦點順序中刪除元素；它不會得到關注

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

4.自定義焦點狀態(tài)時，請為最需要它們的用戶設計

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

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

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

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

足夠的色彩對比度：我們的對焦狀態(tài)與其周圍的顏色之間應該有足夠的對比度，以便視力障礙的用戶可以輕松地跟蹤當前對焦的元素。

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

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

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

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

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

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

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

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

< 身體>

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

< 標頭> ...

< 主 ID = “ mainContent” >

...

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

跳過鏈接不僅僅是便捷的快捷方式。它們是旁路模塊的一個示例，必須滿足A級WCAG標準。

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

對于不習慣使用輔助技術或設備的用戶，測試鍵盤的可訪問性具有相對較低的學習曲線。您所需要做的就是訪問鍵盤，熟悉標準鍵盤行為以及訪問Windows高對比度模式（通過購買Windows設備或安裝虛擬機）。

在測試應用程序的鍵盤可訪問性時，請牢記以下一些問題：

我可以使用鍵盤與響應鼠標單擊和手勢的任何事物進行交互嗎？

有人會在焦點時知道如何與該元素進行交互嗎？

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

即使我需要更高的顏色對比度，我也可以跟蹤當前焦點在哪個元素上嗎？

我可以輕松進入頁面的主要內容嗎？

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

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

網(wǎng)頁題目：成都網(wǎng)站制作公司哪家好？之如何增加用戶體驗度
網(wǎng)頁網(wǎng)址：http://www.rwnh.cn/news/184570.html

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

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

猜你還喜歡下面的內容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

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