如何淡入整個網頁 - 可訪問

客戶已要求其主頁開始空白（只有徽標和背景圖像可見），然後在一兩秒鐘後淡入導航和內容。如何淡入整個網頁 - 可訪問

我可以從通過CSS隱藏的內容開始，並使用jQuery淡入其中。不幸的是，這違反了漸進式增強：在有效代碼運行之前，網站將完全無法使用，從而導致使用屏幕閱讀器等視覺障礙者出現問題。

我考慮的兩種解決方法是Flash和<noscript>標籤。由於Flash並未在網站的其他地方使用，因此Flash看起來過於誇張;此外，主頁內容繁多，不斷更新一系列新聞項目，輕量級博客。 <noscript>標籤不會幫助使用屏幕閱讀器的視障者，因爲他們的瀏覽器通常啓用了腳本。

我是否缺少解決方案？或者這不是一個好主意？

有人投票給大家？ –

我也想過。我希望人們在投票時會發表評論，以便我們其他人能夠理解他們不同意的觀點。 –

我已經提高了除了我之外的每個人的抵抗力;人們不加評論就會失望，這是可恥的。 – Bojangles

執行以下操作

<html> 
.... 
<body> 
<script>$("body").addClass("hide");</script> 
...

有了這個CSS

body.hide #myHidden-div{ 
    opacity: 0; 
}

暫停兩秒鐘，然後進行你應該可以做$("#myHidden-div").fadeIn();

如果用戶已禁用js，則addClass標記將永遠不會被觸發，也不會隱藏任何內容。我不認爲你需要使用<noscript>標籤。

您必須確保腳本標記正好在<body>之後，以便用戶看不到內容跳轉，然後突然隱藏。這比默認隱藏每一件事都要好，因爲一些搜索引擎可能會注意到你有隱藏的文本並且因爲垃圾郵件的原因而忽略它。

2011-08-12 15:49:42

謝謝阿米爾，這是我沒有想到的解決方法 - 比jQuery .hide（）更輕。我仍然擔心，在jQuery有機會初始化並運行之前，可能會有短暫的內容閃現，尤其是因爲我們想要適應慢速撥號連接的農村用戶。所以我會嘗試一下我的帶寬限制，如果它不起作用，我會向客戶解釋爲什麼我們不應該在網站中褪色。 –

@安迪很高興我能幫到你。如果jquery腳本包含在''標籤之上，那麼瀏覽器在到達主體時應該已經執行了腳本。讓我知道它是如何工作的。 –

我認爲這個問題唯一的，不理想的解決方案是在加載元素後使用jQuery的hide()函數，然後淡入。你會得到一個閃光的內容，但它是可訪問的。我有一個小例子here。

2011-08-12 15:47:53 Bojangles

謝謝果醬。我會嘗試這種方法，除了內容閃爍的可能性增加之外，因爲.hide（）是一個比使用jQuery的JavaScript添加類更重量級的函數。（我不確定是誰投了票，而不是我。） –

只是一個想法:-)看起來你找到了解決問題的辦法，這就是你的問題。以及來自JamWaffles的所有糟糕的回答;-P – Bojangles

我想你能做出這樣一個黑客：

另外，推回你正在建立這個網站的人，因爲這是一個可怕的用戶體驗。 = D

2011-08-12 15:48:05 Tejs

蘋果在他們的網站上做它，這不是一個可怕的用戶體驗 – soniiic

而不是默認隱藏的內容，他應該開始顯示它。因爲不然的話，如果noscript css掛起，它會在一段時間後變成白色屏幕。 –

如果你隱藏的東西也有一個SEO的損失，因爲更聰明的搜索引擎現在看什麼是隱藏的，並沒有索引。 –

針對視障人士和其他人有不同的網站。一個有腳本，另一個沒有。

如果您有一些服務器端代碼，可以像獲取變量一樣簡單。使用jQuery

* 
{ 
    position:relative; 
    left:-9999px; 
}

：

2011-08-12 15:48:08 Neal

謝謝Neal，+1。我考慮過這種方法，但是爲了維護的原因，如果可能的話，不希望複製主頁（以及將來有人繼承代碼的潛在混淆原因）。 –

在頭，您可以創建在JavaScript設置這個CSS規則$("*").css({position: 'relative', left: '-9999px'})

然後在頁面的底部運行javascript來掩飾一切，刪除該CSS規則，然後像你想要的那樣逐漸淡入。

這適用於非JavaScript的瀏覽器，並支持JavaScript的屏幕閱讀:)

2011-08-12 15:48:54 soniiic

感謝soniiic，建議的方法+1;非常類似於阿米爾，我通過毛髮廣泛接受。與Amir的一樣，我擔心內容閃爍的可能性會隨之消失：內容會一直存在，直到jQuery加載並運行爲止，這會在緩慢連接時更有可能發生。不過，這似乎很接近。 –

回答