事例源碼：

https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

6. 可訪問性對visibility: hidden的影響

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

(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é)果，它將被完全隱藏。一旦它聚焦在鍵盤上，它就會像這樣顯示出來

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

事例源碼：

https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

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

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

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)容都不會顯示。

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

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

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

8. 可訪問性對clip-path的影響

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

事例源碼：

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

三、控制顏色和字體大小

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

1. 顏色透明

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

2. 字體大小

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

  
 
 
 
   
  
  
  
 
   
  
  
  
   
   
  
  
  
     
   
  
  
  
   
   
  
  
  
  Like 
   
  
  
  
 
  
 
 

我們的目標(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屬性時(shí)，它將從可訪問性樹中刪除該元素，這可以增強(qiáng)屏幕閱讀器用戶的體驗(yàn)。注意，它并沒有在視覺上隱藏元素，它只針對屏幕閱讀器用戶

  
 
 
 
   
  
  
  
 
   
  
  
  
    Menu 
   
  
  
  
     
   
  
  
  
 
  
 
 

在上面的例子中，我們有一個(gè)帶有標(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è)計(jì)的，因?yàn)樗粚ζ聊婚喿x器隱藏內(nèi)容。然而，內(nèi)容對于有視力的用戶仍然是可見的，并且鍵盤是可聚焦的。

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

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

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

我們有一個(gè)菜單，在展開時(shí)需要有滑動(dòng)動(dòng)畫。最簡單的方法是在菜單中添加以下內(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é)果可能看起來不錯(cuò)，但它有一個(gè)很大的錯(cuò)誤。使用opacity: 0不會隱藏可訪問性樹的導(dǎo)航。即使導(dǎo)航在視覺上是隱藏的，它仍然可以通過鍵盤聚焦，并且可以被屏幕閱讀器訪問。必須將其隱藏以避免混淆用戶。

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

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

• 菜單隱藏時(shí)避免用鍵盤聚焦
• 當(dāng)導(dǎo)航隱藏時(shí)，避免通過屏幕閱讀器告知導(dǎo)航

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

事例源碼：

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

• 菜單動(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); 
   
  
  
  
} 
  
 
 

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

事例源碼：

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

5. 自定義復(fù)選框

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

  
 
 
 
   
  
  
  
 
   
  
  
  
   
   
  
  
  
  Custom checkbox 
   
  
  
  
 
  
 
 

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

  
 
 
 
   
  
  
  
.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上，有一個(gè)名為“查看新推文”(See New Tweets)的按鈕，對于帶有aria-hidden內(nèi)容的屏幕閱讀器來說是隱藏的，只有在有新推文可用時(shí)才會顯示出來。