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