如何創造可用的網頁,無論瀏覽器的能力為何
當創建網頁,你唯一可以依靠的工作頁面的是HTML。這也許會失敗,但沒有HTML就沒有網頁,一切也變得毫無意義。這種以網頁為基礎創建網路服務的態度,我們稱作漸進增強 。
這意味著,在本質上,每個額外的層級(圖像,樣式,行為,影片,音訊)應該被看作是可選的。如果你在建立網頁時,抱持著「除了HTML其他一切可選」的想法,您會創建一個更好更強大的網頁。
首先,只要它能動
在製作新頁面或新功能時,僅用 HTML 製作 – 無圖片,無CSS,也沒有JavaScript,就只有HTML。也只放上能夠用 FORM或伺服器端處理的互動元素。
這給出了一個體驗的基線,在幾乎所有的瀏覽器都能動作。它可以讓你的網站在盡可能多的裝置,為盡可能多的人服務成為可能,包括舊的傳統瀏覽器和裝置。
再來,讓它更好
從這個基線開始,增加額外的資訊層級:
- 頁面可以加上圖片。
- 可加上預設風格。
- 在無需刷新整個頁面下,互動可以順暢、快速。
- 在提交數據到網路前,執行驗證。
- 圖表和數據表可以變成有互動元素的視覺呈現。
記得看待每個增加為,只是加分。這些增加只是讓較現代的瀏覽器可以執行的加分項目。這些加分是跟著已經可親近和可用的體驗而來的,這些體驗也有盡可能多的內容與互動性。
這與「關掉Javascript」無關
一個常見的誤解是,設計一個無需CSS、Javascript或其他東西的網站,是因為用戶選擇關閉它,他們自己認為這些是錯誤或者失誤。這不是「修好你的瀏覽器」的例子。
在許多情況下,額外的資訊層級會讀取失敗或故意被過濾,這可能是由於:
- 暫時性的網絡錯誤
- DNS搜尋失敗
- 該資源上找到植基的伺服器超載或關閉,並且不能在時間或在所有響應
- 大型機構(如銀行和金融機構,一些政府部門),他們的企業防火牆阻斷,刪除或改變從網際網路上來的內容。
- 移動網絡運營商重新採樣圖片和變更內容,以便加快下載時間並降低頻寬消耗。
- 防毒軟體和個人防火牆軟體,會改變和/或阻斷內容
當然,還是有人故意在瀏覽器中關閉功能。請尊重他們的決定,並仍然為他們提供實用和有用的服務。
這不僅與JavaScript有關
另一種常見的誤解是,漸進增強僅與JavaScript有關 – 不。除了HTML外,其他的資訊層級都是增強,不只是JavaScript。
將圖片增加到頁面中,需要合適的替代文字,為視障人士可能還需要一個較長的描述,而為了當圖片下載失敗時僅需較短的。
風格不能是分享信息的唯一方法:
- “粗體字”是不夠的,當你看不出來的粗體和普通文字的差別
- “紅項目是必填的”是不夠的,當你無法應用色彩,看不到顏色或因為色盲無法區分顏色
- 沒有字幕的影片和沒有文本的音訊不適合聽障人士
- 出現在影片中,只有視覺形式的信息(如在螢幕中的人們無聲的回答了問題)不適合視障人士
- 僅能用滑鼠達成的交互方式(如懸停效果,拖放操作)對於只使用鍵盤或僅能觸碰的裝置(手機、平板)的人是不能用的。
延伸閱讀
譯者:陳群岳
校稿者:Sharon Wang
原始出處:https://www.gov.uk/service-manual/making-software/progressive-enhancement.html