Web 隱藏技術：幾中隱藏 Web 中的元素方法及優缺點

Web 開發中出于多種原因，我們需要隱藏元素。例如，一個按鈕應該在移動中可見，而在桌面視口中隱藏?；蛘撸谝苿釉O備上隱藏但要在桌面上顯示的導航元素。隱藏元素時有三種不同的狀態：

元素完全隱藏并從文檔流中刪除。
元素只是隱藏在視覺上，而且仍然可以被輔助技術(AT)訪問，比如屏幕閱讀器。
元素是可見的，但僅對屏幕閱讀器隱藏。

在這篇文章中，我們將學習在html和css中隱藏元素，并涵蓋易訪問性、動畫和隱藏用例等方面，讓我們開始吧。

HTML5 隱藏屬性

它是一個布爾 HTML 屬性，隱藏了附加到它的元素。當瀏覽器加載一個web頁面時，它不會渲染帶有hidden屬性的元素，除非該元素被CSS手動覆蓋，這與應用display: none的效果類似。

考慮下面的例子：

我們有一個title、一個figure和一個描述。只有當視口寬度大于400px時，才會顯示該圖。我向元素添加了hidden`屬性。

在CSS中，我使用hidden屬性僅在所需的視口大小中顯示元素。

img[hidden] {
  display: none;
}

@media (min-width: 400px) {
  img[hidden] {
    display: block;
  }
}

事例源碼：https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100

那么，你可能會問為什么不使用display: none呢?這是個好問題。當通過其hidden屬性調用圖像選擇器時，我們可以確定即使CSS因為某種原因沒有加載，元素也會被隱藏。

可訪問性對hidden的影響

從可訪問性的角度來看，hidden將元素完全隱藏在web頁面之外，因此屏幕閱讀器無法訪問它。一定要避免使用它來隱藏僅用于表示目的的元素。

CSS display 屬性

每個元素都有一個默認的display值，比如inline-block、block、table等等。要隱藏具有display屬性的元素，我們應該使用display: none。當一個元素使用display: none隱藏時，它的所有后代都將被刪除。

考慮下面的例子：

img {
  display: none;
}

@media (min-width: 400px) {
  img {
    display: block;
  }
}

這將完全隱藏文檔流和屏幕閱讀器中的圖像。也許你想知道文檔流是什么？請參見下圖：

注意，當藍皮書被隱藏時，它已被完全從堆棧中刪除。為它保留的空間已經消失了。同樣的概念也適用于在HTML中隱藏元素時。元素的預留空間已經沒有了，它更改了文檔流，或者在我們的示例中，更改了圖書流堆棧。

下面是一個動畫，演示當移除書本時發生的情況：

如果資源隱藏在CSS中，它們會加載嗎？

是的，會的。例如，如果<image>被CSS隱藏，并且我們在某個斷點處顯示它，則它已經被加載。即使圖片被CSS隱藏，該圖片也會引起HTTP請求。

在下面的演示中，我只添加了一個圖像，并使用CSS隱藏它。然后，我打開「DevTools」并檢查networks選項卡，它顯示圖像已加載。

稍后我們將對此進行討論，以解釋如何在特定斷點或視口大小中不需要HTTP請求時減少HTTP請求。

style 元素

值得一提的是，有些元素的默認值是display: none。可以將<style>元素添加到HTML頁面中，我們可以將其display屬性更改為block，這樣就可以看到它了。

「html」

<body>
    <style>
       .title { color: #000; }
    </style>
</body>

「css」

style {
    display: block;
}

如果您希望樣式塊始終可見且可編輯，這是非常有用的?？梢酝ㄟ^向style標簽添加屬性contentteditable =true來編輯它。

事例：https://codepen.io/shadeed/pen/3c1e8d7d69bcf03aa875e3e50d0ffe02?editors=1100

可訪問性對display: none的影響

使用display：none時，它將對屏幕閱讀器完全隱藏。

Opacity

通過將opacity度設置為0，該元素及其所有后代將被隱藏，并且不會被繼承，但是，它僅從視覺角度隱藏它們。除此之外，opacity值為1以外的元素將創建一個新的堆疊上下文。

在上圖中，藍皮書僅在視覺上隱藏。與使用display: none時發生的情況相比，它的空間仍然保留，并且堆棧順序沒有變化。

img {
    opacity: 0;
}

根據最初的示例，如果我們要隱藏不透明的圖像，結果將如下所示：

該圖像仍然存在，并且已保留其空間。它僅從視覺角度隱藏。

更新:2020年1月13日

Dusan Milovanovic指出，pointer-events: none | auto可以用來禁用opacity為0的隱藏元素上的鼠標事件。這一點很重要，因為用戶可能會對單擊、懸?；蜻x擇隱藏元素的文本感到困惑。

事例：https://codepen.io/shadeed/pen/4900ddd4a4d324cc531c1980088f775a?editors=1100

可訪問性對opacity: 0的影響

一個元素以opacity: 0仍然可以被屏幕閱讀器訪問，并且可以用鍵盤進行聚焦。

Visibility

通過使用visibility: hidden，我們可以顯示或隱藏類似于使用opacity: 0的元素，而不會影響文檔的視覺流。

請注意，藍皮書是如何從可視流中隱藏的，但是它并沒有影響圖書堆棧的順序。

當在父元素上使用visibility: hidden時，所有內容都是隱藏的，但是當該父元素的子元素具有visibility: visible時，將顯示該子元素。

「html」

<article>
  <h1>Spring is on the way</h1>
  <img src="landscape.jpg" alt="">
  <p><!-- Desc --></p>
</article>

「CSS」

article {
    visibility: hidden;
}

img {
    visibility: visible;
}

在上面的例子中，<article>元素具有visibility: hidden。但是，添加visibility: visible可以讓圖片顯示。同樣，這是因為visibility應用于元素的后代，但是可以從具有該元素的子元素重寫它。

事例源碼：https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

可訪問性對visibility: hidden的影響

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

Positioning

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

要將鏈接放置在屏幕之外，我們應該添加以下內容

「css」

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

值-100%將推動元素100%的視口高度。結果，它將被完全隱藏。一旦它聚焦在鍵盤上，它就會像這樣顯示出來

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

事例源碼：https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

可訪問性對position: absolute | fixed的影響

屏幕閱讀器可訪問該元素，并且鍵盤可聚焦。它只是從視口中隱藏起來。

Clip Path

當在元素上使用clip-path時，它創建一個裁剪區域，該區域定義應該顯示和隱藏哪些部分。

在上面的例子中，透明的黑色區域有clip-path。當clip-path應用于元素時，透明黑色區域下的任何內容都不會顯示。

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

將每個方向的多邊形值設置為0 0，則裁剪區域的大小將調整為0。結果，圖像將不會顯示。同樣，這也可以用一個圓來代替多邊形:

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

可訪問性對clip-path的影響

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

事例源碼：https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

控制顏色和字體大小

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

顏色透明

通過使文本的顏色透明，它將隱藏在視覺上。這對于只有圖標的按鈕非常有用。

字體大小

此外，將字體大小設置為0也很有用，因為這會在視覺上隱藏文本。考慮下面的示例，其中有一個具有以下結構的按鈕：

我們的目標是以可訪問的方式隱藏文本。為此，我添加了以下CSS

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

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

事例源碼：https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

Aria Hidden

當向元素添加aria-hidden屬性時，它將從可訪問性樹中刪除該元素，這可以增強屏幕閱讀器用戶的體驗。注意，它并沒有在視覺上隱藏元素，它只針對屏幕閱讀器用戶。

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

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

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

隱藏裝飾性的內容，如圖標、圖像。
隱藏復制文本。
隱藏屏幕外或折疊的內容。

可訪問性對aria-hidden="true"的影響

是為屏幕閱讀器設計的，因為它只對屏幕閱讀器隱藏內容。然而，內容對于有視力的用戶仍然是可見的，并且鍵盤是可聚焦的。

動畫與互動

當我們想讓一個隱藏的元素動起來時，例如，顯示隱藏的移動導航，它需要以一種可訪問的方式來完成。為了獲得一種可訪問的體驗，我們將探索一些值得學習的好例子，以及一些不好的例子，以避免犯可能會給屏幕閱讀器用戶帶來不好體驗的錯誤。

####　菜單動畫-不好的例子

我們有一個菜單，在展開時需要有滑動動畫。最簡單的方法是在菜單中添加以下內容：

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

ul.active {
    opacity: 1;
    transform: translateX(0);
}

有了上述內容，菜單將根據.active類展開和折疊，該類將通過 JavaScript 如下添加:

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

結果可能看起來不錯，但它有一個很大的錯誤。使用opacity: 0不會隱藏可訪問性樹的導航。即使導航在視覺上是隱藏的，它仍然可以通過鍵盤聚焦，并且可以被屏幕閱讀器訪問。必須將其隱藏以避免混淆用戶。

下面是來自Chrome開發工具的 accessibility tree 的截圖:

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

1.菜單隱藏時避免用鍵盤聚焦 2.當導航隱藏時，避免通過屏幕閱讀器告知導航

下面的屏幕截圖顯示了Mac OS上的VoiceOver轉子是如何看到頁面的。導航列表在那里，而它是隱藏的

事例源碼：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

菜單動畫-好的例子

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

「css」

添加后，菜單將從屏幕閱讀器中隱藏。讓我們再次測試，看看VoiceOver將顯示什么：

事例源碼：https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

自定義復選框

默認的復選框設計很難自定義，因此，我們需要為復選框創建自定義設計。讓我們看看基本的 HTML：

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

事例源碼：https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

###　隱藏按鈕

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

作者：Ahmad shaded 譯者：前端小智來源：sitepoint

原文：https://www.sitepoint.com/hide-elements-in-css/

為一名 7 年多的前端開發者，我從未想過我的工作需要具有可訪問性，直到最近才領悟。

是的，我們確實提供了帶 alt 標簽的圖片，并使用 header、footer、main、aside、nav 和 section 標簽......就是這些，大多數人止步于此。我們中的一些人仍然使用帶 class 的 div 作為這些特定的布局元素。為什么？因為我們不知道。

我們這樣做不是任何人的錯，除了少數，這個領域的大部分人都是被推到這個坑里謀生的，多數又在坑里一遍又一遍地做著同樣的事情，到最后還在想我到底在做什么。

直到有必要改變。

也許這種需要會以啟蒙的形式出現，順便說一句，啟蒙很少發生，更有可能是將正確的行業可訪問性規范從開發團隊的指導方針變為強制性的要求。

后者可能是你我所處的境況。好了，閑聊結束，我們直奔主題。

注意：不適用于高級前端技術人員，我沒有詳細介紹可訪問性，只想制定一個簡單的指引，可以在所有項目中遵循，類似于需要注意的事項清單。

如果你發現任何錯誤，請隨時指出，我會盡快糾正。

以下是我們在開發任何前端時需要注意的事項：

HTML 語義 —— 正確使用 HTML 分區元素
標題 —— 用于顯示文檔的結構，而非用于大字體的設計
鍵盤導航使用“tabindex”和 ARIA —— 確保 tab 可用以及刪除多余的 tab 鏈接
可訪問的圖標按鈕 —— 至少使用帶有適當標簽的<button>
焦點指示器 —— 除非有替代方案，否則不要禁用默認的焦點樣式
盡可能提供視覺標簽
描述性信息圖——為屏幕閱讀器提供回退文本描述

HTML 語義

有一種叫做 ARIA 地標的東西，它能簡單地將網頁劃分為不同的地標，使屏幕閱讀器更容易在網頁內部導航。

當前這是不需要主動思考就能實現的，因為我們可能在不知不覺中就這么做了，即“默認情況下，HTML 分區元素定義了 ARIA 地標”。

這意味著正確地使用 HTML 分區元素，像<header>、<main>、<nav>、<footer>、article>、 <nav>等，而不要使用<div class="header">。

請查看ARIA實踐，可以更深入地學習。

標題

屏幕閱讀器瀏覽網頁的另一種方式是使用標題。

使用標題是展示文檔結構的一種方式，如果只是設計上要顯示大字體或粗體，則不要使用它。

考慮一個沒有 h1 頁面的場景，當屏幕閱讀器讀到這樣的頁面時，用戶是無法獲知標題的，而頁面的標題通常是用<h1>表示。

在這種情況下，為了提高可訪問性，你可以做兩件事：

請設計師做出一些必要的改變，這可能行不通，因為設計已經被客戶簽署了。
將<h1>標簽添加到頁面結構，并隱藏它。

當我們需要在網頁上隱藏某些內容時，有以下幾個選項：

display: none;
visibility: hidden;
opacity: 0;
clip-path: inset(100%)

選項 1 和 2 不可行，因為它們使元素從 DOM 中完全刪除了，屏幕閱讀器也不可用，隱藏屬性也不行，這等同于“display: none;”。

參考用下面的樣式類來隱藏你的元素：

.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

復制代碼

鍵盤導航使用“tabindex”和 ARIA

我們需要了解的是，不是所有的用戶都使用鼠標來瀏覽網頁，有些只使用鍵盤導航，還有一些使用屏幕閱讀器。對這些用戶來說，從網頁的一個部分到另一個部分，可能不像使用鼠標操作的人那么簡單。

我們考慮下面的場景：

假設我們有一個博客，在文章的列表頁上，一篇文章如下所示：

它有一個縮略圖、一個標題、一個描述和一個“閱讀更多”的按鈕，這是幾乎所有博客文章的通用模板。那么，我們是如何鏈接到詳情頁呢？

我們將縮略圖做成一個鏈接(link 1)，接著是標題(link 2)，然后是“閱讀更多”按鈕(link 3)，這 3 個鏈接都指向同一個頁面。

因此，當我們使用屏幕閱讀器或鍵盤瀏覽頁面時，我們必須用 tab 鍵按 3 次才能跳轉到下一篇文章。

這當然得避免，也很簡單。對冗余的鏈接，可以添加以下屬性：

tabindex="-1"（它可以防止鏈接被 tab 選中 —— 對于鍵盤用戶）
aria-hidden="true"（你不需要將它暴露給屏幕閱讀器，因為已經有了相同的鏈接 —— 對于屏幕閱讀器）

可訪問圖標按鈕

首先，在設計中有按鈕時，應使用<button>元素，不要使用<div>等其他元素，再將樣式設置為按鈕的樣子，我知道我們這樣做已經很久了，但是時候改變了。

原因正如 HTML 語義部分所述，原生元素有很多內置的 ARIA 特性。

盡管用<div>和<button>做出來的按鈕對于大多數用戶來說，看起來是一模一樣的，但對于使用屏幕閱讀器的盲人用戶來說，它看起來非常不同，屏幕閱讀器甚至可能會忽略這是一個按鈕。

這里也有一些注意事項：

不設置按鈕樣式以及設置按鈕樣式的理想方法

針對于沒有任何文本、只有圖片的按鈕，可遵循以下三個步驟中的任何一個：

使用隱藏的<span>來指明按鈕標簽
在<button>上使用 aria-label
在<button>上使用 aria-labelledby

如果你有興趣，請查看這篇博文，了解更多關于上述步驟的詳情。

焦點指標

你用過以下代碼嗎?

:focus {
    outline: none;
}

復制代碼

當我們在網頁上按 tab 鍵時，看到的輪廓就是焦點指示器，通常我們用上面的代碼禁用它，至少我以前是這么做的。

這真是個糟糕的主意，焦點指示器能告訴使用鍵盤導航的用戶們他們當前正在交互的位置，如果我們移除焦點樣式，相當于將這些用戶置于黑暗中，隱藏焦點指示器就像隱藏鼠標光標。

因此，如果你刪除了默認的焦點樣式，那一定得添加自定義的焦點樣式。

在設置焦點指示器的樣式時，我們需要考慮以下幾點：

對比區
與相鄰顏色對比
不要遮蓋焦點元素

在下面的示例中，黑色顯示了焦點指示器啟用狀態(使用鍵盤 tab 時的樣式)：

設置焦點指示器樣式的不同方法

對比區 —— 顏色發生變化的地方

相鄰顏色 —— 與焦點指示器相鄰的顏色

聚焦狀態和非聚焦狀態的顏色對比度最小應為 3:1，焦點指示器和相鄰顏色之間也要符合這個規則。

意思是，如果你將一個白色背景頁上的綠色按鈕，設置的焦點指示器樣式為 2px 的黑色邊框，那么黑色和綠色、以及黑色和白色之間的最小對比度應該是 3:1。

如果你要覆蓋默認的焦點樣式，可使用以下代碼：

:focus {
    outline: none;
}
 
button:focus {
    /* some exciting button focus styles */
}


button:focus:not(:focus-visible) {
    /* undo all the above focused button styles if the button has focus but the browser wouldn't normally show default focus styles */
}


button:focus-visible {
    /* some even *more* exciting button focus styles */
}

如果你有興趣，可以查看這篇博文了解詳情。

盡可能提供視覺標簽

這對于使用語音命令瀏覽網頁的人來說很有用。大家有點難理解吧，我先解釋下為什么。首先，想想語音識別軟件是如何工作的：

以蘋果的 Siri 為例，我們先說一個關鍵句：“Hey Siri”，然后再說想要執行的命令。

比如：“Hey Siri，現在幾點了?”

同理，想象一下用 Siri 瀏覽網頁：

假設有一個按鈕叫“發送”，我們可以說：”Hey Siri，點擊發送按鈕”。這很簡單，對吧?

但是如果按鈕只有一個圖標，而沒有“發送”標簽，你要如何告訴 Siri 點擊哪個按鈕呢?

因此，盡可能提供視覺標簽，如果不行，那至少讓它可通過 tab 使用。

描述性信息圖

當 SVG 用于圖表等信息圖或其它類型的數據表示時，通常不會為可訪問用戶提供任何信息。為了方便他們，最好的方式是提供屏幕閱讀器能夠讀取到信息圖文本描述。

下面示例實現這類 SVG 的好方法：

<object
    role="img"
    aria-label="Average something of something"
    aria-describedby="something_desc"
    data="some.svg"
    type="image/svg+xml"
>
 <!-- fallback -->
 <p id="something_desc">90% increase in number of sales in the year 2022 with proper SEO tactics implemented as to no SEO done for the previous year.</p>
</object>

小結

一份可以立刻行動的匯總清單：

是否正確地使用了所有的 HTML 分區元素，而不僅僅是 div?
標題是否用于適當的結構，而不是強調大小?
是否用 tabindex=-1 刪除了不需要的鏈接？
所有按鈕是否都可以訪問?他們有合適的名稱或標簽嗎?如果沒有，你是否提供了 ARIA 標簽或替代方法?
你改變焦點指示器的樣式了嗎?如果是，它們是否符合規范?
按鈕、復選框和單選等表單元素，應該是可訪問的。
盡可能提供視覺標簽。
信息圖表應該有一個文字說明的回退，如果使用 SVG，則<object>應帶有回退描述。
應使用 tabindex= -1 禁用屏幕外鏈接，不然用戶將被卡住，而不知道發生了什么。

可訪問性就像是一片海洋，我只觸及了表面。希望通過本文，能夠為我們大多數人照亮一個潛在的黑暗區域。

我所寫的一切都基于Sara Soueidan的博客和談話，請訪問她的博客了解更多信息。她有許多很酷的話題，非常地深入淺出。

原文鏈接：Frontend accessibility. Doing it the right way.

了解更多軟件開發與相關領域知識，點擊訪問 InfoQ 官網：https://www.infoq.cn/，獲取更多精彩內容！

ython3對url編解碼

import urllib.parse
# Python3 url編碼
print(urllib.parse.quote("天安門"))
# Python3 url解碼
print(urllib.parse.unquote("%E5%A4%A9%E5%AE%89%E9%97%A8"))

my_web.py(修改)

在線咨詢

上一篇：JavaScript基礎知識：HTML DOM文檔對象模型
下一篇：編寫你的第一行 HTML 代碼，來幫助蝙蝠俠寫一封情書

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web 隱藏技術：幾中隱藏 Web 中的元素方法及優缺點

HTML5 隱藏屬性

可訪問性對hidden的影響

CSS display 屬性

如果資源隱藏在CSS中，它們會加載嗎？

style 元素

可訪問性對display: none的影響

Opacity

更新:2020年1月13日

可訪問性對opacity: 0的影響

Visibility

可訪問性對visibility: hidden的影響

Positioning

可訪問性對position: absolute | fixed的影響

Clip Path

可訪問性對clip-path的影響

控制顏色和字體大小

顏色透明

字體大小

Aria Hidden

可訪問性對aria-hidden="true"的影響

動畫與互動

菜單動畫-好的例子

自定義復選框

HTML 語義

標題

鍵盤導航使用“tabindex”和 ARIA

可訪問圖標按鈕

焦點指標

盡可能提供視覺標簽

描述性信息圖

小結

ython3對url編解碼

您的項目需求

如果資源隱藏在CSS中，它們會加載嗎？