可訪問性 頁面縮放
為什麼
視力低下的人需要縮放內容才能使用頁面。
什麼
文字縮放的“大哥”是頁面縮放。縮放一切！這些原則很容易理解。
- 避免水平滾動。
- 所有內容均可用。
- 所有功能均可用。
- 避免在影像中使用文字。
- 為關鍵內容提供空間。
可用意味著沒有任何內容被裁剪、截斷或遮擋。
頁面縮放通常會在 響應式網站上觸發移動檢視，這是好事。
如何操作
您現在將學習支援頁面縮放的五種技術。
為關鍵內容提供足夠的空間
不要讓次要內容佔據螢幕。
隱藏的圖示
在這個來自 Samsung India 的示例中，頁面被放大到 400%。內容縮放正常。沒有水平捲軸。但是，聊天按鈕佔據了瀏覽器視窗的很大一部分。搜尋、購物車或選單按鈕不容易訪問。並且按鈕圖形的質量很低。此外，還有一個巨大的應用程式廣告。
改進
- 為聊天按鈕新增一個**最小化按鈕**。使用最小化版本作為預設。
- 使用**向量圖形**（如 SVG）而不是光柵圖形（如 PNG）。
- 僅為移動**裝置**顯示移動廣告。
無雜亂
在這個來自飛利浦的例子中，整個視口都可用於主要內容。主導航已開啟，沒有雜亂。文字和圖形縮放良好。
視口已設定
<meta name="viewport" content="width=device-width, initial-scale=1">
瞭解更多關於響應式網頁設計的資訊。
避免水平滾動
二維滾動令人困惑。
固定寬度
在這個來自戴爾的例子中，我們只能看到標題的一小部分。該網站在縮放時不會縮放。結果是很大的水平滾動，使得二維頁面導航困難。
此外，cookie 同意按鈕是固定的，即使已給予同意也無法刪除。徽標和圖示是低解析度的 PNG，縮放效果不佳。未設定視口。
改進
- 讓網站響應式。
- 為 cookie 按鈕新增一個**最小化按鈕**。使用最小化版本作為預設。
- 使用**向量圖形**（如 SVG）而不是光柵圖形（如 PNG）。
所有內容和功能均可用
縮放時不得隱藏任何內容。
隱藏的選項卡
在這個來自索尼的例子中，帶有產品資訊的選項卡在桌面瀏覽器中使用頁面縮放時不可訪問。即使使用者滾動，滾動也發生在瀏覽器視窗之外。所有規格、功能、評論和支援都無法訪問。問題是整個部分是“粘性的”
<section class="sticky-nav">
.sticky-nav {
position: fixed;
z-index: 1035;
top: 0;
}
此部分在移動檢視中高 159 畫素。當放大四倍時，固定部分佔據了桌面檢視的 636 畫素。瀏覽器高度為 720 畫素，減去瀏覽器頂部部分，為主內容留下的空間不多。
固定內容不一定不可訪問。關鍵是要始終在常見的瀏覽器尺寸下使用頁面縮放測試您的網站。
在移動檢視中，選項卡下的內容是可訪問的。
華為的粘性導航不是很高，因此為主內容留下了足夠的空間。
避免在影像中使用文字
在這個來自小米的例子中，縮放後的文字呈畫素化，因為它屬於影像的一部分。文字的一部分也在瀏覽器視窗之外，因此使用者必須滾動才能閱讀整個產品標題。除了可訪問性外，使用純 HTML 和 CSS 顯示文字還有很多好處：響應式、可翻譯和可搜尋。
