這篇文章主要介紹了隱藏 Web 中的元素方法及優(yōu)缺點教程，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
事例源碼：
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. 可訪問性對visibility: hidden的影響
該元素被隱藏，其后代將從可訪問性樹中刪除，并且屏幕閱讀器不會渲染該元素。
(1) Positioning
要隱藏帶有position屬性的元素，我們應(yīng)該將它移到屏幕外，并將其大小設(shè)置為0(寬度和高度)。個例子就是跳轉(zhuǎn)導(dǎo)航鏈接?？紤]下面的圖:
要將鏈接放置在屏幕之外，我們應(yīng)該添加以下內(nèi)容
.skip-link {
position: absolute;
top: -100%;
}
值-100%將推動元素100%的視口高度。結(jié)果，它將被完全隱藏。一旦它聚焦在鍵盤上，它就會像這樣顯示出來
.skip-link:focus {
position: absolute;
top: 0;
}
事例源碼：
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. 可訪問性對position: absolute | fixed的影響
屏幕閱讀器可訪問該元素，并且鍵盤可聚焦。它只是從視口中隱藏起來。
Clip Path當(dāng)在元素上使用clip-path時，它創(chuàng)建一個裁剪區(qū)域，該區(qū)域定義應(yīng)該顯示和隱藏哪些部分。
在上面的例子中，透明的黑*域有clip-path。當(dāng)clip-path應(yīng)用于元素時，透明黑*域下的任何內(nèi)容都不會顯示。
為了更直觀地演示以上內(nèi)容，我將使用clippy工具。在下面的GIF中，我有如下的clip-path:
將每個方向的多邊形值設(shè)置為0 0，則裁剪區(qū)域的大小將調(diào)整為0。結(jié)果，圖像將不會顯示。同樣，這也可以用一個圓來代替多邊形:
img {
clip-path: circle(0 at 50% 50%);
}
7. 可訪問性對clip-path的影響
元素僅在視覺上隱藏， 屏幕閱讀器和鍵盤焦點仍然可以使用它。
事例源碼：
https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
三、控制顏色和字體大小
雖然這兩種技術(shù)不像我們前面討論的那樣常見，但它們可能對某些用例有用。
1. 顏色透明
通過使文本的顏色透明，它將隱藏在視覺上。這對于只有圖標的按鈕非常有用。
2. 字體大小
此外，將字體大小設(shè)置為0也很有用，因為這會在視覺上隱藏文本?？紤]下面的示例，其中有一個具有以下結(jié)構(gòu)的按鈕：
Like
我們的目標是以可訪問的方式隱藏文本。為此，我添加了以下CSS
.button span {
color: transparent;
font-size: 0;
}
這樣，文本就被隱藏了。它甚至可以在不更改顏色的情況下工作，但是我出于解釋目的添加了它。
事例源碼：
https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
3. Aria Hidden
當(dāng)向元素添加aria-hidden屬性時，它將從可訪問性樹中刪除該元素，這可以增強屏幕閱讀器用戶的體驗。注意，它并沒有在視覺上隱藏元素，它只針對屏幕閱讀器用戶
<button>
Menu
<svg aria-hidden="true"><!-- --></svg>
</button>
在上面的例子中，我們有一個帶有標簽和圖標的菜單按鈕。為了向屏幕閱讀器隱藏圖標，添加了aria-hidden。
根據(jù)Mozilla Developer Network (MDN)，下面是屬性的用例
隱藏裝飾性的內(nèi)容，如圖標、圖像。
隱藏復(fù)制文本。
隱藏屏幕外或折疊的內(nèi)容。
4. 可訪問性對aria-hidden="true"的影響
是為屏幕閱讀器設(shè)計的，因為它只對屏幕閱讀器隱藏內(nèi)容。然而，內(nèi)容對于有視力的用戶仍然是可見的，并且鍵盤是可聚焦的。
(1) 動畫與互動
當(dāng)我們想讓一個隱藏的元素動起來時，例如，顯示隱藏的移動導(dǎo)航，它需要以一種可訪問的方式來完成。為了獲得一種可訪問的體驗，我們將探索一些值得學(xué)習(xí)的好例子，以及一些不好的例子，以避免犯可能會給屏幕閱讀器用戶帶來不好體驗的錯誤。
菜單動畫-不好的例子
我們有一個菜單，在展開時需要有滑動動畫。最簡單的方法是在菜單中添加以下內(nèi)容：
ul {
opacity: 0;
transform: translateX(100%);
transition: 0.3s ease-out;
}
ul.active {
opacity: 1;
transform: translateX(0);
}
有了上述內(nèi)容，菜單將根據(jù).active類展開和折疊，該類將通過 JavaScript 如下添加:
menuToggle.addEventListener('click', function(e){
e.preventDefault();
navMenu.classList.toggle('active');
});
結(jié)果可能看起來不錯，但它有一個很大的錯誤。使用opacity: 0不會隱藏可訪問性樹的導(dǎo)航。即使導(dǎo)航在視覺上是隱藏的，它仍然可以通過鍵盤聚焦，并且可以被屏幕閱讀器訪問。必須將其隱藏以避免混淆用戶。
下面是來自Chrome開發(fā)工具的 accessibility tree 的截圖:
簡而言之，accessibility tree是屏幕閱讀器用戶可以訪問的所有內(nèi)容的列表。在我們的例子中，導(dǎo)航列表在那里，而它在視覺上是隱藏的。我們需要解決兩個問題:
菜單隱藏時避免用鍵盤聚焦
當(dāng)導(dǎo)航隱藏時，避免通過屏幕閱讀器告知導(dǎo)航
下面的屏幕截圖顯示了Mac OS上的VoiceOver轉(zhuǎn)子是如何看到頁面的。導(dǎo)航列表在那里，而它是隱藏的
事例源碼：
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
菜單動畫-好的例子
為了修正這個錯誤，我們需要使用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);
}
添加后，菜單將從屏幕閱讀器中隱藏。讓我們再次測試，看看VoiceOver將顯示什么：
事例源碼：
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
5. 自定義復(fù)選框
默認的復(fù)選框設(shè)計很難自定義，因此，我們需要為復(fù)選框創(chuàng)建自定義設(shè)計。讓我們看看基本的 HTML：
Custom checkbox
要自定義復(fù)選框，我們需要以一種可訪問的方式隱藏輸入。為此，應(yīng)該使用position和其他屬性。有一個常見的CSS類，稱為sr-only或visual -hidden，它只在視覺上隱藏一個元素，并讓鍵盤和屏幕閱讀器用戶可以訪問它。
.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;
}
事例源碼：https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
隱藏按鈕
在Twitter上，有一個名為“查看新推文”(See New Tweets)的按鈕，對于帶有aria-hidden內(nèi)容的屏幕閱讀器來說是隱藏的，只有在有新推文可用時才會顯示出來。
總結(jié)
到此這篇關(guān)于隱藏 Web 中的元素方法及優(yōu)缺點教程詳解的文章就介紹到這了,更多相關(guān)隱藏 Web 中的元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
如您對本文有所疑義或者有任何需求，請點擊訪問腳本社區(qū)，百萬網(wǎng)友為您解惑!
本文來自腳本之家，原文鏈接：https://www.jb51.net/web/725054.html
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
