如何隱藏Web中的元素方法-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)如何隱藏Web中的元素方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在市中等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),全網(wǎng)營(yíng)銷推廣,外貿(mào)網(wǎng)站建設(shè),市中網(wǎng)站建設(shè)費(fèi)用合理。

可訪問(wèn)性對(duì)visibility: hidden的影響

該元素被隱藏，其后代將從可訪問(wèn)性樹中刪除，并且屏幕閱讀器不會(huì)渲染該元素。

(1) Positioning

要隱藏帶有position屬性的元素，我們應(yīng)該將它移到屏幕外，并將其大小設(shè)置為0(寬度和高度)。個(gè)例子就是跳轉(zhuǎn)導(dǎo)航鏈接?？紤]下面的圖:

要將鏈接放置在屏幕之外，我們應(yīng)該添加以下內(nèi)容

「css」

.skip-link { 
    position: absolute; 
    top: -100%; 
}

值-100%將推動(dòng)元素100%的視口高度。結(jié)果，它將被完全隱藏。一旦它聚焦在鍵盤上，它就會(huì)像這樣顯示出來(lái)

.skip-link:focus { 
    position: absolute; 
    top: 0; 
}

可訪問(wèn)性對(duì)position: absolute | fixed的影響

屏幕閱讀器可訪問(wèn)該元素，并且鍵盤可聚焦。它只是從視口中隱藏起來(lái)。

Clip Path當(dāng)在元素上使用clip-path時(shí)，它創(chuàng)建一個(gè)裁剪區(qū)域，該區(qū)域定義應(yīng)該顯示和隱藏哪些部分。

在上面的例子中，透明的黑色區(qū)域有clip-path。當(dāng)clip-path應(yīng)用于元素時(shí)，透明黑色區(qū)域下的任何內(nèi)容都不會(huì)顯示。

為了更直觀地演示以上內(nèi)容，我將使用clippy工具。在下面的GIF中，我有如下的clip-path:

將每個(gè)方向的多邊形值設(shè)置為0 0，則裁剪區(qū)域的大小將調(diào)整為0。結(jié)果，圖像將不會(huì)顯示。同樣，這也可以用一個(gè)圓來(lái)代替多邊形:

img { 
    clip-path: circle(0 at 50% 50%); 
}

可訪問(wèn)性對(duì)clip-path的影響

元素僅在視覺上隱藏， 屏幕閱讀器和鍵盤焦點(diǎn)仍然可以使用它。

事例源碼：

https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

三、控制顏色和字體大小

雖然這兩種技術(shù)不像我們前面討論的那樣常見，但它們可能對(duì)某些用例有用。

1. 顏色透明

通過(guò)使文本的顏色透明，它將隱藏在視覺上。這對(duì)于只有圖標(biāo)的按鈕非常有用。

2. 字體大小

此外，將字體大小設(shè)置為0也很有用，因?yàn)檫@會(huì)在視覺上隱藏文本?？紤]下面的示例，其中有一個(gè)具有以下結(jié)構(gòu)的按鈕：

<button> 
  <svg  width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> 
    <!-- Path data --> 
  </svg> 
  <span>Like</span> 
</button>

我們的目標(biāo)是以可訪問(wèn)的方式隱藏文本。為此，我添加了以下CSS

.button span { 
    color: transparent; 
    font-size: 0; 
}

這樣，文本就被隱藏了。它甚至可以在不更改顏色的情況下工作，但是我出于解釋目的添加了它。

Aria Hidden

當(dāng)向元素添加aria-hidden屬性時(shí)，它將從可訪問(wèn)性樹中刪除該元素，這可以增強(qiáng)屏幕閱讀器用戶的體驗(yàn)。注意，它并沒有在視覺上隱藏元素，它只針對(duì)屏幕閱讀器用戶

<button> 
    Menu 
    <svg  aria-hidden="true"><!-- --></svg> 
</button>

在上面的例子中，我們有一個(gè)帶有標(biāo)簽和圖標(biāo)的菜單按鈕。為了向屏幕閱讀器隱藏圖標(biāo)，添加了aria-hidden。

根據(jù)Mozilla Developer Network (MDN)，下面是屬性的用例

• 隱藏裝飾性的內(nèi)容，如圖標(biāo)、圖像。

• 隱藏復(fù)制文本。

•  隱藏屏幕外或折疊的內(nèi)容。

可訪問(wèn)性對(duì)aria-hidden="true"的影響

是為屏幕閱讀器設(shè)計(jì)的，因?yàn)樗粚?duì)屏幕閱讀器隱藏內(nèi)容。然而，內(nèi)容對(duì)于有視力的用戶仍然是可見的，并且鍵盤是可聚焦的。

(1) 動(dòng)畫與互動(dòng)

當(dāng)我們想讓一個(gè)隱藏的元素動(dòng)起來(lái)時(shí)，例如，顯示隱藏的移動(dòng)導(dǎo)航，它需要以一種可訪問(wèn)的方式來(lái)完成。為了獲得一種可訪問(wèn)的體驗(yàn)，我們將探索一些值得學(xué)習(xí)的好例子，以及一些不好的例子，以避免犯可能會(huì)給屏幕閱讀器用戶帶來(lái)不好體驗(yàn)的錯(cuò)誤。

菜單動(dòng)畫-不好的例子

我們有一個(gè)菜單，在展開時(shí)需要有滑動(dòng)動(dòng)畫。最簡(jiǎn)單的方法是在菜單中添加以下內(nèi)容：

ul { 
    opacity: 0; 
    transform: translateX(100%); 
    transition: 0.3s ease-out; 
} 
 
ul.active { 
    opacity: 1; 
    transform: translateX(0); 
}

有了上述內(nèi)容，菜單將根據(jù).active類展開和折疊，該類將通過(guò) JavaScript 如下添加:

menuToggle.addEventListener('click', function(e){ 
  e.preventDefault(); 
  navMenu.classList.toggle('active'); 
});

結(jié)果可能看起來(lái)不錯(cuò)，但它有一個(gè)很大的錯(cuò)誤。使用opacity: 0不會(huì)隱藏可訪問(wèn)性樹的導(dǎo)航。即使導(dǎo)航在視覺上是隱藏的，它仍然可以通過(guò)鍵盤聚焦，并且可以被屏幕閱讀器訪問(wèn)。必須將其隱藏以避免混淆用戶。

下面是來(lái)自Chrome開發(fā)工具的 accessibility tree 的截圖:

簡(jiǎn)而言之，accessibility tree是屏幕閱讀器用戶可以訪問(wèn)的所有內(nèi)容的列表。在我們的例子中，導(dǎo)航列表在那里，而它在視覺上是隱藏的。我們需要解決兩個(gè)問(wèn)題:

• 菜單隱藏時(shí)避免用鍵盤聚焦

• 當(dāng)導(dǎo)航隱藏時(shí)，避免通過(guò)屏幕閱讀器告知導(dǎo)航

下面的屏幕截圖顯示了Mac OS上的VoiceOver轉(zhuǎn)子是如何看到頁(yè)面的。導(dǎo)航列表在那里，而它是隱藏的

菜單動(dòng)畫-好的例子

為了修正這個(gè)錯(cuò)誤，我們需要使用visibility: hidden作為導(dǎo)航菜單。這將確保菜單是隱藏的視覺和屏幕閱讀器。

「css」

ul { 
    visibility: hidden; 
    opacity: 0; 
    transform: translateX(100%); 
    transition: 0.3s ease-out; 
} 
 
ul.active { 
    visibility: visible; 
    opacity: 1; 
    transform: translateX(0); 
}

添加后，菜單將從屏幕閱讀器中隱藏。讓我們?cè)俅螠y(cè)試，看看VoiceOver將顯示什么：

自定義復(fù)選框

默認(rèn)的復(fù)選框設(shè)計(jì)很難自定義，因此，我們需要為復(fù)選框創(chuàng)建自定義設(shè)計(jì)。讓我們看看基本的 HTML：

<p  class="c-checkbox"> 
  <input  class="sr-only" type="checkbox" name="" id="c1"> 
  <label  class="c-checkbox__label" for="c1">Custom checkbox</label> 
</p>

要自定義復(fù)選框，我們需要以一種可訪問(wèn)的方式隱藏輸入。為此，應(yīng)該使用position和其他屬性。有一個(gè)常見的CSS類，稱為sr-only或visual -hidden，它只在視覺上隱藏一個(gè)元素，并讓鍵盤和屏幕閱讀器用戶可以訪問(wèn)它。

.sr-only { 
  border: 0; 
  clip: rect(0 0 0 0); 
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); 
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px; 
  white-space: nowrap; 
}

隱藏按鈕

在Twitter上，有一個(gè)名為“查看新推文”(See New Tweets)的按鈕，對(duì)于帶有aria-hidden內(nèi)容的屏幕閱讀器來(lái)說(shuō)是隱藏的，只有在有新推文可用時(shí)才會(huì)顯示出來(lái)。

關(guān)于“如何隱藏Web中的元素方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站題目：如何隱藏Web中的元素方法-創(chuàng)新互聯(lián)
文章路徑：http://muchs.cn/article32/dhdjsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站營(yíng)銷、微信公眾號(hào)、網(wǎng)站策劃、微信小程序、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

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