石家莊網站建設 > 做網站 >

石家莊網站建設教程

2020-12-02 20:31:03
石家莊網站建設教程 

搜索引擎優化(SEO)是由搜索引擎創建自動分類和排名的算法演變而來的,SEO利用這些算法中的漏洞進行操作。

另一方面,可訪問性是出于一種愿望而產生的:通過輔助技術(AT)將人類與信息聯系起來。

當我們把這兩個行業剝離到一臺機器正在閱讀網頁時,會有一些重疊。這就是我們在本系列中要研究的。如果你在優化搜索引擎,你也會影響到使用屏幕閱讀器和輔助技術的人們對你網站的體驗。

在今天關于易訪問性+SEO的帖子中,我們將深入探討頁面上的一些方面,包括格式化文本、顏色、鏈接和我們看不到但機器可以看到的內容。上一篇文章覆蓋的結構是重疊的,我們將在這篇文章之后的最后一篇文章中討論圖像、視頻和非文本元素。

隱藏文本

有時候,頁面上可以看到的內容提供了機器人或屏幕閱讀器無法讀取的信息或上下文,比如在信息圖像中。文本、圖形和整體上下文都在圖像中,因此在本例中,您需要提供屏幕閱讀器和機器人程序可以用于信息和上下文的文本—可以是可見的,也可以是隱藏的。

可能還有其他原因,您希望主動隱藏文本,而不是對所有可見的顯示,但不是對機器人或屏幕閱讀器。一個例子可能是一個段落,它只在單擊插入符號時才會顯示更多文本。在本例中,默認情況下,文本是從視覺體驗中隱藏的,但是您需要確保屏幕閱讀器和機器人程序能夠獲得它。

一個網站上四個問題的截圖,用插入符號打開問題看答案。三個關閉,一個打開以顯示答案文本。

下表顯示了這些不同的隱藏內容的方法是如何被有視力的用戶、屏幕閱讀器和搜索引擎感知的。我不是一個無障礙專家,所以如果你知道什么不同或額外的,請分享。


我強烈建議不要僅僅針對垃圾郵件使用這些隱藏文本技術,因為谷歌可能會索引隱藏文本,但不會給隱藏文本與非隱藏文本相同的權重或排名效果,如果它被濫用,必須手動審閱,你可能會發現自己有一些麻煩。

在這一點上,讓我們深入研究兩個實際的常見示例:一個是主內容在圖像中,因此我們需要使隱藏內容對屏幕閱讀器和機器人程序可用;另一個是在默認情況下,主要內容對用戶是隱藏的,我們需要確保屏幕閱讀器和機器人能夠找到它。

為信息圖提供文本

我們想在這里為讀者提供一個有關信息的圖片和搜索引擎的例子。簡單的方法是將文本添加到infographic下面的頁面中,如本例所示。

但是泰德·德雷克是一個無障礙天才(他在本系列文章中的幫助以及我對a11y的興趣——謝謝你,泰德),他還向我們展示了一種為屏幕閱讀器和機器人提供視覺用戶看不見的信息的選項。信息圖通過iFrame被拉到一個頁面中(或者很容易共享),除了infographic圖像之外,iFrame HTML還包含了裁剪內容中的所有描述性文本,對于通過infographic閱讀相同內容的有視力的用戶來說是看不見的,但完全易讀和互動的屏幕閱讀器和機器人不能閱讀信息圖。

你自己看看吧。這個頁面出現在Google搜索結果中的信息圖片文本“日子越來越長,但你仍然無法抽出時間來計劃那些急需的出游計劃。”這段文字實際上并沒有出現在頁面上。

旁注:請注意,頁面上有文本的那個,我上面提供的例子,對我來說,排名高于可見文本。

Google搜索結果顯示了帶有隱藏文本的infographic頁面作為繼帶有暴露文本和pdf的infographic頁面之后的第三個搜索結果

在這個隱藏的文本示例中,infographic本身是一個單獨的HTML頁面上提供的圖像,其中的文本信息包含在1px CSS剪輯中,通過iFrame在搜索結果中拖入該頁面。

乍一看,這個單獨的HTML頁面看起來只有一個圖像,但是在代碼中您會看到,在一個“視覺上隱藏”的CSS類中也隱藏了文本,這個CSS類剪輯了內容


返回列表