石家莊網(wǎng)站制作公司哪家好？ 設(shè)計(jì)具有鍵盤(pán)可訪問(wèn)性的應(yīng)用程序的5個(gè)步驟
鍵盤(pán)輔助功能
當(dāng)我們想到“普通”用戶時(shí)，我們傾向于想象他們?cè)谟?jì)算機(jī)上時(shí)使用鼠標(biāo)或觸控板。但是，如果他們的首選或唯一選擇是使用鍵盤(pán)呢？您是否考慮過(guò)考慮鍵盤(pán)可訪問(wèn)性來(lái)設(shè)計(jì)應(yīng)用程序？
某人可能不愿意，或者能夠操作鼠標(biāo)或觸控板來(lái)使用計(jì)算機(jī)的原因有很多。它們可能具有永久性，慢性或暫時(shí)性狀況，從而限制了它們的敏捷性或肌肉控制力，從而導(dǎo)致手腕或手部敏感，或者難以在屏幕上跟隨鼠標(biāo)光標(biāo)。他們也可能是“高級(jí)用戶”，他們正在尋找更多捷徑來(lái)簡(jiǎn)化他們的工作流程。在任何這些情況下，鍵盤(pán)都可能是個(gè)人與技術(shù)互動(dòng)的首選或必要手段。
在本文中，您將了解鍵盤(pán)可訪問(wèn)性準(zhǔn)則，以及在設(shè)計(jì)應(yīng)用程序以確保它們可通過(guò)鍵盤(pán)訪問(wèn)時(shí)要記住的5個(gè)步驟。
加入我們的Shopify合作伙伴市政廳-統(tǒng)一版
在本月的Partner Town Hall，我們將討論Reunite的發(fā)布會(huì)和新聞，這些會(huì)影響您的業(yè)務(wù)。另外，我們將僅為Shopify合作伙伴和開(kāi)發(fā)人員分享一些特別的公告。你不想錯(cuò)過(guò)這個(gè)。請(qǐng)?jiān)?月28日（星期四）美國(guó)東部時(shí)間上午10:00注冊(cè)，加入我們。
鍵盤(pán)輔助功能如何工作？
如果可以通過(guò)鍵盤(pán)訪問(wèn)應(yīng)用程序，則意味著人們可以選擇僅使用鍵盤(pán)來(lái)操作控件元素?？丶厥琼?yè)面上的任何交互式組件，例如按鈕，鏈接，表單輸入，視頻和其他交互式內(nèi)容。
鍵盤(pán)導(dǎo)航基礎(chǔ)
以下是一些用于鍵盤(pán)導(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)鍵盤(pán)行為的更多信息。
焦點(diǎn)順序
控制元素可以響應(yīng)鍵盤(pán)事件的順序稱為焦點(diǎn)順序。當(dāng)一個(gè)元素成為焦點(diǎn)時(shí)，您可以使用某些鍵盤(pán)控件與其進(jìn)行交互。當(dāng)元素失去焦點(diǎn)時(shí)，它將變得模糊。瀏覽器呈現(xiàn)默認(rèn)焦點(diǎn)狀態(tài)，以幫助用戶跟蹤當(dāng)前處于焦點(diǎn)的元素。
鍵盤(pán)輔助功能：Tab鍵順序移位
當(dāng)用戶按下鍵盤(pán)上的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)用程序更易于訪問(wèn)。
鍵盤(pán)可訪問(wèn)性和Web內(nèi)容可訪問(wèn)性指南（WCAG）
《 Web內(nèi)容可訪問(wèn)性指南》（WCAG）概述了三個(gè)級(jí)別的合規(guī)性-A級(jí)，AA級(jí)和AAA級(jí)-已被用作全球區(qū)域或國(guó)家級(jí)Web可訪問(wèn)性法律的標(biāo)準(zhǔn)。
鍵盤(pán)可訪問(wè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)的。
也就是說(shuō)，如果我們不小心，鍵盤(pán)的可訪問(wèn)性也很容易出錯(cuò)。以下是網(wǎng)上常見(jiàn)的鍵盤(pán)可訪問(wèn)性問(wèn)題的示例：
潛意識(shí)狀態(tài)
焦點(diǎn)順序錯(cuò)誤
無(wú)法獲得關(guān)注的互動(dòng)元素
復(fù)雜的組件無(wú)法進(jìn)行鍵盤(pán)交互
“如果我們不小心，鍵盤(pán)的可訪問(wèn)性也很容易出錯(cuò)。”
幸運(yùn)的是，我們可以使用很多技術(shù)來(lái)牢記鍵盤(pán)用戶并避免在我們自己的應(yīng)用程序中犯這些錯(cuò)誤。
訂閱我們的開(kāi)發(fā)者摘要新聞通訊
通過(guò)我們的季度開(kāi)發(fā)者摘要，了解Shopify API和其他開(kāi)發(fā)者產(chǎn)品的最新更改。
構(gòu)建鍵盤(pán)可訪問(wèn)應(yīng)用程序的5個(gè)步驟
1.設(shè)計(jì)直觀的交互
當(dāng)我們呈現(xiàn)簡(jiǎn)單的控件元素而沒(méi)有自定義行為時(shí)，通?？梢岳盟鼈兊膬?nèi)置鍵盤(pán)輔助功能。但是，如果我們不知道與按鈕，鏈接或輸入相關(guān)的標(biāo)準(zhǔn)鍵盤(pán)行為，則可能會(huì)無(wú)意間為鍵盤(pán)用戶帶來(lái)混亂的體驗(yàn)。
“如果我們不了解與按鈕，鏈接或輸入相關(guān)的標(biāo)準(zhǔn)鍵盤(pán)行為，我們可能會(huì)無(wú)意間為鍵盤(pán)用戶帶來(lái)混亂的體驗(yàn)。”
例如，開(kāi)發(fā)人員有時(shí)會(huì)使用CSS隱藏本機(jī)HTML單選按鈕，以便使用更具風(fēng)格的外觀。輸入不是幕后的單選按鈕并不明顯，因此鍵盤(pán)用戶可能沒(méi)有意識(shí)到他們應(yīng)該使用箭頭鍵（而非Tab鍵）在相關(guān)選項(xiàng)之間切換焦點(diǎn)。
鍵盤(pán)可訪問(wèn)性：CSS遮擋的無(wú)線電輸入
三個(gè)風(fēng)格化的輸入，其中單選輸入已被CSS遮蓋，使它們看起來(lái)更像按鈕。
為避免此問(wèn)題，我們應(yīng)該顯示至少類似于本機(jī)HTML元素的內(nèi)容，以便為希望或需要使用鍵盤(pán)與其交互的任何人提供視覺(jué)提示。
鍵盤(pán)輔助功能：集成組件的輸入
三個(gè)風(fēng)格化的輸入，將類似于無(wú)線電輸入的組件集成到設(shè)計(jì)中。
2.石家莊網(wǎng)站制作公司哪家好？構(gòu)建您的應(yīng)用程序，以便鍵盤(pán)可以完成鼠標(biāo)可以執(zhí)行的所有操作
請(qǐng)注意內(nèi)置鍵盤(pán)可訪問(wèn)性功能所沒(méi)有的元素。布局元素，列表，表，標(biāo)題，段落和非語(yǔ)義HTML標(biāo)簽?zāi)J(rèn)情況下不支持鍵盤(pán)快捷鍵。但是，它們經(jīng)常用于構(gòu)建更復(fù)雜的組件，例如選項(xiàng)卡，拖放列表或模式。
JavaScript使我們能夠添加事件偵聽(tīng)器，以使非控制元素響應(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事件處理程序，以通過(guò)Enter鍵和/或空格鍵來(lái)注冊(cè)“點(diǎn)擊”（可以同時(shí)使用鏈接單擊鏈接，而按鈕僅支持Enter鍵）。
{item.name}
我們可以通過(guò)使用諸如錨標(biāo)記或按鈕元素之類的控件來(lái)避免一些額外的工作。我們始終可以使用CSS覆蓋默認(rèn)的鏈接和按鈕樣式，并使交互式元素跨越其非交互式父級(jí)的整個(gè)寬度，以最大化目標(biāo)區(qū)域。
{item.name}
無(wú)論我們是否將控件元素用于非本機(jī)功能，我們?nèi)钥赡苄枰獮榧^鍵（在選項(xiàng)卡組件中的選項(xiàng)卡之間導(dǎo)航）或退出鍵（以關(guān)閉疊加層）添加事件偵聽(tīng)器，以使組件100鍵盤(pán)可用百分比。
如果我們?yōu)楦鼜?fù)雜的組件實(shí)現(xiàn)非標(biāo)準(zhǔn)的鍵盤(pán)行為，則提供可見(jiàn)的說(shuō)明來(lái)描述人們可以用來(lái)與組件交互的鍵盤(pán)控件會(huì)很有幫助。
3.覆蓋默認(rèn)焦點(diǎn)順序時(shí)，請(qǐng)執(zhí)行其他工作
焦點(diǎn)順序是另一個(gè)與鍵盤(pán)可訪問(wèn)性緊密相關(guān)的WCAG要求。為了滿足A級(jí)標(biāo)準(zhǔn)，焦點(diǎn)順序應(yīng)與頁(yè)面上交互式元素的視覺(jué)順序保持一致。鍵盤(pán)用戶應(yīng)該能夠在屏幕上的控件中從上到下以及在與文本內(nèi)容相同的水平方向（從左到右，或從右到左）中導(dǎo)航。
鍵盤(pán)輔助功能：更新描述流程
在此頁(yè)面上，內(nèi)容是從左向右呈現(xiàn)的，鍵盤(pán)用戶應(yīng)能夠按以下順序在控制元素之間導(dǎo)航：“更新英雄圖像”，“更新標(biāo)簽”，“更新描述”，“刪除”， “發(fā)布”。
滿足此條件的最簡(jiǎn)單方法是保留默認(rèn)的焦點(diǎn)順序，該順序由標(biāo)記中元素的排列順序直接確定。當(dāng)我們引入控制元素的視覺(jué)順序與其在源代碼中的布局方式之間的差異時(shí)，我們就有可能無(wú)法滿足此標(biāo)準(zhǔn)。
您可能還會(huì)喜歡： 使用Liquid和Shopify構(gòu)建可訪問(wèn)的面包屑導(dǎo)航。
如果我們以上面的屏幕截圖為例，假設(shè)我們希望“更新標(biāo)簽”卡在堆疊較窄視口時(shí)將其與“更新描述”卡切換位置。如果卡片被渲染為彈性物品，我們可以考慮使用orderCSS屬性在特定的斷點(diǎn)處更改其順序。
。容器 {
顯示：flex;
}
@media（最大寬度：600 px）{
?？ǎ旱趎個(gè)孩子（2）{
訂購(gòu)：3 ;
}
}
查看原始GitHub 托管?的example.css
雖然該order屬性影響彈性項(xiàng)目的視覺(jué)順序，但它不會(huì)在源代碼中更新其排列。結(jié)果，當(dāng)用戶按下Tab鍵在每個(gè)按鈕之間導(dǎo)航時(shí)，即使“更新標(biāo)簽”按鈕在屏幕上以相反的順序顯示，它們?nèi)詫⒃?ldquo;更新描述”之前獲得焦點(diǎn)。這會(huì)導(dǎo)致焦點(diǎn)意外地在頁(yè)面上上下移動(dòng)，從而給用戶帶來(lái)混亂的體驗(yàn)。
鍵盤(pán)輔助功能：更新描述流程已重新排序
如果使用CSS在視覺(jué)上對(duì)“更新標(biāo)簽”和“更新描述”按鈕進(jìn)行重新排序，則鍵盤(pán)用戶希望“更新描述”在“更新標(biāo)簽”之前獲得焦點(diǎn)。但是，CSS不會(huì)更改標(biāo)記中元素布局的順序。這會(huì)在控制元素獲得焦點(diǎn)的順序（由標(biāo)記確定）與它們?cè)谄聊簧巷@示的順序之間產(chǎn)生差異。
避免此問(wè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 托管與?通過(guò)GitHub上
如果我們不想在標(biāo)記中保留兩個(gè)版本，則需要使用JavaScript來(lái)更新tabIndex卡片堆疊在頁(yè)面上的屬性。根據(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屬性來(lái)呈現(xiàn)某種形式的視覺(jué)指示，表明元素處于焦點(diǎn)。焦點(diǎn)狀態(tài)旨在幫助用戶識(shí)別在使用鍵盤(pán)導(dǎo)航頁(yè)面時(shí)哪個(gè)元素將注冊(cè)鍵盤(pán)事件。
對(duì)于設(shè)計(jì)人員和開(kāi)發(fā)人員來(lái)說(shuō)，替換瀏覽器提供的默認(rèn)焦點(diǎn)狀態(tài)是很常見(jiàn)的。這可能涉及更新默認(rèn)outline，或者完全刪除它，并用另一個(gè)CSS屬性替換它，比如background，border，box-shadow，color，或transform。
但是，我們決定在我們的應(yīng)用程序中呈現(xiàn)自定義焦點(diǎn)狀態(tài)，我們應(yīng)確保它們滿足以下可訪問(wèn)性要求：
足夠的色彩對(duì)比度：我們的對(duì)焦?fàn)顟B(tài)與其周圍的顏色之間應(yīng)該有足夠的對(duì)比度，以便視力障礙的用戶可以輕松地跟蹤當(dāng)前對(duì)焦的元素。
顏色變化與其他視覺(jué)指示器配對(duì)：色盲用戶可能無(wú)法注意到更改元素邊框，字體或背景的顏色。應(yīng)該將其與不需要用戶能夠區(qū)分顏色的其他視覺(jué)更改配對(duì)。這也適用于涉及顏色變化的懸停和錯(cuò)誤狀態(tài)。
在高對(duì)比度主題中可見(jiàn)：在Windows設(shè)備上啟用高對(duì)比度模式時(shí)，將忽略某些CSS屬性，包括background和box-shadow。顏色的變化也可能不會(huì)被記錄，這就是為什么依賴附加的指示符變得雙重重要的原因，這些附加的指示符對(duì)于需要在背景色和前景色之間需要更多對(duì)比度的人們來(lái)說(shuō)是可以感知的。
盡管可以覆蓋默認(rèn)outline屬性，但切勿在沒(méi)有提供替代的情況下刪除默認(rèn)焦點(diǎn)狀態(tài)。
5.為鍵盤(pán)用戶提供快捷方式
如果有人使用鼠標(biāo)來(lái)導(dǎo)航網(wǎng)頁(yè)，則在頁(yè)面加載時(shí)，他們可以滾動(dòng)瀏覽多余的標(biāo)題內(nèi)容，以獲取所需的信息。對(duì)于鍵盤(pán)用戶而言，此過(guò)程并不那么精簡(jiǎn)，他們可能需要通過(guò)多個(gè)導(dǎo)航鏈接或頁(yè)面主要內(nèi)容之前的任何其他控制元素進(jìn)行制表。
作為開(kāi)發(fā)人員，我們可以在應(yīng)用程序每個(gè)頁(yè)面的頂部提供“跳過(guò)鏈接”，以使鍵盤(pán)用戶可以繞過(guò)頁(yè)面主要內(nèi)容之前的控制元素。跳過(guò)鏈接通常從視圖中隱藏起來(lái)，直到獲得焦點(diǎn)為止。使用鼠標(biāo)與您的應(yīng)用進(jìn)行交互的用戶看不到它，但是它將成為使用鍵盤(pán)的人獲得關(guān)注的第一個(gè)元素。
單擊鏈接后，焦點(diǎn)將轉(zhuǎn)移到主要內(nèi)容容器，并且鍵盤(pán)用戶可以立即開(kāi)始在頁(yè)面上的主要控制元素之間進(jìn)行制表。
鍵盤(pán)輔助功能：開(kāi)始您的業(yè)務(wù)
< 身體>
< 身體>
< 一 類 = “視覺(jué)隱藏的” HREF = “#mainContent” >跳至主要內(nèi)容
< 標(biāo)頭> ...
< 主 ID = “ mainContent” >
...
查看原始GitHub 托管于?的index.html
跳過(guò)鏈接不僅僅是便捷的快捷方式。它們是旁路模塊的一個(gè)示例，必須滿足A級(jí)WCAG標(biāo)準(zhǔn)。
經(jīng)常通過(guò)自己成為鍵盤(pán)用戶來(lái)測(cè)試您的應(yīng)用
對(duì)于不習(xí)慣使用輔助技術(shù)或設(shè)備的用戶，測(cè)試鍵盤(pán)的可訪問(wèn)性具有相對(duì)較低的學(xué)習(xí)曲線。您所需要做的就是訪問(wèn)鍵盤(pán)，熟悉標(biāo)準(zhǔn)鍵盤(pán)行為以及訪問(wèn)Windows高對(duì)比度模式（通過(guò)購(gòu)買(mǎi)Windows設(shè)備或安裝虛擬機(jī)）。
在測(cè)試應(yīng)用程序的鍵盤(pán)可訪問(wèn)性時(shí)，請(qǐng)牢記以下一些問(wèn)題：
我可以使用鍵盤(pán)與響應(yīng)鼠標(biāo)單擊和手勢(shì)的任何事物進(jìn)行交互嗎？
有人會(huì)在焦點(diǎn)時(shí)知道如何與該元素進(jìn)行交互嗎？
焦點(diǎn)順序是否與頁(yè)面上交互式元素的視覺(jué)順序匹配？
即使我需要更高的顏色對(duì)比度，我也可以跟蹤當(dāng)前焦點(diǎn)在哪個(gè)元素上嗎？
我可以輕松進(jìn)入頁(yè)面的主要內(nèi)容嗎？
對(duì)所有這些問(wèn)題回答“是”都無(wú)需花費(fèi)很多精力，并且在任何情況下都可以對(duì)用戶產(chǎn)生積極影響：他們是否有身體殘疾，正在尋找節(jié)省時(shí)間的方法或需要使用用一只手的電腦。
可訪問(wèn)性測(cè)試是應(yīng)用程序開(kāi)發(fā)的關(guān)鍵組成部分。具體地說(shuō)，鍵盤(pán)的可訪問(wèn)性與為使用屏幕閱讀器的用戶提供替代文本，或?yàn)闊o(wú)法聽(tīng)到音頻內(nèi)容的人們提供字幕一樣重要。歸根結(jié)底，如果您希望完全訪問(wèn)應(yīng)用程序，則不需要使用鼠標(biāo)即可使用該應(yīng)用程序。
