事例源碼：

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)容

「css」

.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)該顯示和隱藏哪些部分。

在上面的例子中，透明的黑色區(qū)域有clip-path。當(dāng)clip-path應(yīng)用于元素時，透明黑色區(qū)域下的任何內(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. 顏色透明

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

2. 字體大小

此外，將字體大小設(shè)置為0也很有用，因為這會在視覺上隱藏文本。考慮下面的示例，其中有一個具有以下結(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)是以可訪問的方式隱藏文本。為此，我添加了以下CSS

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

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

事例源碼：

https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

3. Aria Hidden

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

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

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

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

• 隱藏裝飾性的內(nèi)容，如圖標(biāo)、圖像。
• 隱藏復(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ù)選框

默認(rèn)的復(fù)選框設(shè)計很難自定義，因此，我們需要為復(fù)選框創(chuàng)建自定義設(shè)計。讓我們看看基本的 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ù)選框，我們需要以一種可訪問的方式隱藏輸入。為此，應(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)文章，希望大家以后多多支持腳本之家！

最新評論