span與a元素的鍵盤聚焦性以及鍵盤點選性研究

2022-07-26 19:00:19 字數 863 閱讀 5331

我們平時涉及點選互動事件的時候,都是使用的a元素或者button元素,原因是可以相應鍵盤focus效果以及回車觸發點選事件,這是眾所周知的。

但是,可能存在一些特殊情況,我們需要使用預設沒有鍵盤可訪問性的元素,例如span元素,我們可以通過一定的設定支援鍵盤的可訪問性,這是不為所知的,也是本文的重點所在。

要讓乙個普通的span元素達到乙個含button元素的鍵盤可訪問性,我們需要如下處理:

測試

您可以狠狠地點選這裡:鍵盤聚焦性性與可點選性測試demo

demo頁面有4個按鈕,如下圖:

按鈕1

按鈕2按鈕3

按鈕4

這四個按鈕全部繫結了click事件,因此,點選任何按鈕,都會有彈出,下面需要測試的就是能否通過鍵盤操作彈出提示。

測試結果:

因此,以後,當你想要使用span,div元素模擬按鈕啊、選項卡按鈕、下拉框控制項等的時候,想要有良好的可訪問性,就需要遵循上面的5步驟:繫結點選事件→tabindex="0"role="button"(示意,完整role支援角色參見我之前用心整理的「wai-aria無障礙網頁應用屬性完全展示」一文)→附加的鍵盤事件→over~或return false~

轉來自張鑫旭-鑫空間-鑫生活

mac鍵盤與pc鍵盤的對應關係

剛開始使用mac時,由於mac與常用鍵盤不太一樣,導致使用的困難,現在將對應關係列出來,以方便大家使用。alt 視窗 ctrl esc shift 此鍵用於組合鍵時,只能與alt ctrl 視窗鍵一起進行組合,單獨時只能與上下左右鍵進行組合。enter command與option相當於ctrl和a...

Android軟鍵盤的控制以及更改軟鍵盤

edittext是可編輯控制項,往往會為它新增監聽,在軟鍵盤上也會有行為。1 隱藏軟鍵盤 inputmethodmanager imm inputmethodmanager getsystemservice context.inputmethodservice imm.hidesoftinputfr...

電腦按鍵以及鍵盤的總結

一 按鍵盤的鍵數可分為86鍵鍵盤 101鍵鍵盤 104鍵鍵盤 win98鍵盤。86鍵鍵盤 早期的鍵盤,鍵盤上有86鍵 101鍵鍵盤 101鍵 將幾常用鍵及數字鍵分離出來組合成鍵盤第三區 數字小鍵盤區,這樣就有101個鍵了 104鍵鍵盤 在win95推出後,增加三個功能鍵,它是目前最流行的一種鍵盤。w...