小米官宣：2023年上半年出貨量中國第一！
今日早間，小米電視官方微博帶來消息，稱2023年小米電視上半年出貨量達(dá)到了中國第一，同時還表示小米電視的巨屏風(fēng)暴即將開始。“公布一個好消息2023年#小米電視上半年出貨量中國
在網(wǎng)頁無障礙領(lǐng)域，最具爭議的問題之一是，在創(chuàng)建某些類型的交互元素時，應(yīng)該使用按鈕還是鏈接。為什么這個問題如此有爭議？多年來，無障礙專家已經(jīng)無數(shù)次回答了這個問題。同時，還有大量的參考文獻(xiàn)提供了這個問題的答案。
答案很簡單，只有在沒有考慮到為什么鏈接和按鈕的外觀和行為完全不同的情況下，才會引起爭議。
首先，了解按鈕和鏈接的區(qū)別很重要。我曾看到有人錯誤地將它們混為一談，過度簡化為 "執(zhí)行動作 "的元素。雖然它們都能讓用戶執(zhí)行不同的操作，但這并不意味著它們是相同的元素。
我們通過閱讀一些 HTML Living Standard 和 WAI-ARIA 1.2 的內(nèi)容來回答這個關(guān)于行為差異的問題。
注意：本文僅討論 HTML <button> 和 <a> 元素。
HTML Living Standard 有一個專門討論鏈接的部分。以下是該文檔提供的釋義：
鏈接是一個概念性結(jié)構(gòu)，代表兩個資源之間的連接。
它還指出，鏈接有兩種類型：外部資源鏈接和超鏈接。
我們分別舉例說明。
指向外部資源的鏈接是指當(dāng)前網(wǎng)站之外的資源。可以通過設(shè)置 rel 屬性為 "external" 來標(biāo)記這些鏈接，然后還可以使用像 a[rel="external"] 這樣的 CSS 屬性選擇器對它們應(yīng)用獨(dú)特的樣式。例如，您可能選擇在每個 rel="external" 的鏈接后面附加文本 "(外部鏈接)"。這可以通過以下 CSS 實(shí)現(xiàn)：
a[rel="external"]::after { content: " (external link)";}相關(guān)概念：提前警告用戶上下文變化，以盡量減少混淆
還可以對帶有 target="_blank" 的鏈接應(yīng)用特殊樣式。在以下示例中，文本“（在新標(biāo)簽頁中打開）”被添加到鏈接中，以警告用戶激活鏈接時會發(fā)生多個上下文變化。
a[target="_blank"]::after { content: " (opens in new tab)";}這與 Success Criterion 3.2.5: Change on Request 有關(guān)，該標(biāo)準(zhǔn)指出：
只有在用戶提出要求時才會更改上下文，或者有一種機(jī)制可以關(guān)閉這種更改。
出于許多原因，提醒用戶某個操作會導(dǎo)致上下文變化非常重要。一些用戶可能因?yàn)檎J(rèn)知限制或視覺、閱讀或智力障礙而無法察覺到上下文的變化。對于運(yùn)動能力有限的用戶來說，意外和不必要的上下文變化會導(dǎo)致他們需要付出額外努力才能回到原來的狀態(tài)。
超鏈接是指向當(dāng)前網(wǎng)站內(nèi)資源的鏈接。下面是一些例子：
根據(jù) HTML Living Standard，<a> 元素的 rel 屬性有多個值可用于指定元素為超鏈接：alternate、author、bookmark、help、license、next、prev、search 和 tag。
我列出這長長的值列表并不是因?yàn)槲艺J(rèn)為了解每一個都很重要。這樣做是為了更明顯地展示原生 <a> 元素所處理的大量功能。你可能聽說過，當(dāng)你想將 <button> 元素變成鏈接時，可以應(yīng)用 role="link"，但這遠(yuǎn)遠(yuǎn)不夠。
當(dāng)想渲染一個鏈接時，不使用原生的 <a> 元素會導(dǎo)致大量功能喪失，而我們討論的這一個屬性只是觸及了表面。在這里，ARIA 的第一條規(guī)則非常重要：
如果可以使用具有所需語義和行為的原生 HTML 元素或?qū)傩裕皇侵匦吕靡粋€元素并添加 ARIA 角色、狀態(tài)或?qū)傩詠硎蛊淇稍L問，那么請這樣做。
在定義鏈接方面，我們還有一個話題要討論，那就是 link 角色。 link 是 <a> 元素的默認(rèn)角色。下面是該角色的定義方式：
對內(nèi)部或外部資源的交互式引用，激活后可使用戶代理導(dǎo)航到該資源。
還有一條注釋寫道：
如果按下鏈接會觸發(fā)操作，但不會改變?yōu)g覽器焦點(diǎn)或頁面位置，建議作者考慮使用按鈕角色而不是鏈接角色。
根據(jù)我們迄今為止所了解的所有信息，我認(rèn)為我們可以對鏈接做出如下定義：連接兩個資源的元素，激活后可執(zhí)行以下操作之一：下載鏈接資源、將瀏覽器焦點(diǎn)切換到頁面的另一部分或?qū)g覽器位置切換到另一個頁面。
HTML Living Standard 并沒有像對鏈接那樣為我們提供太多關(guān)于按鈕的非技術(shù)信息，因此我將依賴 MDN Web 文檔和 WAI-ARIA 1.2 規(guī)范來進(jìn)行定義。
MDN Web Docs 對按鈕元素的定義如下
<button> HTML 元素是一種交互式元素，用戶可以用鼠標(biāo)、鍵盤、手指、語音指令或其他輔助技術(shù)激活它。一旦激活，它就會執(zhí)行一個可編程的操作，如提交表單或打開對話框。
按鈕元素接受的一長串屬性：
這是一個很大的功能。該列表還說明了為什么混合匹配 <a> 和 <button> 元素不是一個好主意。僅僅將 role="button" 應(yīng)用于 <a> 元素還不足以使錨元素與按鈕元素的本地實(shí)現(xiàn)相匹配。事實(shí)上，如果不使用輔助技術(shù)，僅僅更改 role 并不能改變元素的外觀或行為。
WAI-ARIA 1.2 規(guī)范指出， button 的作用是：
點(diǎn)擊或按下時允許用戶觸發(fā)操作的輸入。按鈕主要用于不連續(xù)的操作。將按鈕的外觀標(biāo)準(zhǔn)化，可增強(qiáng)用戶將部件識別為按鈕的能力。
這就是說，按鈕通常一次只用于執(zhí)行一個動作。它還指出，用戶可以從按鈕的標(biāo)準(zhǔn)化外觀中獲益，從而識別出按鈕是一種交互式元素。
button 角色支持一種 ARIA 狀態(tài)，而 link 角色不支持這種狀態(tài)。這個狀態(tài)就是 aria-pressed 。它傳達(dá)了切換按鈕的 "按下"狀態(tài)。這并不是 <a> 元素的特質(zhì)。這是另一個例子，說明按鈕和鏈接之間的差別有多大。
ARIA 創(chuàng)作實(shí)踐指南 (APG) 是學(xué)習(xí)無障礙語義和鍵盤界面的有用資源。它有幾個常用小工具的示例。它還包括有關(guān)常見做法的資源。
其中一個部件示例是按鈕部件。在定義了該 widget 并命名了另外兩種支持的按鈕類型（切換和菜單）后，它指出了區(qū)分鏈接和按鈕的重要性：
按鈕執(zhí)行的操作類型與鏈接的功能截然不同。重要的是，窗口小部件的外觀和作用必須與其提供的功能相匹配。
它還指出，有時鏈接具有按鈕的視覺風(fēng)格，但它說還有一個更好的解決方案：調(diào)整設(shè)計。
然而，元素有時具有鏈接的視覺樣式，但執(zhí)行按鈕的動作。在這種情況下，為元素賦予按鈕角色有助于輔助技術(shù)用戶理解元素的功能。但更好的解決方案是調(diào)整視覺設(shè)計，使其與功能和 ARIA 角色相匹配。
現(xiàn)在，我們應(yīng)該對鏈接和按鈕的不同之處有了一定的了解。下面再列舉幾個不同之處的例子：
還有多少用戶代理或輔助技術(shù)功能被編碼不良的元素破壞？我不知道。你想測試每一個元素并找出答案嗎？我很懷疑。使用本地 HTML 元素即可！
請記住使用 ARIA 的第一條規(guī)則：
如果可以使用已內(nèi)置所需語義和行為的本地 HTML 元素或?qū)傩裕皇侵匦吕靡粋€元素并添加 ARIA 角色、狀態(tài)或?qū)傩允蛊淇稍L問，那么就這樣做吧。
不要忘記使用 ARIA 的第二條規(guī)則：
除非確有必要，否則不要改變本地語義。
有四項(xiàng)無障礙原則指導(dǎo)我們必須如何構(gòu)建網(wǎng)絡(luò)和內(nèi)容。可以用縮寫詞 POUR 來記住它們：信息和界面必須是可感知的、可操作的、可理解的和穩(wěn)健的。
按鈕和鏈接的外觀與無障礙環(huán)境的四項(xiàng)原則有什么關(guān)系呢
當(dāng)你需要連接兩個資源，且元素被激活時需要發(fā)生以下情況之一時，請使用錨元素：
當(dāng)需要讓用戶執(zhí)行可編程操作（如提交表單或打開對話框）時，可使用按鈕元素。
本文鏈接：http://m.www897cc.com/showinfo-26-76492-0.html我應(yīng)該使用按鈕還是鏈接
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號